From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/web/accessibility/index.html | 74 + .../accessibility/understanding_wcag/index.html | 59 + .../understanding_wcag/keyboard/index.html | 94 + files/uk/web/api/ambient_light_events/index.html | 66 + files/uk/web/api/angle_instanced_arrays/index.html | 83 + .../index.html" | 201 ++ files/uk/web/api/blob/index.html | 230 ++ files/uk/web/api/canvas_api/index.html | 166 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 152 ++ files/uk/web/api/canvas_api/tutorial/index.html | 63 + .../index.html" | 108 + files/uk/web/api/console/dir/index.html | 104 + files/uk/web/api/console/index.html | 278 +++ files/uk/web/api/console/log/index.html | 173 ++ files/uk/web/api/customevent/index.html | 96 + .../web/api/customevent/initcustomevent/index.html | 120 + files/uk/web/api/document/index.html | 470 ++++ .../api/document/visibilitychange_event/index.html | 82 + files/uk/web/api/domstring/index.html | 45 + files/uk/web/api/element/getclientrects/index.html | 219 ++ files/uk/web/api/element/index.html | 490 +++++ files/uk/web/api/globaleventhandlers/index.html | 273 +++ .../api/globaleventhandlers/onkeydown/index.html | 93 + .../web/api/globaleventhandlers/onkeyup/index.html | 95 + .../api/globaleventhandlers/onmouseover/index.html | 71 + files/uk/web/api/headers/index.html | 133 ++ files/uk/web/api/history_api/index.html | 122 ++ files/uk/web/api/html_dom_api/index.html | 472 ++++ .../api/html_dom_api/microtask_guide/index.html | 324 +++ files/uk/web/api/htmlcanvaselement/index.html | 264 +++ files/uk/web/api/htmlelement/index.html | 486 ++++ files/uk/web/api/htmlelement/offsettop/index.html | 60 + files/uk/web/api/htmlformelement/index.html | 245 +++ files/uk/web/api/htmlformelement/reset/index.html | 70 + files/uk/web/api/htmlimageelement/image/index.html | 117 + files/uk/web/api/htmlimageelement/index.html | 401 ++++ files/uk/web/api/index.html | 26 + .../web/api/intersection_observer_api/index.html | 610 ++++++ .../web/api/mediaquerylist/addlistener/index.html | 82 + files/uk/web/api/mediaquerylist/index.html | 109 + .../uk/web/api/network_information_api/index.html | 87 + files/uk/web/api/networkinformation/index.html | 88 + files/uk/web/api/node/contains/index.html | 112 + files/uk/web/api/node/index.html | 508 +++++ files/uk/web/api/promiserejectionevent/index.html | 95 + .../api/promiserejectionevent/promise/index.html | 76 + .../promiserejectionevent/index.html | 89 + .../api/promiserejectionevent/reason/index.html | 66 + .../web/api/svganimatedstring/animval/index.html | 44 + files/uk/web/api/svganimatedstring/index.html | 60 + files/uk/web/api/urlsearchparams/index.html | 171 ++ files/uk/web/api/web_workers_api/index.html | 215 ++ files/uk/web/api/webgl_api/index.html | 238 ++ files/uk/web/api/websocket/index.html | 330 +++ files/uk/web/api/window/confirm/index.html | 69 + files/uk/web/api/window/console/index.html | 56 + files/uk/web/api/window/history/index.html | 63 + files/uk/web/api/window/index.html | 460 ++++ files/uk/web/api/window/localstorage/index.html | 147 ++ .../api/window/rejectionhandled_event/index.html | 85 + files/uk/web/api/window/self/index.html | 70 + .../api/window/unhandledrejection_event/index.html | 120 + files/uk/web/api/windoweventhandlers/index.html | 105 + .../onrejectionhandled/index.html | 52 + .../onunhandledrejection/index.html | 56 + .../web/api/windoworworkerglobalscope/index.html | 189 ++ files/uk/web/api/windowtimers/index.html | 125 ++ .../uk/web/api/windowtimers/settimeout/index.html | 428 ++++ files/uk/web/api/xmlhttprequest/index.html | 178 ++ .../index.html" | 188 ++ .../target/index.html" | 134 ++ files/uk/web/css/-moz-orient/index.html | 153 ++ .../uk/web/css/@font-face/font-display/index.html | 87 + files/uk/web/css/@font-face/index.html | 197 ++ files/uk/web/css/@page/bleed/index.html | 83 + files/uk/web/css/@page/index.html | 112 + files/uk/web/css/_colon_active/index.html | 129 ++ files/uk/web/css/_colon_root/index.html | 100 + files/uk/web/css/_doublecolon_before/index.html | 237 ++ files/uk/web/css/_doublecolon_slotted/index.html | 104 + files/uk/web/css/animation-name/index.html | 141 ++ files/uk/web/css/attr()/index.html | 265 +++ files/uk/web/css/backdrop-filter/index.html | 136 ++ files/uk/web/css/css_animations/index.html | 140 ++ .../index.html" | 357 +++ .../index.html" | 90 + .../uk/web/css/css_flexible_box_layout/index.html | 132 ++ .../using_css_flexible_boxes/index.html | 390 ++++ .../basic_concepts_of_grid_layout/index.html | 699 ++++++ files/uk/web/css/css_grid_layout/index.html | 245 +++ .../relationship_of_grid_layout/index.html | 628 ++++++ files/uk/web/css/css_selectors/index.html | 116 + files/uk/web/css/filter/index.html | 1184 ++++++++++ files/uk/web/css/flex-grow/index.html | 194 ++ files/uk/web/css/flex/index.html | 209 ++ files/uk/web/css/font-smooth/index.html | 85 + files/uk/web/css/font-weight/index.html | 271 +++ files/uk/web/css/grid-template-areas/index.html | 181 ++ files/uk/web/css/index.html | 92 + files/uk/web/css/linear-gradient()/index.html | 208 ++ files/uk/web/css/mozilla_extensions/index.html | 680 ++++++ files/uk/web/css/order/index.html | 170 ++ files/uk/web/css/position/index.html | 461 ++++ files/uk/web/css/resize/index.html | 212 ++ files/uk/web/css/z-index/index.html | 134 ++ .../index.html" | 80 + .../index.html" | 188 ++ .../index.html" | 161 ++ .../index.html" | 225 ++ .../index.html" | 80 + .../index.html" | 30 + files/uk/web/events/abort/index.html | 67 + files/uk/web/events/domcontentloaded/index.html | 152 ++ files/uk/web/events/index.html | 2310 ++++++++++++++++++++ files/uk/web/guide/css/getting_started/index.html | 46 + .../css/getting_started/what_is_css/index.html | 113 + .../web/guide/html/content_categories/index.html | 168 ++ files/uk/web/guide/html/html5/index.html | 164 ++ .../index.html" | 337 +++ files/uk/web/guide/index.html | 66 + .../index.html" | 49 + files/uk/web/html/attributes/index.html | 654 ++++++ files/uk/web/html/block-level_elements/index.html | 133 ++ files/uk/web/html/element/input/date/index.html | 510 +++++ .../html/element/input/datetime-local/index.html | 543 +++++ files/uk/web/html/element/input/index.html | 753 +++++++ files/uk/web/html/index.html | 91 + files/uk/web/html/inline_elements/index.html | 79 + .../index.html" | 27 + .../html/index.html" | 169 ++ .../iframe/index.html" | 260 +++ .../index.html" | 96 + .../link/index.html" | 325 +++ .../nav/index.html" | 99 + .../script/index.html" | 243 ++ .../section/index.html" | 173 ++ .../style/index.html" | 201 ++ .../table/index.html" | 371 ++++ .../video/index.html" | 420 ++++ .../index.html" | 145 ++ .../hidden/index.html" | 68 + .../index.html" | 474 ++++ .../itemscope/index.html" | 319 +++ .../lang/index.html" | 90 + .../tabindex/index.html" | 96 + .../index.html" | 46 + files/uk/web/http/basics_of_http/index.html | 51 + .../web/http/basics_of_http/mime_types/index.html | 367 ++++ files/uk/web/http/cors/index.html | 550 +++++ files/uk/web/http/index.html | 100 + files/uk/web/http/methods/get/index.html | 69 + files/uk/web/http/methods/index.html | 75 + files/uk/web/http/methods/post/index.html | 118 + files/uk/web/http/methods/put/index.html | 97 + files/uk/web/http/session/index.html | 171 ++ files/uk/web/http/status/100/index.html | 46 + files/uk/web/http/status/101/index.html | 46 + files/uk/web/http/status/200/index.html | 54 + files/uk/web/http/status/201/index.html | 46 + files/uk/web/http/status/203/index.html | 45 + files/uk/web/http/status/204/index.html | 56 + files/uk/web/http/status/206/index.html | 84 + files/uk/web/http/status/418/index.html | 39 + files/uk/web/http/status/422/index.html | 41 + files/uk/web/http/status/index.html | 171 ++ .../accept-encoding/index.html" | 109 + .../accept-language/index.html" | 94 + .../accept/index.html" | 85 + .../connection/index.html" | 46 + .../content-length/index.html" | 62 + .../content-type/index.html" | 113 + .../etag/index.html" | 98 + .../if-match/index.html" | 86 + .../index.html" | 382 ++++ .../location/index.html" | 78 + .../referer/index.html" | 80 + .../user-agent/index.html" | 133 ++ .../x-forwarded-proto/index.html" | 69 + files/uk/web/index.html | 121 + .../a_re-introduction_to_javascript/index.html | 949 ++++++++ .../uk/web/javascript/about_javascript/index.html | 61 + files/uk/web/javascript/closures/index.html | 471 ++++ files/uk/web/javascript/data_structures/index.html | 305 +++ .../index.html | 330 +++ files/uk/web/javascript/eventloop/index.html | 152 ++ .../control_flow_and_error_handling/index.html | 465 ++++ .../guide/dokladno_pro_objectnu_model/index.html | 760 +++++++ files/uk/web/javascript/guide/functions/index.html | 655 ++++++ .../javascript/guide/grammar_and_types/index.html | 716 ++++++ files/uk/web/javascript/guide/index.html | 131 ++ .../guide/indexed_collections/index.html | 578 +++++ .../web/javascript/guide/introduction/index.html | 147 ++ .../guide/iterators_and_generators/index.html | 214 ++ .../guide/loops_and_iteration/index.html | 355 +++ .../javascript/guide/numbers_and_dates/index.html | 383 ++++ .../guide/regular_expressions/index.html | 635 ++++++ .../web/javascript/guide/using_promises/index.html | 363 +++ .../guide/working_with_objects/index.html | 490 +++++ .../index.html" | 925 ++++++++ files/uk/web/javascript/index.html | 119 + .../inheritance_and_the_prototype_chain/index.html | 306 +++ .../uk/web/javascript/memory_management/index.html | 204 ++ .../javascript/new_in_javascript/1.7/index.html | 38 + .../uk/web/javascript/new_in_javascript/index.html | 73 + .../oglyad_tehnologiy_javascript/index.html | 87 + .../reference/classes/constructor/index.html | 119 + .../reference/classes/extends/index.html | 112 + .../uk/web/javascript/reference/classes/index.html | 418 ++++ .../javascript/reference/classes/static/index.html | 137 ++ .../deprecated_and_obsolete_features/index.html | 293 +++ .../the_legacy_iterator_protocol/index.html | 76 + .../reference/errors/cant_delete/index.html | 59 + .../errors/deprecated_tolocaleformat/index.html | 93 + .../uk/web/javascript/reference/errors/index.html | 31 + .../errors/invalid_for-in_initializer/index.html | 77 + .../reference/errors/json_bad_parse/index.html | 112 + .../errors/more_arguments_needed/index.html | 46 + .../errors/negative_repetition_count/index.html | 48 + .../reference/errors/not_a_constructor/index.html | 91 + .../reference/errors/not_a_function/index.html | 124 ++ .../errors/resulting_string_too_large/index.html | 53 + .../functions/arguments/@@iterator/index.html | 77 + .../functions/arguments/caller/index.html | 55 + .../reference/functions/arguments/index.html | 282 +++ .../functions/arguments/length/index.html | 85 + .../javascript/reference/functions/get/index.html | 175 ++ .../web/javascript/reference/functions/index.html | 605 +++++ .../functions/method_definitions/index.html | 219 ++ .../javascript/reference/functions/set/index.html | 152 ++ .../index.html" | 211 ++ .../index.html" | 362 +++ .../global_objects/array/@@iterator/index.html | 116 + .../global_objects/array/@@species/index.html | 72 + .../global_objects/array/@@unscopables/index.html | 76 + .../global_objects/array/array/index.html | 87 + .../global_objects/array/concat/index.html | 168 ++ .../global_objects/array/copywithin/index.html | 188 ++ .../global_objects/array/entries/index.html | 96 + .../global_objects/array/every/index.html | 195 ++ .../reference/global_objects/array/fill/index.html | 155 ++ .../global_objects/array/filter/index.html | 235 ++ .../reference/global_objects/array/find/index.html | 233 ++ .../global_objects/array/findindex/index.html | 187 ++ .../reference/global_objects/array/flat/index.html | 150 ++ .../global_objects/array/flatmap/index.html | 152 ++ .../global_objects/array/foreach/index.html | 290 +++ .../reference/global_objects/array/from/index.html | 242 ++ .../global_objects/array/includes/index.html | 135 ++ .../reference/global_objects/array/index.html | 431 ++++ .../global_objects/array/indexof/index.html | 260 +++ .../global_objects/array/isarray/index.html | 131 ++ .../reference/global_objects/array/join/index.html | 114 + .../reference/global_objects/array/keys/index.html | 82 + .../global_objects/array/lastindexof/index.html | 166 ++ .../global_objects/array/length/index.html | 139 ++ .../reference/global_objects/array/map/index.html | 349 +++ .../global_objects/array/observe/index.html | 89 + .../reference/global_objects/array/of/index.html | 100 + .../reference/global_objects/array/pop/index.html | 118 + .../global_objects/array/prototype/index.html | 185 ++ .../reference/global_objects/array/push/index.html | 136 ++ .../global_objects/array/reduce/index.html | 578 +++++ .../global_objects/array/reduceright/index.html | 364 +++ .../global_objects/array/reverse/index.html | 89 + .../global_objects/array/shift/index.html | 141 ++ .../global_objects/array/slice/index.html | 242 ++ .../reference/global_objects/array/some/index.html | 206 ++ .../reference/global_objects/array/sort/index.html | 274 +++ .../global_objects/array/splice/index.html | 162 ++ .../global_objects/array/tolocalestring/index.html | 182 ++ .../global_objects/array/tosource/index.html | 72 + .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unobserve/index.html | 89 + .../global_objects/array/unshift/index.html | 123 ++ .../global_objects/array/values/index.html | 93 + .../global_objects/asyncfunction/index.html | 128 ++ .../asyncfunction/prototype/index.html | 59 + .../global_objects/bigint/asintn/index.html | 78 + .../global_objects/bigint/asuintn/index.html | 77 + .../global_objects/bigint/bigint/index.html | 64 + .../reference/global_objects/bigint/index.html | 302 +++ .../bigint/tolocalestring/index.html | 123 ++ .../global_objects/bigint/tostring/index.html | 93 + .../global_objects/bigint/valueof/index.html | 57 + .../global_objects/boolean/boolean/index.html | 75 + .../reference/global_objects/boolean/index.html | 157 ++ .../global_objects/boolean/prototype/index.html | 82 + .../global_objects/boolean/tosource/index.html | 58 + .../global_objects/boolean/tostring/index.html | 99 + .../global_objects/boolean/valueof/index.html | 94 + .../global_objects/date/@@toprimitive/index.html | 73 + .../reference/global_objects/date/date/index.html | 135 ++ .../global_objects/date/getdate/index.html | 64 + .../global_objects/date/getday/index.html | 77 + .../global_objects/date/getfullyear/index.html | 68 + .../global_objects/date/gethours/index.html | 65 + .../global_objects/date/getmilliseconds/index.html | 61 + .../global_objects/date/getminutes/index.html | 61 + .../global_objects/date/getmonth/index.html | 74 + .../global_objects/date/getseconds/index.html | 63 + .../global_objects/date/gettime/index.html | 109 + .../date/gettimezoneoffset/index.html | 97 + .../global_objects/date/getutcdate/index.html | 60 + .../global_objects/date/getutcday/index.html | 62 + .../global_objects/date/getutcfullyear/index.html | 65 + .../global_objects/date/getutchours/index.html | 61 + .../date/getutcmilliseconds/index.html | 63 + .../global_objects/date/getutcminutes/index.html | 59 + .../global_objects/date/getutcmonth/index.html | 61 + .../global_objects/date/getutcseconds/index.html | 61 + .../global_objects/date/getyear/index.html | 107 + .../reference/global_objects/date/index.html | 269 +++ .../reference/global_objects/date/now/index.html | 86 + .../reference/global_objects/date/parse/index.html | 198 ++ .../global_objects/date/setdate/index.html | 79 + .../global_objects/date/setfullyear/index.html | 77 + .../global_objects/date/sethours/index.html | 82 + .../global_objects/date/setmilliseconds/index.html | 70 + .../global_objects/date/setminutes/index.html | 80 + .../global_objects/date/setmonth/index.html | 83 + .../global_objects/date/setseconds/index.html | 78 + .../global_objects/date/settime/index.html | 71 + .../global_objects/date/setutcdate/index.html | 70 + .../global_objects/date/setutcfullyear/index.html | 76 + .../global_objects/date/setutchours/index.html | 78 + .../date/setutcmilliseconds/index.html | 70 + .../global_objects/date/setutcminutes/index.html | 76 + .../global_objects/date/setutcmonth/index.html | 74 + .../global_objects/date/setutcseconds/index.html | 74 + .../global_objects/date/setyear/index.html | 74 + .../global_objects/date/todatestring/index.html | 81 + .../global_objects/date/togmtstring/index.html | 64 + .../global_objects/date/toisostring/index.html | 93 + .../global_objects/date/tojson/index.html | 69 + .../date/tolocaledatestring/index.html | 154 ++ .../global_objects/date/tolocalestring/index.html | 178 ++ .../date/tolocaletimestring/index.html | 152 ++ .../global_objects/date/tosource/index.html | 49 + .../global_objects/date/tostring/index.html | 110 + .../global_objects/date/totimestring/index.html | 68 + .../global_objects/date/toutcstring/index.html | 109 + .../reference/global_objects/date/utc/index.html | 153 ++ .../global_objects/date/valueof/index.html | 65 + .../global_objects/error/columnnumber/index.html | 44 + .../global_objects/error/error/index.html | 63 + .../global_objects/error/filename/index.html | 47 + .../reference/global_objects/error/index.html | 216 ++ .../global_objects/error/linenumber/index.html | 56 + .../global_objects/error/message/index.html | 57 + .../reference/global_objects/error/name/index.html | 57 + .../global_objects/error/prototype/index.html | 114 + .../global_objects/error/stack/index.html | 125 ++ .../global_objects/error/tosource/index.html | 59 + .../global_objects/error/tostring/index.html | 98 + .../reference/global_objects/eval/index.html | 323 +++ .../reference/global_objects/evalerror/index.html | 98 + .../global_objects/evalerror/prototype/index.html | 89 + .../global_objects/function/apply/index.html | 239 ++ .../global_objects/function/arguments/index.html | 92 + .../global_objects/function/arity/index.html | 31 + .../global_objects/function/bind/index.html | 329 +++ .../global_objects/function/call/index.html | 168 ++ .../global_objects/function/caller/index.html | 82 + .../global_objects/function/displayname/index.html | 80 + .../reference/global_objects/function/index.html | 155 ++ .../global_objects/function/isgenerator/index.html | 56 + .../global_objects/function/length/index.html | 91 + .../global_objects/function/name/index.html | 223 ++ .../global_objects/function/prototype/index.html | 99 + .../global_objects/function/tosource/index.html | 70 + .../global_objects/function/tostring/index.html | 233 ++ .../reference/global_objects/generator/index.html | 138 ++ .../global_objects/generator/next/index.html | 114 + .../global_objects/generator/return/index.html | 101 + .../global_objects/generator/throw/index.html | 100 + .../global_objects/generatorfunction/index.html | 114 + .../generatorfunction/prototype/index.html | 65 + .../reference/global_objects/globalthis/index.html | 87 + .../javascript/reference/global_objects/index.html | 193 ++ .../reference/global_objects/infinity/index.html | 79 + .../global_objects/internalerror/index.html | 83 + .../internalerror/prototype/index.html | 62 + .../reference/global_objects/isfinite/index.html | 88 + .../reference/global_objects/isnan/index.html | 190 ++ .../reference/global_objects/json/index.html | 158 ++ .../reference/global_objects/json/parse/index.html | 133 ++ .../global_objects/json/stringify/index.html | 321 +++ .../reference/global_objects/map/index.html | 201 ++ .../reference/global_objects/math/abs/index.html | 104 + .../reference/global_objects/math/acos/index.html | 110 + .../reference/global_objects/math/acosh/index.html | 91 + .../reference/global_objects/math/asin/index.html | 103 + .../reference/global_objects/math/asinh/index.html | 92 + .../reference/global_objects/math/atan/index.html | 106 + .../reference/global_objects/math/atan2/index.html | 119 + .../reference/global_objects/math/atanh/index.html | 92 + .../reference/global_objects/math/cbrt/index.html | 100 + .../reference/global_objects/math/ceil/index.html | 174 ++ .../reference/global_objects/math/clz32/index.html | 113 + .../reference/global_objects/math/cos/index.html | 83 + .../reference/global_objects/math/cosh/index.html | 93 + .../reference/global_objects/math/e/index.html | 85 + .../reference/global_objects/math/exp/index.html | 76 + .../reference/global_objects/math/expm1/index.html | 85 + .../reference/global_objects/math/floor/index.html | 164 ++ .../global_objects/math/fround/index.html | 114 + .../reference/global_objects/math/hypot/index.html | 119 + .../reference/global_objects/math/imul/index.html | 97 + .../reference/global_objects/math/index.html | 153 ++ .../reference/global_objects/math/ln10/index.html | 66 + .../reference/global_objects/math/ln2/index.html | 70 + .../reference/global_objects/math/log/index.html | 113 + .../reference/global_objects/math/log10/index.html | 92 + .../global_objects/math/log10e/index.html | 66 + .../reference/global_objects/math/log1p/index.html | 94 + .../reference/global_objects/math/log2/index.html | 102 + .../reference/global_objects/math/log2e/index.html | 66 + .../reference/global_objects/math/max/index.html | 102 + .../reference/global_objects/math/min/index.html | 98 + .../reference/global_objects/math/pi/index.html | 64 + .../reference/global_objects/math/pow/index.html | 117 + .../global_objects/math/random/index.html | 113 + .../reference/global_objects/math/sign/index.html | 116 + .../reference/global_objects/math/sin/index.html | 78 + .../reference/global_objects/math/sinh/index.html | 93 + .../reference/global_objects/math/sqrt/index.html | 81 + .../global_objects/math/sqrt1_2/index.html | 65 + .../reference/global_objects/math/sqrt2/index.html | 65 + .../reference/global_objects/math/tan/index.html | 83 + .../reference/global_objects/math/tanh/index.html | 85 + .../reference/global_objects/math/trunc/index.html | 128 ++ .../index.html" | 194 ++ .../reference/global_objects/nan/index.html | 91 + .../reference/global_objects/null/index.html | 93 + .../object/__definegetter__/index.html | 101 + .../object/__definesetter__/index.html | 116 + .../object/__lookupgetter__/index.html | 89 + .../object/__lookupsetter__/index.html | 89 + .../global_objects/object/assign/index.html | 273 +++ .../global_objects/object/constructor/index.html | 237 ++ .../global_objects/object/count/index.html | 44 + .../global_objects/object/create/index.html | 406 ++++ .../object/defineproperties/index.html | 198 ++ .../object/defineproperty/index.html | 501 +++++ .../global_objects/object/entries/index.html | 157 ++ .../global_objects/object/eval/index.html | 46 + .../global_objects/object/freeze/index.html | 256 +++ .../global_objects/object/fromentries/index.html | 112 + .../global_objects/object/getnotifier/index.html | 52 + .../object/getownpropertydescriptor/index.html | 159 ++ .../object/getownpropertydescriptors/index.html | 118 + .../object/getownpropertynames/index.html | 175 ++ .../object/getownpropertysymbols/index.html | 91 + .../object/getprototypeof/index.html | 98 + .../object/hasownproperty/index.html | 158 ++ .../reference/global_objects/object/index.html | 267 +++ .../reference/global_objects/object/is/index.html | 128 ++ .../global_objects/object/isextensible/index.html | 112 + .../global_objects/object/isfrozen/index.html | 178 ++ .../global_objects/object/isprototypeof/index.html | 125 ++ .../global_objects/object/issealed/index.html | 139 ++ .../global_objects/object/keys/index.html | 171 ++ .../global_objects/object/nosuchmethod/index.html | 166 ++ .../global_objects/object/object/index.html | 84 + .../global_objects/object/observe/index.html | 153 ++ .../global_objects/object/parent/index.html | 41 + .../object/preventextensions/index.html | 139 ++ .../object/propertyisenumerable/index.html | 149 ++ .../global_objects/object/proto/index.html | 127 ++ .../global_objects/object/seal/index.html | 151 ++ .../object/setprototypeof/index.html | 220 ++ .../object/tolocalestring/index.html | 111 + .../global_objects/object/tosource/index.html | 132 ++ .../global_objects/object/tostring/index.html | 148 ++ .../global_objects/object/unobserve/index.html | 102 + .../global_objects/object/unwatch/index.html | 71 + .../global_objects/object/valueof/index.html | 115 + .../global_objects/object/values/index.html | 104 + .../global_objects/object/watch/index.html | 153 ++ .../reference/global_objects/parsefloat/index.html | 111 + .../reference/global_objects/parseint/index.html | 215 ++ .../global_objects/promise/all/index.html | 232 ++ .../global_objects/promise/allsettled/index.html | 67 + .../global_objects/promise/any/index.html | 86 + .../global_objects/promise/catch/index.html | 189 ++ .../global_objects/promise/finally/index.html | 103 + .../reference/global_objects/promise/index.html | 232 ++ .../global_objects/promise/promise/index.html | 77 + .../global_objects/promise/prototype/index.html | 69 + .../global_objects/promise/race/index.html | 177 ++ .../global_objects/promise/resolve/index.html | 137 ++ .../global_objects/promise/then/index.html | 297 +++ .../index.html" | 73 + .../reference/global_objects/proxy/index.html | 399 ++++ .../reference/global_objects/rangeerror/index.html | 141 ++ .../global_objects/rangeerror/prototype/index.html | 89 + .../global_objects/referenceerror/index.html | 108 + .../referenceerror/prototype/index.html | 90 + .../reference/global_objects/reflect/index.html | 82 + .../global_objects/regexp/exec/index.html | 227 ++ .../reference/global_objects/regexp/index.html | 699 ++++++ .../global_objects/regexp/source/index.html | 170 ++ .../global_objects/regexp/test/index.html | 151 ++ .../reference/global_objects/set/index.html | 242 ++ .../global_objects/string/@@iterator/index.html | 78 + .../global_objects/string/anchor/index.html | 83 + .../reference/global_objects/string/big/index.html | 73 + .../global_objects/string/blink/index.html | 70 + .../global_objects/string/bold/index.html | 66 + .../global_objects/string/charat/index.html | 316 +++ .../global_objects/string/charcodeat/index.html | 161 ++ .../global_objects/string/codepointat/index.html | 142 ++ .../global_objects/string/concat/index.html | 89 + .../global_objects/string/endswith/index.html | 90 + .../global_objects/string/fixed/index.html | 62 + .../global_objects/string/fontcolor/index.html | 81 + .../global_objects/string/fontsize/index.html | 80 + .../global_objects/string/fromcharcode/index.html | 109 + .../global_objects/string/fromcodepoint/index.html | 171 ++ .../global_objects/string/includes/index.html | 125 ++ .../reference/global_objects/string/index.html | 374 ++++ .../global_objects/string/indexof/index.html | 154 ++ .../global_objects/string/italics/index.html | 65 + .../global_objects/string/lastindexof/index.html | 107 + .../global_objects/string/length/index.html | 105 + .../global_objects/string/link/index.html | 72 + .../global_objects/string/localecompare/index.html | 173 ++ .../global_objects/string/match/index.html | 194 ++ .../global_objects/string/matchall/index.html | 143 ++ .../global_objects/string/normalize/index.html | 226 ++ .../global_objects/string/padend/index.html | 66 + .../global_objects/string/padstart/index.html | 84 + .../global_objects/string/quote/index.html | 77 + .../reference/global_objects/string/raw/index.html | 117 + .../global_objects/string/repeat/index.html | 119 + .../global_objects/string/replace/index.html | 240 ++ .../global_objects/string/replaceall/index.html | 169 ++ .../global_objects/string/search/index.html | 107 + .../global_objects/string/slice/index.html | 116 + .../global_objects/string/small/index.html | 70 + .../global_objects/string/split/index.html | 220 ++ .../global_objects/string/startswith/index.html | 96 + .../global_objects/string/strike/index.html | 67 + .../global_objects/string/string/index.html | 64 + .../reference/global_objects/string/sub/index.html | 68 + .../global_objects/string/substr/index.html | 118 + .../global_objects/string/substring/index.html | 181 ++ .../reference/global_objects/string/sup/index.html | 66 + .../string/tolocalelowercase/index.html | 106 + .../string/tolocaleuppercase/index.html | 107 + .../global_objects/string/tolowercase/index.html | 74 + .../global_objects/string/tosource/index.html | 56 + .../global_objects/string/tostring/index.html | 65 + .../global_objects/string/touppercase/index.html | 88 + .../global_objects/string/trim/index.html | 84 + .../global_objects/string/trimend/index.html | 80 + .../global_objects/string/trimstart/index.html | 115 + .../global_objects/string/valueof/index.html | 64 + .../global_objects/symbol/asynciterator/index.html | 86 + .../global_objects/symbol/description/index.html | 67 + .../global_objects/symbol/hasinstance/index.html | 81 + .../reference/global_objects/symbol/index.html | 466 ++++ .../symbol/isconcatspreadable/index.html | 99 + .../global_objects/symbol/iterator/index.html | 116 + .../global_objects/symbol/match/index.html | 71 + .../global_objects/symbol/matchall/index.html | 78 + .../global_objects/symbol/replace/index.html | 66 + .../global_objects/symbol/search/index.html | 66 + .../global_objects/symbol/species/index.html | 69 + .../global_objects/symbol/split/index.html | 66 + .../global_objects/symbol/symbol/index.html | 83 + .../global_objects/symbol/toprimitive/index.html | 75 + .../global_objects/symbol/tostringtag/index.html | 99 + .../global_objects/symbol/unscopables/index.html | 89 + .../global_objects/syntaxerror/index.html | 115 + .../syntaxerror/prototype/index.html | 88 + .../reference/global_objects/typeerror/index.html | 118 + .../global_objects/typeerror/prototype/index.html | 87 + .../reference/global_objects/undefined/index.html | 140 ++ .../reference/global_objects/uneval/index.html | 68 + .../reference/global_objects/urierror/index.html | 116 + .../global_objects/urierror/prototype/index.html | 88 + .../epsilon/index.html" | 67 + .../index.html" | 186 ++ .../isfinite/index.html" | 86 + .../isinteger/index.html" | 94 + .../isnan/index.html" | 100 + .../issafeinteger/index.html" | 95 + .../max_safe_integer/index.html" | 78 + .../max_value/index.html" | 64 + .../min_safe_integer/index.html" | 62 + .../min_value/index.html" | 66 + .../nan/index.html" | 59 + .../negative_infinity/index.html" | 82 + .../number/index.html" | 63 + .../parsefloat/index.html" | 88 + .../parseint/index.html" | 83 + .../positive_infinity/index.html" | 82 + .../prototype/index.html" | 89 + .../toexponential/index.html" | 89 + .../tofixed/index.html" | 95 + .../tolocalestring/index.html" | 154 ++ .../toprecision/index.html" | 88 + .../tosource/index.html" | 54 + .../tostring/index.html" | 97 + .../valueof/index.html" | 67 + files/uk/web/javascript/reference/index.html | 50 + .../reference/lexical_grammar/index.html | 673 ++++++ .../reference/operators/addition/index.html | 81 + .../operators/addition_assignment/index.html | 77 + .../operators/arithmetic_operators/index.html | 313 +++ .../operators/array_comprehensions/index.html | 198 ++ .../reference/operators/assignment/index.html | 61 + .../reference/operators/async_function/index.html | 115 + .../reference/operators/await/index.html | 126 ++ .../reference/operators/bitwise_and/index.html | 111 + .../operators/bitwise_and_assignment/index.html | 60 + .../reference/operators/bitwise_not/index.html | 99 + .../operators/bitwise_operators/index.html | 559 +++++ .../reference/operators/bitwise_or/index.html | 113 + .../operators/bitwise_or_assignment/index.html | 61 + .../reference/operators/bitwise_xor/index.html | 113 + .../operators/bitwise_xor_assignment/index.html | 61 + .../reference/operators/class/index.html | 122 ++ .../reference/operators/comma_operator/index.html | 90 + .../operators/conditional_operator/index.html | 109 + .../reference/operators/decrement/index.html | 82 + .../reference/operators/delete/index.html | 298 +++ .../reference/operators/division/index.html | 75 + .../operators/division_assignment/index.html | 61 + .../reference/operators/equality/index.html | 125 ++ .../reference/operators/exponentiation/index.html | 102 + .../operators/exponentiation_assignment/index.html | 60 + .../operators/expression_closures/index.html | 78 + .../reference/operators/function/index.html | 154 ++ .../reference/operators/function_star_/index.html | 90 + .../operators/generator_comprehensions/index.html | 174 ++ .../reference/operators/greater_than/index.html | 114 + .../operators/greater_than_or_equal/index.html | 99 + .../reference/operators/grouping/index.html | 90 + .../javascript/reference/operators/in/index.html | 150 ++ .../reference/operators/increment/index.html | 80 + .../web/javascript/reference/operators/index.html | 273 +++ .../reference/operators/inequality/index.html | 97 + .../reference/operators/instanceof/index.html | 186 ++ .../reference/operators/left_shift/index.html | 73 + .../operators/left_shift_assignment/index.html | 60 + .../reference/operators/less_than/index.html | 99 + .../operators/less_than_or_equal/index.html | 101 + .../reference/operators/logical_and/index.html | 142 ++ .../reference/operators/logical_not/index.html | 105 + .../operators/logical_operators/index.html | 252 +++ .../reference/operators/logical_or/index.html | 151 ++ .../reference/operators/multiplication/index.html | 73 + .../operators/multiplication_assignment/index.html | 60 + .../reference/operators/new.target/index.html | 97 + .../javascript/reference/operators/new/index.html | 197 ++ .../nullish_coalescing_operator/index.html | 166 ++ .../operators/operator_precedence/index.html | 332 +++ .../operators/optional_chaining/index.html | 194 ++ .../operators/pipeline_operator/index.html | 87 + .../operators/property_accessors/index.html | 157 ++ .../reference/operators/remainder/index.html | 77 + .../operators/remainder_assignment/index.html | 61 + .../reference/operators/right_shift/index.html | 74 + .../operators/right_shift_assignment/index.html | 60 + .../reference/operators/spread_syntax/index.html | 253 +++ .../reference/operators/strict_equality/index.html | 105 + .../operators/strict_inequality/index.html | 99 + .../reference/operators/subtraction/index.html | 67 + .../operators/subtraction_assignment/index.html | 60 + .../reference/operators/super/index.html | 184 ++ .../javascript/reference/operators/this/index.html | 408 ++++ .../reference/operators/typeof/index.html | 278 +++ .../reference/operators/unary_negation/index.html | 77 + .../reference/operators/unary_plus/index.html | 78 + .../operators/unsigned_right_shift/index.html | 74 + .../unsigned_right_shift_assignment/index.html | 60 + .../javascript/reference/operators/void/index.html | 123 ++ .../reference/operators/yield/index.html | 121 + .../reference/operators/yield_star_/index.html | 162 ++ .../index.html" | 453 ++++ .../index.html" | 282 +++ .../index.html" | 244 +++ .../index.html" | 418 ++++ .../index.html" | 296 +++ .../reference/statements/async_function/index.html | 272 +++ .../reference/statements/block/index.html | 132 ++ .../reference/statements/break/index.html | 151 ++ .../reference/statements/class/index.html | 119 + .../reference/statements/const/index.html | 232 ++ .../reference/statements/continue/index.html | 164 ++ .../reference/statements/debugger/index.html | 78 + .../reference/statements/default/index.html | 117 + .../reference/statements/do...while/index.html | 101 + .../reference/statements/empty/index.html | 105 + .../reference/statements/export/index.html | 205 ++ .../reference/statements/for-await...of/index.html | 253 +++ .../reference/statements/for...in/index.html | 149 ++ .../reference/statements/for...of/index.html | 319 +++ .../javascript/reference/statements/for/index.html | 165 ++ .../reference/statements/function/index.html | 179 ++ .../reference/statements/function_star_/index.html | 268 +++ .../reference/statements/if...else/index.html | 173 ++ .../web/javascript/reference/statements/index.html | 130 ++ .../reference/statements/label/index.html | 182 ++ .../javascript/reference/statements/let/index.html | 272 +++ .../reference/statements/return/index.html | 159 ++ .../reference/statements/switch/index.html | 295 +++ .../reference/statements/throw/index.html | 198 ++ .../reference/statements/try...catch/index.html | 319 +++ .../javascript/reference/statements/var/index.html | 226 ++ .../reference/statements/while/index.html | 104 + .../reference/statements/with/index.html | 107 + .../javascript/reference/strict_mode/index.html | 364 +++ .../reference/template_literals/index.html | 259 +++ .../reference/trailing_commas/index.html | 171 ++ .../index.html" | 352 +++ .../index.html" | 494 +++++ files/uk/web/progressive_web_apps/index.html | 95 + files/uk/web/reference/index.html | 29 + files/uk/web/xml/index.html | 17 + files/uk/web/xml/xml_introduction/index.html | 136 ++ files/uk/web/xslt/index.html | 54 + .../index.html" | 87 + .../index.html" | 184 ++ 726 files changed, 114941 insertions(+) create mode 100644 files/uk/web/accessibility/index.html create mode 100644 files/uk/web/accessibility/understanding_wcag/index.html create mode 100644 files/uk/web/accessibility/understanding_wcag/keyboard/index.html create mode 100644 files/uk/web/api/ambient_light_events/index.html create mode 100644 files/uk/web/api/angle_instanced_arrays/index.html create mode 100644 "files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" create mode 100644 files/uk/web/api/blob/index.html create mode 100644 files/uk/web/api/canvas_api/index.html create mode 100644 files/uk/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/uk/web/api/canvas_api/tutorial/index.html create mode 100644 "files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" create mode 100644 files/uk/web/api/console/dir/index.html create mode 100644 files/uk/web/api/console/index.html create mode 100644 files/uk/web/api/console/log/index.html create mode 100644 files/uk/web/api/customevent/index.html create mode 100644 files/uk/web/api/customevent/initcustomevent/index.html create mode 100644 files/uk/web/api/document/index.html create mode 100644 files/uk/web/api/document/visibilitychange_event/index.html create mode 100644 files/uk/web/api/domstring/index.html create mode 100644 files/uk/web/api/element/getclientrects/index.html create mode 100644 files/uk/web/api/element/index.html create mode 100644 files/uk/web/api/globaleventhandlers/index.html create mode 100644 files/uk/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/uk/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/uk/web/api/globaleventhandlers/onmouseover/index.html create mode 100644 files/uk/web/api/headers/index.html create mode 100644 files/uk/web/api/history_api/index.html create mode 100644 files/uk/web/api/html_dom_api/index.html create mode 100644 files/uk/web/api/html_dom_api/microtask_guide/index.html create mode 100644 files/uk/web/api/htmlcanvaselement/index.html create mode 100644 files/uk/web/api/htmlelement/index.html create mode 100644 files/uk/web/api/htmlelement/offsettop/index.html create mode 100644 files/uk/web/api/htmlformelement/index.html create mode 100644 files/uk/web/api/htmlformelement/reset/index.html create mode 100644 files/uk/web/api/htmlimageelement/image/index.html create mode 100644 files/uk/web/api/htmlimageelement/index.html create mode 100644 files/uk/web/api/index.html create mode 100644 files/uk/web/api/intersection_observer_api/index.html create mode 100644 files/uk/web/api/mediaquerylist/addlistener/index.html create mode 100644 files/uk/web/api/mediaquerylist/index.html create mode 100644 files/uk/web/api/network_information_api/index.html create mode 100644 files/uk/web/api/networkinformation/index.html create mode 100644 files/uk/web/api/node/contains/index.html create mode 100644 files/uk/web/api/node/index.html create mode 100644 files/uk/web/api/promiserejectionevent/index.html create mode 100644 files/uk/web/api/promiserejectionevent/promise/index.html create mode 100644 files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html create mode 100644 files/uk/web/api/promiserejectionevent/reason/index.html create mode 100644 files/uk/web/api/svganimatedstring/animval/index.html create mode 100644 files/uk/web/api/svganimatedstring/index.html create mode 100644 files/uk/web/api/urlsearchparams/index.html create mode 100644 files/uk/web/api/web_workers_api/index.html create mode 100644 files/uk/web/api/webgl_api/index.html create mode 100644 files/uk/web/api/websocket/index.html create mode 100644 files/uk/web/api/window/confirm/index.html create mode 100644 files/uk/web/api/window/console/index.html create mode 100644 files/uk/web/api/window/history/index.html create mode 100644 files/uk/web/api/window/index.html create mode 100644 files/uk/web/api/window/localstorage/index.html create mode 100644 files/uk/web/api/window/rejectionhandled_event/index.html create mode 100644 files/uk/web/api/window/self/index.html create mode 100644 files/uk/web/api/window/unhandledrejection_event/index.html create mode 100644 files/uk/web/api/windoweventhandlers/index.html create mode 100644 files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html create mode 100644 files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html create mode 100644 files/uk/web/api/windoworworkerglobalscope/index.html create mode 100644 files/uk/web/api/windowtimers/index.html create mode 100644 files/uk/web/api/windowtimers/settimeout/index.html create mode 100644 files/uk/web/api/xmlhttprequest/index.html create mode 100644 "files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" create mode 100644 "files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" create mode 100644 files/uk/web/css/-moz-orient/index.html create mode 100644 files/uk/web/css/@font-face/font-display/index.html create mode 100644 files/uk/web/css/@font-face/index.html create mode 100644 files/uk/web/css/@page/bleed/index.html create mode 100644 files/uk/web/css/@page/index.html create mode 100644 files/uk/web/css/_colon_active/index.html create mode 100644 files/uk/web/css/_colon_root/index.html create mode 100644 files/uk/web/css/_doublecolon_before/index.html create mode 100644 files/uk/web/css/_doublecolon_slotted/index.html create mode 100644 files/uk/web/css/animation-name/index.html create mode 100644 files/uk/web/css/attr()/index.html create mode 100644 files/uk/web/css/backdrop-filter/index.html create mode 100644 files/uk/web/css/css_animations/index.html create mode 100644 "files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" create mode 100644 "files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" create mode 100644 files/uk/web/css/css_flexible_box_layout/index.html create mode 100644 files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/uk/web/css/css_grid_layout/index.html create mode 100644 files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/uk/web/css/css_selectors/index.html create mode 100644 files/uk/web/css/filter/index.html create mode 100644 files/uk/web/css/flex-grow/index.html create mode 100644 files/uk/web/css/flex/index.html create mode 100644 files/uk/web/css/font-smooth/index.html create mode 100644 files/uk/web/css/font-weight/index.html create mode 100644 files/uk/web/css/grid-template-areas/index.html create mode 100644 files/uk/web/css/index.html create mode 100644 files/uk/web/css/linear-gradient()/index.html create mode 100644 files/uk/web/css/mozilla_extensions/index.html create mode 100644 files/uk/web/css/order/index.html create mode 100644 files/uk/web/css/position/index.html create mode 100644 files/uk/web/css/resize/index.html create mode 100644 files/uk/web/css/z-index/index.html create mode 100644 "files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" create mode 100644 "files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" create mode 100644 "files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" create mode 100644 "files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" create mode 100644 "files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" create mode 100644 files/uk/web/events/abort/index.html create mode 100644 files/uk/web/events/domcontentloaded/index.html create mode 100644 files/uk/web/events/index.html create mode 100644 files/uk/web/guide/css/getting_started/index.html create mode 100644 files/uk/web/guide/css/getting_started/what_is_css/index.html create mode 100644 files/uk/web/guide/html/content_categories/index.html create mode 100644 files/uk/web/guide/html/html5/index.html create mode 100644 "files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" create mode 100644 files/uk/web/guide/index.html create mode 100644 "files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" create mode 100644 files/uk/web/html/attributes/index.html create mode 100644 files/uk/web/html/block-level_elements/index.html create mode 100644 files/uk/web/html/element/input/date/index.html create mode 100644 files/uk/web/html/element/input/datetime-local/index.html create mode 100644 files/uk/web/html/element/input/index.html create mode 100644 files/uk/web/html/index.html create mode 100644 files/uk/web/html/inline_elements/index.html create mode 100644 "files/uk/web/html/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/html/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/iframe/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/link/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/nav/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/script/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/section/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/style/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/table/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/video/index.html" create mode 100644 "files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\276\320\272/index.html" create mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/hidden/index.html" create mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/index.html" create mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/itemscope/index.html" create mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/lang/index.html" create mode 100644 "files/uk/web/html/\320\267\320\260\320\263\320\260\320\273\321\214\320\275\321\226_\320\260\321\202\321\200\320\270\320\261\321\203\321\202\320\270/tabindex/index.html" create mode 100644 "files/uk/web/html/\321\200\320\265\320\266\320\270\320\274_\321\201\321\203\320\274\321\226\321\201\320\275\320\276\321\201\321\202\321\226_\320\271_\321\201\321\202\320\260\320\275\320\264\320\260\321\200\321\202\320\275\320\270\320\271_\321\200\320\265\320\266\320\270\320\274/index.html" create mode 100644 files/uk/web/http/basics_of_http/index.html create mode 100644 files/uk/web/http/basics_of_http/mime_types/index.html create mode 100644 files/uk/web/http/cors/index.html create mode 100644 files/uk/web/http/index.html create mode 100644 files/uk/web/http/methods/get/index.html create mode 100644 files/uk/web/http/methods/index.html create mode 100644 files/uk/web/http/methods/post/index.html create mode 100644 files/uk/web/http/methods/put/index.html create mode 100644 files/uk/web/http/session/index.html create mode 100644 files/uk/web/http/status/100/index.html create mode 100644 files/uk/web/http/status/101/index.html create mode 100644 files/uk/web/http/status/200/index.html create mode 100644 files/uk/web/http/status/201/index.html create mode 100644 files/uk/web/http/status/203/index.html create mode 100644 files/uk/web/http/status/204/index.html create mode 100644 files/uk/web/http/status/206/index.html create mode 100644 files/uk/web/http/status/418/index.html create mode 100644 files/uk/web/http/status/422/index.html create mode 100644 files/uk/web/http/status/index.html create mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/accept-encoding/index.html" create mode 100644 "files/uk/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/uk/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/uk/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/uk/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/uk/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/uk/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/uk/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/uk/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/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/location/index.html" create mode 100644 "files/uk/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/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/user-agent/index.html" create mode 100644 "files/uk/web/http/\320\267\320\260\320\263\320\276\320\273\320\276\320\262\320\272\320\270/x-forwarded-proto/index.html" create mode 100644 files/uk/web/index.html create mode 100644 files/uk/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/uk/web/javascript/about_javascript/index.html create mode 100644 files/uk/web/javascript/closures/index.html create mode 100644 files/uk/web/javascript/data_structures/index.html create mode 100644 files/uk/web/javascript/enumerability_and_ownership_of_properties/index.html create mode 100644 files/uk/web/javascript/eventloop/index.html create mode 100644 files/uk/web/javascript/guide/control_flow_and_error_handling/index.html create mode 100644 files/uk/web/javascript/guide/dokladno_pro_objectnu_model/index.html create mode 100644 files/uk/web/javascript/guide/functions/index.html create mode 100644 files/uk/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/uk/web/javascript/guide/index.html create mode 100644 files/uk/web/javascript/guide/indexed_collections/index.html create mode 100644 files/uk/web/javascript/guide/introduction/index.html create mode 100644 files/uk/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/uk/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/uk/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/uk/web/javascript/guide/regular_expressions/index.html create mode 100644 files/uk/web/javascript/guide/using_promises/index.html create mode 100644 files/uk/web/javascript/guide/working_with_objects/index.html create mode 100644 "files/uk/web/javascript/guide/\320\262\320\270\321\200\320\260\320\267\320\270_\321\202\320\260_\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270/index.html" create mode 100644 files/uk/web/javascript/index.html create mode 100644 files/uk/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/uk/web/javascript/memory_management/index.html create mode 100644 files/uk/web/javascript/new_in_javascript/1.7/index.html create mode 100644 files/uk/web/javascript/new_in_javascript/index.html create mode 100644 files/uk/web/javascript/oglyad_tehnologiy_javascript/index.html create mode 100644 files/uk/web/javascript/reference/classes/constructor/index.html create mode 100644 files/uk/web/javascript/reference/classes/extends/index.html create mode 100644 files/uk/web/javascript/reference/classes/index.html create mode 100644 files/uk/web/javascript/reference/classes/static/index.html create mode 100644 files/uk/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/uk/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html create mode 100644 files/uk/web/javascript/reference/errors/cant_delete/index.html create mode 100644 files/uk/web/javascript/reference/errors/deprecated_tolocaleformat/index.html create mode 100644 files/uk/web/javascript/reference/errors/index.html create mode 100644 files/uk/web/javascript/reference/errors/invalid_for-in_initializer/index.html create mode 100644 files/uk/web/javascript/reference/errors/json_bad_parse/index.html create mode 100644 files/uk/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/uk/web/javascript/reference/errors/negative_repetition_count/index.html create mode 100644 files/uk/web/javascript/reference/errors/not_a_constructor/index.html create mode 100644 files/uk/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/uk/web/javascript/reference/errors/resulting_string_too_large/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/caller/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/index.html create mode 100644 files/uk/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/uk/web/javascript/reference/functions/get/index.html create mode 100644 files/uk/web/javascript/reference/functions/index.html create mode 100644 files/uk/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/uk/web/javascript/reference/functions/set/index.html create mode 100644 "files/uk/web/javascript/reference/functions/\321\200\320\265\321\210\321\202\320\260_\320\277\320\260\321\200\320\260\320\274\320\265\321\202\321\200\321\226\320\262/index.html" create mode 100644 "files/uk/web/javascript/reference/functions/\321\201\321\202\321\200\321\226\320\273\320\272\320\276\320\262\321\226_\321\204\321\203\320\275\320\272\321\206\321\226\321\227/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/array/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/unobserve/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/asintn/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/asuintn/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/bigint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/bigint/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/boolean/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/@@toprimitive/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/date/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/error/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/isgenerator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/generatorfunction/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/json/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/map/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 "files/uk/web/javascript/reference/global_objects/math/\320\267\320\260\320\276\320\272\321\200\321\203\320\263\320\265\320\273\320\275\320\275\321\217/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/null/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__definesetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__lookupgetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/__lookupsetter__/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/count/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/eval/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getnotifier/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/nosuchmethod/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/object/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/parent/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/unobserve/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/unwatch/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/object/watch/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/allsettled/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/any/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/promise/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 "files/uk/web/javascript/reference/global_objects/promise/\320\262\321\226\320\264\321\205\320\270\320\273\320\265\320\275\320\276/index.html" create mode 100644 files/uk/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/referenceerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/source/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/set/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/@@iterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/codepointat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/matchall/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/padend/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/quote/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/replaceall/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/strike/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/string/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/trimend/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/trimstart/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/asynciterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/description/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/hasinstance/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/match/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/matchall/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/replace/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/search/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/species/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/split/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/symbol/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/toprimitive/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/tostringtag/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/symbol/unscopables/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/syntaxerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/typeerror/prototype/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/uk/web/javascript/reference/global_objects/urierror/prototype/index.html create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/epsilon/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isfinite/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isinteger/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/isnan/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/issafeinteger/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_safe_integer/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/max_value/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_safe_integer/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/min_value/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/nan/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/negative_infinity/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/number/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parsefloat/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/parseint/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/positive_infinity/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/prototype/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toexponential/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tofixed/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tolocalestring/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/toprecision/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tosource/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/tostring/index.html" create mode 100644 "files/uk/web/javascript/reference/global_objects/\321\207\320\270\321\201\320\273\320\276/valueof/index.html" create mode 100644 files/uk/web/javascript/reference/index.html create mode 100644 files/uk/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/uk/web/javascript/reference/operators/addition/index.html create mode 100644 files/uk/web/javascript/reference/operators/addition_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/arithmetic_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/array_comprehensions/index.html create mode 100644 files/uk/web/javascript/reference/operators/assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/async_function/index.html create mode 100644 files/uk/web/javascript/reference/operators/await/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_and/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_and_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_not/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_or/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_or_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_xor/index.html create mode 100644 files/uk/web/javascript/reference/operators/bitwise_xor_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/class/index.html create mode 100644 files/uk/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/decrement/index.html create mode 100644 files/uk/web/javascript/reference/operators/delete/index.html create mode 100644 files/uk/web/javascript/reference/operators/division/index.html create mode 100644 files/uk/web/javascript/reference/operators/division_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/equality/index.html create mode 100644 files/uk/web/javascript/reference/operators/exponentiation/index.html create mode 100644 files/uk/web/javascript/reference/operators/exponentiation_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/uk/web/javascript/reference/operators/function/index.html create mode 100644 files/uk/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/uk/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/uk/web/javascript/reference/operators/greater_than/index.html create mode 100644 files/uk/web/javascript/reference/operators/greater_than_or_equal/index.html create mode 100644 files/uk/web/javascript/reference/operators/grouping/index.html create mode 100644 files/uk/web/javascript/reference/operators/in/index.html create mode 100644 files/uk/web/javascript/reference/operators/increment/index.html create mode 100644 files/uk/web/javascript/reference/operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/inequality/index.html create mode 100644 files/uk/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/uk/web/javascript/reference/operators/left_shift/index.html create mode 100644 files/uk/web/javascript/reference/operators/left_shift_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/less_than/index.html create mode 100644 files/uk/web/javascript/reference/operators/less_than_or_equal/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_and/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_not/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_operators/index.html create mode 100644 files/uk/web/javascript/reference/operators/logical_or/index.html create mode 100644 files/uk/web/javascript/reference/operators/multiplication/index.html create mode 100644 files/uk/web/javascript/reference/operators/multiplication_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/new.target/index.html create mode 100644 files/uk/web/javascript/reference/operators/new/index.html create mode 100644 files/uk/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/uk/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/uk/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/uk/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/uk/web/javascript/reference/operators/remainder/index.html create mode 100644 files/uk/web/javascript/reference/operators/remainder_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/right_shift/index.html create mode 100644 files/uk/web/javascript/reference/operators/right_shift_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/uk/web/javascript/reference/operators/strict_equality/index.html create mode 100644 files/uk/web/javascript/reference/operators/strict_inequality/index.html create mode 100644 files/uk/web/javascript/reference/operators/subtraction/index.html create mode 100644 files/uk/web/javascript/reference/operators/subtraction_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/super/index.html create mode 100644 files/uk/web/javascript/reference/operators/this/index.html create mode 100644 files/uk/web/javascript/reference/operators/typeof/index.html create mode 100644 files/uk/web/javascript/reference/operators/unary_negation/index.html create mode 100644 files/uk/web/javascript/reference/operators/unary_plus/index.html create mode 100644 files/uk/web/javascript/reference/operators/unsigned_right_shift/index.html create mode 100644 files/uk/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html create mode 100644 files/uk/web/javascript/reference/operators/void/index.html create mode 100644 files/uk/web/javascript/reference/operators/yield/index.html create mode 100644 files/uk/web/javascript/reference/operators/yield_star_/index.html create mode 100644 "files/uk/web/javascript/reference/operators/\320\264\320\265\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\270\320\267\320\260\321\206\321\226\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200_\321\200\320\276\320\267\320\277\320\260\320\272\321\203\320\262\320\260\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\320\276\321\200\321\226\320\262\320\275\321\217\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\320\276\320\277\320\265\321\200\320\260\321\202\320\276\321\200\320\270_\320\277\321\200\320\270\321\201\320\262\320\276\321\224\320\275\320\275\321\217/index.html" create mode 100644 "files/uk/web/javascript/reference/operators/\321\226\320\275\321\226\321\206\321\226\320\260\320\273\321\226\320\267\320\260\321\206\321\226\321\217_\320\276\320\261\342\200\231\321\224\320\272\321\202\321\226\320\262/index.html" create mode 100644 files/uk/web/javascript/reference/statements/async_function/index.html create mode 100644 files/uk/web/javascript/reference/statements/block/index.html create mode 100644 files/uk/web/javascript/reference/statements/break/index.html create mode 100644 files/uk/web/javascript/reference/statements/class/index.html create mode 100644 files/uk/web/javascript/reference/statements/const/index.html create mode 100644 files/uk/web/javascript/reference/statements/continue/index.html create mode 100644 files/uk/web/javascript/reference/statements/debugger/index.html create mode 100644 files/uk/web/javascript/reference/statements/default/index.html create mode 100644 files/uk/web/javascript/reference/statements/do...while/index.html create mode 100644 files/uk/web/javascript/reference/statements/empty/index.html create mode 100644 files/uk/web/javascript/reference/statements/export/index.html create mode 100644 files/uk/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/uk/web/javascript/reference/statements/for...in/index.html create mode 100644 files/uk/web/javascript/reference/statements/for...of/index.html create mode 100644 files/uk/web/javascript/reference/statements/for/index.html create mode 100644 files/uk/web/javascript/reference/statements/function/index.html create mode 100644 files/uk/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/uk/web/javascript/reference/statements/if...else/index.html create mode 100644 files/uk/web/javascript/reference/statements/index.html create mode 100644 files/uk/web/javascript/reference/statements/label/index.html create mode 100644 files/uk/web/javascript/reference/statements/let/index.html create mode 100644 files/uk/web/javascript/reference/statements/return/index.html create mode 100644 files/uk/web/javascript/reference/statements/switch/index.html create mode 100644 files/uk/web/javascript/reference/statements/throw/index.html create mode 100644 files/uk/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/uk/web/javascript/reference/statements/var/index.html create mode 100644 files/uk/web/javascript/reference/statements/while/index.html create mode 100644 files/uk/web/javascript/reference/statements/with/index.html create mode 100644 files/uk/web/javascript/reference/strict_mode/index.html create mode 100644 files/uk/web/javascript/reference/template_literals/index.html create mode 100644 files/uk/web/javascript/reference/trailing_commas/index.html create mode 100644 "files/uk/web/javascript/reference/\320\277\321\200\320\276\321\202\320\276\320\272\320\276\320\273\320\270_\320\277\320\265\321\200\320\265\320\261\320\276\321\200\321\203/index.html" create mode 100644 "files/uk/web/javascript/\320\277\320\265\321\200\320\265\320\262\321\226\321\200\320\272\320\260_\320\275\320\260_\321\200\321\226\320\262\320\275\321\226\321\201\321\202\321\214_\321\202\320\260_\320\276\320\264\320\275\320\260\320\272\320\276\320\262\321\226\321\201\321\202\321\214/index.html" create mode 100644 files/uk/web/progressive_web_apps/index.html create mode 100644 files/uk/web/reference/index.html create mode 100644 files/uk/web/xml/index.html create mode 100644 files/uk/web/xml/xml_introduction/index.html create mode 100644 files/uk/web/xslt/index.html create mode 100644 "files/uk/web/\320\263\321\203\320\264\321\226\320\275\321\226/index.html" create mode 100644 "files/uk/web/\320\277\320\276\321\201\321\226\320\261\320\275\320\270\320\272\320\270/index.html" (limited to 'files/uk/web') diff --git a/files/uk/web/accessibility/index.html b/files/uk/web/accessibility/index.html new file mode 100644 index 0000000000..604d8762ac --- /dev/null +++ b/files/uk/web/accessibility/index.html @@ -0,0 +1,74 @@ +--- +title: Accessibility +slug: Web/Accessibility +tags: + - Accessibility + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility +--- +

Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.

+ +

For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.

+ +

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."W3C - Accessibility

+ +
+
+

Key tutorials

+ +

The MDN Accessibility Learning Area contains modern, up-to-date tutorials covering accessibility essentials:

+ +
+
What is accessibility?
+
This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.
+
HTML: A good basis for accessibility
+
A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.
+
CSS and JavaScript accessibility best practices
+
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.
+
WAI-ARIA basics
+
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
+
Accessible multimedia
+
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
+
Mobile accessibility
+
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+
+ +
+

Other documentation

+ +
+
Understanding the Web Content Accessibility Guidelines
+
+

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 (WCAG 2.0 or just WCAG, for the purposes of this writing).

+
+
Keyboard-navigable JavaScript widgets
+
Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.
+
ARIA
+
A collection of articles to learn how to use ARIA to make your HTML documents more accessible.
+
Assistive technology (AT) development
+
A collection of articles intended for AT developers
+
Mobile accessibility checklist
+
This document provides a concise checklist of accessibility requirements for mobile app developers.
+
Cognitive accessibility
+
When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.
+
Accessibility for seizure disorders
+
Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.
+
+
+ +

View all articles about Accessibility...

+
+
+ +

See also

+ + diff --git a/files/uk/web/accessibility/understanding_wcag/index.html b/files/uk/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/uk/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/uk/web/accessibility/understanding_wcag/keyboard/index.html b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..1383c66354 --- /dev/null +++ b/files/uk/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,94 @@ +--- +title: Клавіатура (Keyboard) +slug: Web/Accessibility/Understanding_WCAG/Keyboard +tags: + - tabIndex + - клікабельні елементи + - фокус клавіатури + - інтерактивні елементи +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +
+ +
Щоб бути у повній мірі доступною, веб-сторінка повинна бути керованою за допомогою однієї лише клавіатури для доступу до неї і управління нею. Це відноситься до користувачів скрінрідерів (екранні зчитувачі), але може також включати і користувачів, у яких виникають проблеми з управлінням вказівним пристроєм, наприклад, мишею або трекболом, або чия миша не працює в даний момент, або які просто вважають за краще використовувати клавіатуру для введення, коли це можливо.
+ +

Елементи у фокусі повинні мати інтерактивну семантику

+ +

Якщо елемент можна сфокусувати за допомогою клавіатури, то він повинен бути інтерактивним; тобто користувач повинен мати можливість щось робити з цим елементом, якусь зміну (наприклад, активізувати посилання або змінити параметр).

+ +
+

Примітка: один важливий виняток для цього правила, якщо елемент має role="document" застосовану до нього, всередині інтерактивний контекст (наприклад, role="application"). У такому випадку фокусування вкладеного документа є єдиним способом повернення допоміжних технологій до неінтерактивного стану (часто званого "browse mode (режим перегляду)").

+
+ +

Більшість інтерактивних елементів фокусуються за замовчуванням; ви можете зробити елемент фокусним, додавши йому значення атрибуту tabindex=0. Однак, ви повинні додавати tabindex тільки в тому випадку, якщо Ви зробили елемент інтерактивним, наприклад, визначили відповідні обробники подій клавіатури.

+ +

Дивіться також

+ + + +

Уникайте використання tabindex атрибута який більше нуля

+ +

tabindex атрибут вказує на те, що елемент фокусується за допомогою клавіатури. Значення нуля вказує на те, що елемент є частиною встановленого за замовчуванням порядку фокусування, який ґрунтується на порядку розташування елементів в HTML-документі. Позитивне значення ставить елемент попереду тих, які знаходяться в порядку за замовчуванням; елементи з позитивними значеннями фокусуються в порядку їх tabindex значення (1, а потім 2, потім 3 і т.д.).

+ +

Це створює плутанину для користувачів лише клавіатури, коли порядок фокусування відрізняється від логічного ладу сторінки. Найкраща стратегія - структурувати HTML-документ так, щоб елементи фокусування перебували в логічному порядку, без потреби змінювати порядок їх tabindex значень.

+ +

Дивіться також

+ + + +

Клікабельні елементи повинні бути такими що фокусуються і мають інтерактивну семантику

+ +

Якщо елемент можна натиснути вказівним пристроєм, наприклад, мишкою, то він також повинен бути таким що фокусується за допомогою клавіатури, і користувач повинен мати можливість щось робити, взаємодіючи з ним.

+ +

Елемент є клікабельним, якщо має onclick встановлений обробник події. Ви можете зробити його таким що фокусує, додавши tabindex=0 значення атрибута для нього. Ви маєте змогу зробити його працездатним за допомогою клавіатури, визначивши onkeydown обробник подій; у більшості випадків дії обробника подій повинні бути однаковими для обох типів подій.

+ +

Дивіться також

+ + + +

Інтерактивні елементи повинні мати можливість бути активовані за допомогою клавіатури

+ +

Якщо користувач може взаємодіяти з елементом за допомогою сенсорного або вказівного пристрою, то цей елемент також повинен підтримувати взаємодію за допомогою клавіатури. Тобто, якщо ви визначили оброблювачі подій для подій дотику або кліку, їх також слід визначити для подій клавіатури. Обробники подій клавіатури повинні забезпечувати таку ж взаємодію, що і обробники сенсорних і клікабельних елементів.

+ +

Дивіться також

+ + + +

Інтерактивні елементи повинні бути такими що фокусуються

+ +

Якщо користувач може взаємодіяти з елементом (наприклад, за допомогою сенсорного або вказівного пристрою), то він також повинен мати можливість фокусування за допомогою клавіатури. Ви можете зробити його такими що фокусується, додавши tabindex=0 значення атрибута до нього. Це додасть елемент в список об'єктів, які можна сфокусувати, натиснувши кнопку Tab, в послідовності таких елементів, яка задана в HTML-документі.

+ +

Дивіться також

+ + + +

Елемент що фокусується повинен змінювати стиль при фокусуванні

+ +

Будь-який елемент, який може отримати фокус клавіатури, повинен мати помітний стиль, який вказує на те що елемент сфокусований. Ви можете зробити це за допомогою :focus CSS псевдоклас.

+ +

Стандартні елементи фокусування, такі як посилання і поля вводу, за замовчуванням задаються браузером в спеціальному стилі, тому, можливо, вам не доведеться ставити стиль фокусування для таких елементів, якщо тільки ви не хочете, щоб стиль фокусування був більш характерним.

+ +

Якщо ви створюєте свої власні елементи фокусування, переконайтеся, що ви також визначаєте стиль фокусування для них.

+ +

Дивіться також

+ + diff --git a/files/uk/web/api/ambient_light_events/index.html b/files/uk/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..3c5d48cc76 --- /dev/null +++ b/files/uk/web/api/ambient_light_events/index.html @@ -0,0 +1,66 @@ +--- +title: Ambient Light Events +slug: Web/API/Ambient_Light_Events +translation_of: Web/API/Ambient_Light_Events +--- +
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
+ +

Ambient Light Events - це зручний спосіб реагувати на будь-які зміни інтенсивності світла, наприклад, змінюючи кольорову контрастність інтерфейсу користувача (UI) або змінюючи експозицію, необхідну для фотографування.

+ +

Опис події

+ +

Коли датчик освітленості пристрою виявляє зміну рівня освітленості, він повідомляє браузер про цю зміну. Браузер, після отримання такого сповіщення, запускає подію {{domxref ("DeviceLightEvent")}}, яка надає інформацію про точну інтенсивність світла (в одиницях люкс).

+ +

Цю подію можна перехопити на рівні об'єкту window за допомогою методу {{domxref ("EventTarget.addEventListener", "addEventListener")}} (використовуючи назву події {{event ("devicelight")}}) або прикріпивши обробку події як властивість {{domxref ("window.ondevicelight")}}.

+ +

Після перехоплення об'єкт події надає доступ до інтенсивності світла, вираженої у {{interwiki ("wikipedia", "lux")}} через властивість {{domxref ("DeviceLightEvent.value")}}.

+ +

Приклад

+ +
if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value < 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('Подія devicelight не підтримується');
+}
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}Initial definition
+ +

Сумісність

+ + + +

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

+ +

Дивіться також

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

ANGLE_instanced_arrays розширення є частиною WebGL API і дозволяє малювати один і той же об'єкт або групи подібних об'єктів кілька разів, якщо вони поділяють однакові вершинні дані, лічильник примітиву і тип.

+ +

Розширення WebGL доступні за допомогою метода{{domxref("WebGLRenderingContext.getExtension()")}} . Для отримання додаткової інформації див Using Extensions в WebGL tutorial.

+ +
+

Доступність: Це розширення доступне лише для {{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 .
+
+ +

Methods

+ +

This extension exposes three new methods.

+ +
+
{{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()")}}
+
+

Behaves identically to {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} except that multiple instances of the set of elements are executed and the instance advances between each set.

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

Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} and {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.

+
+
+ +

Examples

+ +

Enabling the extension:

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

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}{{Spec2('ANGLE_instanced_arrays')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git "a/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" "b/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" new file mode 100644 index 0000000000..6675a3783b --- /dev/null +++ "b/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" @@ -0,0 +1,201 @@ +--- +title: API відображення сторінки +slug: Web/API/API_відображення_сторінки +tags: + - API + - API відображення сторінки + - visibilityState + - visibilitychange + - відображення сторінки + - процеси скритої закладки + - фоновий режим +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +
+ +

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

+ +
+

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

+
+ +

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

+ +

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

+ +

Випадки використання

+ +

Розглянемо декілька прикладів використання API видимості сторінки.

+ + + +

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

+ +
+

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

+
+ +

Політика позиціонування, як сприяння продуктивності фонової сторінки

+ +

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

+ + + +

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

+ + + +

Приклад

+ +

Подивіться живий приклад (відео зі звуком).

+ +

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

+ +
   // Встановіть ім'я властивості hidden і події зміни для видимості.
+
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
+  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");
+
+// Якщо сторінка прихована, зупиніть відео;
+// Якщо сторінка відображається, відтворіть відеозображення;
+
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
+} else {
+      // Зміна видимості сторінки
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+     // Коли відео призупиняється, встановлюємо назву.
+     // Це свідчитеме про паузу.
+  videoElement.addEventListener("pause", function(){
+      document.title = 'Paused';
+  }, false);
+
+  // Коли відео відтворюється, встановлюємо назву.
+  videoElement.addEventListener("play", function(){
+      document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Властивості, використані в інтерфейсі документа

+ +

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: +
+
visible
+
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
+
hidden
+
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
+
prerender
+
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. +
Примітка: Не всі браузери підтримують попереднє завантаження.
+
+
unloaded
+
Сторінка перебуває в процесі вивантаження з пам'яті. +
Примітка: Не всі браузери підтримують це значення.
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
+
+ +
//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
+ +

Працює з браузерами

+ +
+

Document.visibilityState

+ +
+ + +

{{Compat("api.Document.visibilityState")}}

+
+
+ +

Дивись також

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

Об'єкт Blob являє собою файло-подібний об'єкт незмінних, початкових даних. Blob представляє дані, що не обов'язкові у нативному форматі JavaScript. Вигляд {{domxref("File")}} заснований на Blob, наслідує функціонал Blob та доповнює його для підтримки файлів з файлової системи користувача.

+ +

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

+ +

API, що працюють з  Blob, також перелічені у документації {{domxref("File")}}.

+ +
+

Зауваження: Метод slice() другим парметром приймає початкову довжину для індикації кількості байтів, які будуть скопійовані у новий Blob. Якщо вказувати змінні таким чином: початковій індекс + довижина, що привищує розмір джерела Blob, повератємий Blob буде містити дані від початкового індексу до кінця джерела 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.
+
+ +

Приклади

+ +

Приклад використання конструктора Blob

+ +

{{domxref("Blob.Blob", "Blob() constructor")}} дозволяє створювати Blob з інших об'єктів. Наприклад, щоб сконструювати Blob із стрічки:

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

До того, як конструктор Blob став доступний, це можна було зробити за допомогою {{domxref("BlobBuilder")}} API, яка зараз вважається застарілою:

+ +
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 типізованого масиву з використанням Blob

+ +

Наступний код:

+ +
var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url буде виглядати наступним чином: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// тепер ви можете використовувати url у будь-якому контексті, де можуть бути використані звичайні URLs, наприклад img.src, тощо.
+
+ +

Приклад отримання даних з Blob

+ +

Єдиний шлях для отримання даних з Blob це використовуючи {{domxref("FileReader")}}. Наступиний код зчитує дані з Blob у вигляді типізованого масиву.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result містить контент Blob у вигляді типізованого масиву
+});
+reader.readAsArrayBuffer(blob);
+ +

Вікористовуючи інші методи {{domxref("FileReader")}}, можна прочитати контент Blob у вигляді строки або URL.

+ +

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

+ + + + + + + + + + + + + + +
СпецифікацияСтатусКоментар
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Initial definition
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support5[1]4[2]1011.10[1]5.1[1]
slice()10 {{property_prefix("webkit")}}
+ 21		5 {{property_prefix("moz")}}[3]
+ 13		10125.1 {{property_prefix("webkit")}}
Blob() constructor20{{CompatGeckoDesktop("13.0")}}1012.106
close() and isClosed{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
slice(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Blob() constructor{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
close() and isClosed{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] A version of slice() taking the length as second argument was implemented in WebKit and Opera 11.10. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, WebKit removed support and added support for the new syntax as Blob.webkitSlice().

+ +

[2] A version of slice() taking the length as second argument was implemented in Firefox 4. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, Gecko removed support and added support for the new syntax as mozSlice().

+ +

[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of slice(); it did not work for start and end positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.

+ +

[4] See {{bug("1048325")}}

+ +

Gecko notes: availability in privileged code

+ +

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['Blob']);
+
+ +

Blob is available in Worker scopes.

+ +

See also

+ + diff --git a/files/uk/web/api/canvas_api/index.html b/files/uk/web/api/canvas_api/index.html new file mode 100644 index 0000000000..70dbbf1f8d --- /dev/null +++ b/files/uk/web/api/canvas_api/index.html @@ -0,0 +1,166 @@ +--- +title: Canvas API +slug: Web/API/Canvas_API +tags: + - API + - Canvas + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Доданий в HTML5, елемент HTML {{HTMLElement("canvas")}} призначений для створення графіки засобами JavaScript. Для прикладу, його використовують для малювання графіків, створення композиції фотографій, створення анімацій, і навіть для обробки та рендерингу відео в реальному часі.

+ +

Mozilla applications gained support for <canvas> starting with Gecko 1.8 (i.e. Firefox 1.5). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <canvas> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <canvas> by including a script from Google's Explorer Canvas project. Google Chrome and Opera 9 also support <canvas>.

+ +

The <canvas> element is also used by WebGL to draw hardware-accelerated 3D graphics on web pages.

+ +

Example

+ +

This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.

+ +

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);
+
+ +

Edit the code below and see your changes update live in the canvas:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Reference

+ +
+ +
+ +

The interfaces related to the WebGLRenderingContext are referenced under WebGL.

+ +

Guides and tutorials

+ +
+
Canvas tutorial
+
A comprehensive tutorial covering both the basic usage of <canvas> and its advanced features.
+
Code snippets: Canvas
+
Some extension developer-oriented code snippets involving <canvas>.
+
Demo: A basic ray-caster
+
A demo of ray-tracing animation using canvas.
+
Drawing DOM objects into a canvas
+
How to draw DOM content, such as HTML elements, into a canvas.
+
Manipulating video using canvas
+
Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.
+
+ +

Resources

+ +

Generic

+ + + +

Libraries

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

See also

+ + diff --git a/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..e57e9fe4a0 --- /dev/null +++ b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,152 @@ +--- +title: Базове використання canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +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")}} {{Glossary("HTML")}} як такого. Наприкінці ви дізнаєтесь, як задати canvas 2D context та  зможете намалювати перший приклад в соєму браузері.

+
+ +

Елемент <canvas>

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

Елемент {{HTMLElement("canvas")}} схожий на елемент {{HTMLElement("img")}} , з єдиною видимою різницею - він не має атрибутів src та alt attributes. Дійсно, <canvas> має лише два атрибути, {{htmlattrxref("width", "canvas")}} та{{htmlattrxref("height", "canvas")}}. Обидва вони не є обов'язковими, та можуть бути задані за допомогою {{Glossary("DOM")}} властивостей. Коли значення width та height не встановлені, canvas за замовчуванням буде 300 пікселів шириною, та 150 пікселів у висоту. Також можливо задати довільні розміри за допомогою  {{Glossary("CSS")}}, але під час ренедерингу зображення буде масштабуватися згідно з його розмірами: якщо задані в CSS параметри не відповідають початковому співвідношенню сторін canvas, воно буде викривленим. 

+ +
+

Примітка: Якщо ваше зображення здається викривленимб спробуйте задати атрибути width and height атрибути в тегу <canvas> не використовуючи CSS.

+
+ +

Атрибут id не специфіцний для  <canvas>, проте це один з global HTML attributes які можна викростивувати для  HTML елементів (наприклад, class). Використання id завжди є хорошим рішенням, тому що полегшує ідентифікацію елемента в скрипті. .

+ +

<canvas> може бути стилізований так само, як і будь-яке звичайне зображення ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Ці правила, однак, не впливають на фактичний малюнок на canvas. Ми побачимо, як це робиться в спеціальній главі цього підручника. Якщо до canvas не застосовуються правила стилізації, воно за замовчуванням буде повністю прозорим.

+ +
+

Резервний вміст

+ +

<canvas> відрізняється від {{HTMLElement("img")}} тим, щоя як і для {{HTMLElement("video")}}, {{HTMLElement("audio")}}, або {{HTMLElement("picture")}} елементів, легко визначити деякий резервний вміст, котрий буде відображатися в старих браузерах, що не підтримують <canvas>, таких, як версії Internet Explorer до 9ї версії чи  текстових браузерах. Ви завжди повинні задавати резервний вміст, який буде відображатися в таких браузерах.

+ +

Задати резервний вміст дуже просто, достатнь просто вставити альтернативний контент всередину елемента <canvas>. Браузери, які його не підтримують, проігноруюьб контейнер та відобразять альтернативний вміст замість нього. Браузери, які підтримують, пропустять вміст <canvas> і просто покажуть зображення нормально.

+ +

наприклад, ми можемо задати текстовий опис вмісту  canvas чи використати статичне зображення динамічно створюваного контентуge of the dynamically rendered content. This can look something like this:

+ +
<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, наприклад. Використання резервного вмісту або додаткового DOM допомогає make the canvas more accessible.

+ +

Обов'язковий тег </canvas> 

+ +

Як наслідок способу надання резервного вмісту,  на відміну від елемента {{HTMLElement("img")}}, {{HTMLElement("canvas")}} вимагає  закриваючого тега (</canvas>). у випадку його відстусності, весь документ після  </canvas> буде розглядатися як резервний вміст та не буде показаний.

+ +

Якщо резервний вміст не потрібен, простий <canvas id="foo" ...></canvas> повністю сумісний з усіма браузерами, що підтримують canvas.

+ +

The rendering context

+ +

The {{HTMLElement("canvas")}} element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, WebGL uses a 3D context based on OpenGL ES.

+ +

The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The {{HTMLElement("canvas")}} element has a method called {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify "2d" to get a {{domxref("CanvasRenderingContext2D")}}.

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

The first line in the script retrieves the node in the DOM representing the {{HTMLElement("canvas")}} element by calling the {{domxref("document.getElementById()")}} method. Once you have the element node, you can access the drawing context using its getContext() method.

+ +
+

Checking for support

+ +

The fallback content is displayed in browsers which do not support {{HTMLElement("canvas")}}. Scripts can also check for support programmatically by simply testing for the presence of the getContext() method. Our code snippet from above becomes something like this:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

A skeleton template

+ +

Here is a minimalistic template, which we'll be using as a starting point for later examples.

+ +
+

Note: it is not good practice to embed a script inside HTML. We do it here to keep the example concise.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <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>
+
+ +

The script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the {{event("load")}} event on the document. This function, or one like it, could also be called using {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, or any other event handler, as long as the page has been loaded first.

+ +

Here is how a template would look in action. As shown here, it is initially blank.

+ +

{{EmbedLiveSample("A_skeleton_template", 160, 160)}}

+ +

A simple example

+ +

To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <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, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

This example looks like this:

+ +

{{EmbedLiveSample("A_simple_example", 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/uk/web/api/canvas_api/tutorial/index.html b/files/uk/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..f712d8ed88 --- /dev/null +++ b/files/uk/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,63 @@ +--- +title: Canvas tutorial +slug: Web/API/Canvas_API/Tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +

+ +
+

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations. The images on this page show examples of <canvas> implementations which will be created in this tutorial.

+
+ +

This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.

+ +

First introduced in WebKit by Apple for the OS X Dashboard, <canvas> has since been implemented in browsers. Today, all major browsers support it.

+ +

Before you start

+ +

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML height and width property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

In this tutorial

+ + + +

See also

+ + + +

A note to contributors

+ +

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git "a/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" "b/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" new file mode 100644 index 0000000000..cb7b8b615b --- /dev/null +++ "b/files/uk/web/api/canvas_api/tutorial/\321\207\321\203\321\202\320\273\320\270\320\262\321\226_\320\264\321\226\320\273\321\217\320\275\320\272\320\270_\321\202\320\260_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\321\226\321\201\321\202\321\214/index.html" @@ -0,0 +1,108 @@ +--- +title: Чутливі ділянки та доступність +slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність +tags: + - Canvas + - Графіка + - Полотно + - Підручник +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.
+ +

Запасний вміст

+ +

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

+ +

Правила ARIA

+ +

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

+ +

Чутливі ділянки

+ +

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Створює чутливу ділянку на полотні.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Видаляє з полотна чутливу ділянку із зазначеним id .
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Видаляє з полотна всі чутливі ділянки.
+
+ +

Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
+  }
+});
+
+ +

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

+ +
ctx.addHitRegion({control: element});
+ +

Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.

+ +

Облямівки фокуса

+ +

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.
+
+ +

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
Гортає поточний чи вказаний контур до видимої області.
+
+ +

Див. також

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/uk/web/api/console/dir/index.html b/files/uk/web/api/console/dir/index.html new file mode 100644 index 0000000000..1f697b7b5e --- /dev/null +++ b/files/uk/web/api/console/dir/index.html @@ -0,0 +1,104 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +translation_of: Web/API/Console/dir +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Відображає інтерактивний перелік властивостей заданого JavaScript об'єкту. Кінцеві дані показуються у вигляді ієрархічного списку з трикутниками, клікнувши на які мишкою Ви можете переглянути вміст дочірніх об'єктів.

+ +

{{AvailableInWorkers}}

+ +

console-dir.png

+ +

Синтакс

+ +
console.dir(object);
+
+ +

Параметри

+ +
+
object
+
Об'єкт JavaScript, властивості якого ви хочете переглянути.
+
+ +

Сумісність із браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Дивіться також

+ + diff --git a/files/uk/web/api/console/index.html b/files/uk/web/api/console/index.html new file mode 100644 index 0000000000..8a19610a53 --- /dev/null +++ b/files/uk/web/api/console/index.html @@ -0,0 +1,278 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

The Console object 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.

+ +

The Console object can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}}, and its specific variants in workers via property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply console. For example:

+ +
console.log("Failed to open the specified link")
+ +

This page documents the {{anch("Methods")}} available on the Console object and gives a few {{anch("Usage")}} examples.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if first argument is false.
+
{{domxref("Console.clear()")}}
+
Clear the console.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.debug()")}}
+
An alias for log() - starting with Chromium 58 this method is a no-op on Chromium browsers.
+
{{domxref("Console.dir()")}} {{Non-standard_inline}}
+
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
+
{{domxref("Console.dirxml()")}} {{Non-standard_inline}}
+
+

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.

+
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
An alias for error()
+
{{domxref("Console.group()")}}
+
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Exits the current inline group.
+
{{domxref("Console.info()")}}
+
Informative logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.log()")}}
+
For general output of logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.profile()")}} {{Non-standard_inline}}
+
Starts the browser's build-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
+
{{domxref("Console.table()")}}
+
Displays tabular data as a table.
+
{{domxref("Console.time()")}}
+
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
+
{{domxref("Console.timeEnd()")}}
+
Stops the specified timer and logs the elapsed time in seconds since its start.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Adds a marker to the browser's Timeline or Waterfall tool.
+
{{domxref("Console.trace()")}}
+
Outputs a stack trace.
+
{{domxref("Console.warn()")}}
+
Outputs a warning message. You may use string substitution and additional arguments with this method.
+
+ + +

Usage

+ +

Outputting text to the console

+ +

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

+ +

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

+ +

Outputting a single object

+ +

The simplest way to use the logging methods is to output a single object:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

The output looks something like this:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Outputting multiple objects

+ +

You can also output multiple objects by simply listing them when calling the logging method, like this:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);
+ +

This output will look like this:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+
+ +

Using string substitutions

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Substitution stringDescription
%o or %OOutputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %iOutputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%sOutputs a string.
%fOutputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
+ +

Each of these pulls the next argument after the format string off the parameter list. For example:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

The output looks like this:

+ +
[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.
+
+ +

Styling console output

+ +

You can use the "%c" directive to apply a CSS style to console output:

+ +
console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
+ +
 
+ +
+ +
 
+ +
+

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones provide useful.

+
+ +
 
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

+ +
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
+ +

To exit the current group, simply call console.groupEnd(). For example, given this code:

+ +
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");
+
+ +

The output looks like this:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

+ +

For example, given this code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

will log the time needed by the user to discard the alert box:

+ +

timerresult.png

+ +

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

+ +
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
+ +

Stack traces

+ +

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

The output in the console looks something like this:

+ +

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

Notes

+ + + +

See also

+ + + +

Other implementations

+ + diff --git a/files/uk/web/api/console/log/index.html b/files/uk/web/api/console/log/index.html new file mode 100644 index 0000000000..8155ab780b --- /dev/null +++ b/files/uk/web/api/console/log/index.html @@ -0,0 +1,173 @@ +--- +title: Console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +

Виводить повідомлення  у веб консоль.

+ +

Повідомлення може бути одним рядком (з необов'язковими значеннями заміщення) або може бути будь-яким одним або декількома об'єктами JavaScript.

+ +

{{AvailableInWorkers}}

+ +

Синтаксис

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Параметри

+ +
+
obj1 ... objN
+
Перелік  JavaScript об'єктів для відображення. Представлення  кожного з цих об'єктів  об'єднаних разом та відображених в порядку переліку. Будьте обачливі, якщо ви вносите об'єкти в логи у останніх версіях Chrome та Firefox, адже те, що ви отримуєте у логах в консолі - це посилання на об'єкти, які не обов'язково є "значенням" даного об'єкту на момент виклику console.log(), але точно є значенням об'єкту в момент кліку по ньому, щоб відкрити.
+
msg
+
 JavaScript рядок містить нуль або більше  символів підміни.
+
subst1 ... substN
+
JavaScript об'єкти за допомогою яких можливо заміняти символи підміни в межах msg. Це надає додатковий контроль формату виводу.
+
+ +

Дивіться Вивід тексту в консоль у документації {{domxref("console")}} більш детально.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Initial definition
+ +

Сумісність із браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОзнакаChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Рядки заміщення{{CompatVersionUnknown}}
+ {{CompatChrome(28)}}[1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}10[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Доступність для "воркерів"{{CompatUnknown}}{{CompatVersionUnknown}}{{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}}
Доступність для "воркерів"{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Якщо від`ємне значення прямує до %d, воно буде заокруглене до найближчого від`ємного цілого, тому -0.1 стає -1.

+ +

[2] %c не підтримується, %d буде візуалізоване, як 0, якщо це не є числом.

+ +

Різниця із console.dir()

+ +

Ви можете запитати себе, яка ж відмінність між console.dir() та console.log().

+ +

Інша корисна відмінність існує у Chrome, коли відбувається надсилання DOM- елементів до консолі.

+ +

+ +

Помітимо:

+ + + +

Зокрема, console.log надає спеціальну обробку для DOM - елементів, тоді як console.dir цього не робить. Це часто виявляється корисним при спробі отримати повне уявлення про об`єкти DOM JS.

+ +

Більше інформації про ці та інші функції можна отримати за посиланням: Chrome Console API.

+ +

Також перегляньте:

+ + diff --git a/files/uk/web/api/customevent/index.html b/files/uk/web/api/customevent/index.html new file mode 100644 index 0000000000..76b8aeef1a --- /dev/null +++ b/files/uk/web/api/customevent/index.html @@ -0,0 +1,96 @@ +--- +title: CustomEvent +slug: Web/API/CustomEvent +tags: + - API + - DOM + - Interface + - NeedsCompatTable + - NeedsExample + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CustomEvent +--- +

{{APIRef("DOM")}} Інтерфейс CustomEvent являє собою події, ініціалізовані додатком для будь-яких цілей.

+ +

{{AvailableInWorkers}}

+ +

Конструктор

+ +
+
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+
Створює CustomEvent.
+
+ +

Властивості

+ +
+
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
+
Будь-які дані, передані при ініціалізації події.
+
+ +

Цей інтерфейс успадковує властивості від батьків, {{domxref("Event")}}:

+ +

{{Page("/en-US/docs/Web/API/Event", "Properties")}}

+ +

Методи

+ +
+
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
+
+

Ініціалізує об'єкт CustomEvent. Якщо подія вже відправлена, цей метод нічого не робить.

+
+
+ +

Цей інтерфейс успадковує властивості від батьків, {{domxref("Event")}}:

+ +

{{Page("/en-US/docs/Web/API/Event", "Methods")}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКомертарі
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Початкове визначення.
+ +

Браузерна сумісність

+ + + +

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

+ +

Firing from privileged code to non-privileged code

+ +

When firing a CustomEvent from privileged code (i.e. an extension) to non-privileged code (i.e. a webpage), security issues should be considered. Firefox and other Gecko applications restrict an object created in one context from being directly used for another, which will automatically prevent security holes, but these restrictions may also prevent your code from running as expected.

+ +

While creating a CustomEvent object, you must create the object from the same window. The detail attribute of your CustomEvent will be subjected to the same restrictions. String and Array values will be readable by the content without restrictions, but custom Objects will not. While using a custom Object, you will need to define the attributes of that object that are readable from the content script using Components.utils.cloneInto().

+ +
// doc is a reference to the content document
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}
+ +

But one needs to keep in mind that exposing a function will allow the content script to run it with chrome privileges, which can open a security vulnerability.

+ +

Дивіться також

+ + diff --git a/files/uk/web/api/customevent/initcustomevent/index.html b/files/uk/web/api/customevent/initcustomevent/index.html new file mode 100644 index 0000000000..84ea6d6a28 --- /dev/null +++ b/files/uk/web/api/customevent/initcustomevent/index.html @@ -0,0 +1,120 @@ +--- +title: CustomEvent.initCustomEvent() +slug: Web/API/CustomEvent/initCustomEvent +translation_of: Web/API/CustomEvent/initCustomEvent +--- +

{{APIRef("DOM")}}{{deprecated_header}}

+ +

Метод CustomEvent.initCustomEvent() ініціалізує  CustomEvent об'єкт. Якщо на момент ініціалізації event-об'єкт вже був переданий(dispatched), то виклик метода {{ domxref("CustomEvent.initCustomEvent()") }} не матиме ніякого ефекту.

+ +

Події,ініціалізовані у такий спосіб, повинні бути створені за допомогою метода {{domxref("Document.createEvent()") }}.Вказаний метод має бути викликаний для створення події до того, як вона буде передана за допомогою {{ domxref("EventTarget.dispatchEvent()") }}. Як тільки подія є переданою, ніяких дій цей метод більше не виконує. 

+ +
+

Більше не використовуйте цей метод, оскільки він засуджується.

+ +

Натомість, використовуйте спеціальні конструктори подій, наприклад {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. Сторінка про  Creating and triggering events містить більше інформації про способи їхнього використання.

+
+ +

Синтаксис

+ +
event.initCustomEvent(type, canBubble, cancelable, detail);
+
+ +

Параметри

+ +
+
type
+
Це {{domxref("DOMString")}} , що містить назву події
+
canBubble
+
Це {{jsxref("Boolean")}} , що вказує чи подія виринає вгору(bubbles up) крізь DOM чи ні.
+
cancelable
+
Це {{jsxref("Boolean")}} , що вказує чи подія є cancelable.
+
detail
+
Дані, передані під час ініціалізації події
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусОпис
{{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Початкове визначення, однак, вже вважається небажаним, натомість, рекомендується використання конструктора,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+ +

Браузерна сумісність

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОписChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
+

Базова підтримка

+ 		{{ CompatVersionUnknown() }}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(6)}}9115.1 (533.3)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ОписAndroid WebviewChrome для AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Базова підтримка{{ CompatVersionUnknown() }}[1]{{ CompatVersionUnknown() }}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile(6)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Починаючи з Chrome 59, canBubble, cancelable, та detail є необов'язковими параметрами , які за замовчуванням містять значення false, false, та null відповідно.

+ +

Дивіться також

+ + diff --git a/files/uk/web/api/document/index.html b/files/uk/web/api/document/index.html new file mode 100644 index 0000000000..44b1bddc0e --- /dev/null +++ b/files/uk/web/api/document/index.html @@ -0,0 +1,470 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Інтерфейс + - Документ + - Посилання +translation_of: Web/API/Document +--- +
{{APIRef}}
+ +
 
+ +

Document інтерфейс представляє будь-яку веб-сторінку, завантажену в браузер і яка слугує точкою входу в контент веб-сторінки, чим є DOM tree. DOM tree включає елементи такі як {{HTMLElement("body")}} і {{HTMLElement("table")}}, серед багатьох інших. Це забезпечує глобальну функціональність для документу, таку як отримувати URL сторінки і створювати нові елементи в документі.

+ +

{{inheritanceDiagram}}

+ +

Інтерфейс Document описує загальні властивості і методи для будь-якого типу документу. Залежно від типу документу (e.g. HTML, XML, SVG, …), більший API доступний: HTML-документи, які подаються з text/html типом контенту, також реалізовують {{domxref("HTMLDocument")}} інтерфейс, тоді як XML і SVG документи реалізовують {{domxref("XMLDocument")}} інтерфейс.

+ +

Конструктор

+ +
+
{{domxref("Document.Document","Document()")}}{{non-standard_inline}}
+
Створює новий Document об'єкт.
+
+ +

Властивості

+ +

Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.

+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Забезпечує доступ до всіх елементів в документі. Це застарілий, нестандартний інтерфейс і він не повинен використовуватись.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Використовується з {{domxref("Document.load")}} щоб вказати асинхронний запит.
+
{{domxref("Document.body")}}
+
Повертає {{HTMLElement("body")}}, або {{htmlelement("frameset")}} вузол поточного документу.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
Повертає кодування, яке використовується в документі.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.
+
{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+
Вказує чи документ інтерпретується в quirks чи strict режимі.
+
{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+
Повертає Content-Type з MIME-заголовку поточного документу.
+
{{domxref("Document.doctype")}} {{readonlyinline}}
+
Повертає Визначення Типу Документу (DTD) поточного документу.
+
{{domxref("Document.documentElement")}} {{readonlyinline}}
+
Повертає {{domxref("Element")}}, який є прямим нащадком document. Для HTML-документів, це, як правило, {{domxref("HTMLElement")}} елемент.
+
{{domxref("Document.documentURI")}} {{readonlyinline}}
+
Повертає розміщення документу у вигляді стрічки.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Повинна повертати {{domxref("DOMConfiguration")}} об'єкт.
+
{{domxref("Document.fullscreen")}} {{obsolete_inline}}
+
true,якщо документ в {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.hidden")}} {{readonlyinline}}
+
…
+
{{domxref("Document.implementation")}} {{readonlyinline}}
+
Повертає DOM реалізацію, асоційовану з поточним документом.
+
{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+
Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.
+
{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+
Повертає ім'я набору стилів, які були останніми включені.  Має значення null, аж поки таблиця стилів змінена встановленням значення {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
Повертає {{jsxref("Boolean")}}, яким є true лише якщо цей документ є синтетичним, таким як окреме зображення, відео-, аудіо-файл, або т. п.
+
{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
Елемент, який зараз є в повноекранному режимі для цього документу.
+
{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true, якщо виклик {{domxref("Element.mozRequestFullscreen()")}} буде успішним в поточному документі.
+
{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+
Повертає бажаний набір стилів, як вказано автором сторінки.
+
{{domxref("Document.scrollingElement")}} {{readonlyinline}}
+
Повертає посилання на {{domxref("Element")}} ,який прокручує документ.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Повертає набір стилів, який зараз у використанні.
+
{{domxref("Document.styleSheetSets")}} {{readonlyinline}}
+
Повертає список наборів стилів, доступних для документу.
+
{{domxref("Document.timeline")}} {{readonlyinline}}
+
…
+
{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+
…
+
{{domxref("Document.visibilityState")}} {{readonlyinline}}
+
+

Повертає string, яка виражає видимість стану документу. Можливими значеннями є visible,  hidden,  prerender, і unloaded.

+
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Повертає кодування, як визначено XML-оголошенням.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Повертає true, якщо оголошення XML  вказує документу бути автономним (e.g., Зовнішня частина DTD впливає на контент документу), або false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Повертає номер версії, як вказано в XML-оголошенні, або "1.0", якщо оголошення відсутнє.
+
+ +

Document інтерфейс розширюється {{domxref("ParentNode")}} інтерфейсом:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

 Розширення для HTML-документу

+ +

Інтерфейс Document для HTML-документів розширює {{domxref("HTMLDocument")}} інтерфейс, або, починаючи з HTML5,  розширюється для таких документів.

+ +
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Повертає або встановлює колір активних посилань в тілі документу.
+
{{domxref("Document.anchors")}}
+
Повертає список всіх якорів в документі.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Повертає впорядкований список апплетів в межах документу.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Отримує/встановлює фоновий колір поточного документу.
+
{{domxref("Document.cookie")}}
+
Повертає список куків, розділених крапкою з комою, для того документу або встановлює одиничний кукі.
+
{{domxref("Document.defaultView")}} {{readonlyinline}}
+
Повертає посилання на об'єкт window.
+
{{domxref("Document.designMode")}}
+
Отримує/встановлює можливість редагування цілого документу.
+
{{domxref("Document.dir")}} {{readonlyinline}}
+
Отримує/встановлює направленість (rtl - справа наліво/ltr зліва направо) документу.
+
{{domxref("Document.domain")}}
+
Отримує/встановлює домен поточного документу.
+
{{domxref("Document.embeds")}} {{readonlyinline}}
+
Повертає список вбудованих {{HTMLElement('embed')}} елементів в межах поточного документу.
+
{{domxref("document.fgColor")}} {{Deprecated_inline}}
+
Отримує/встановлює колір переднього плану, або колір тексту поточного документу.
+
{{domxref("Document.forms")}} {{readonlyinline}}
+
Повертає список {{HTMLElement("form")}} елементів в межах поточного документу.
+
{{domxref("Document.head")}} {{readonlyinline}}
+
Повертає {{HTMLElement("head")}} елемент поточного документу.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Отримує/встановлює висоту поточного документу.
+
{{domxref("Document.images")}} {{readonlyinline}}
+
Повертає список зображень в поточному документі.
+
{{domxref("Document.lastModified")}} {{readonlyinline}}
+
Повертає дату, коли документ був востаннє змінений.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Отримує/встановлює колір гіперпосилань в документі.
+
{{domxref("Document.links")}} {{readonlyinline}}
+
Повертає список всіх гіперпосилань в документі.
+
{{domxref("Document.location")}} {{readonlyinline}}
+
Повертає URI поточного документу.
+
{{domxref("Document.plugins")}} {{readonlyinline}}
+
Повертає список доступних плагінів.
+
{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+
Повертає статус завантаження документу.
+
{{domxref("Document.referrer")}} {{readonlyinline}}
+
Повертає URI сторінки, яка прив'язана до цієї сторінки.
+
{{domxref("Document.scripts")}} {{readonlyinline}}
+
Повертає всі {{HTMLElement("script")}} елементи в документі.
+
{{domxref("Document.title")}}
+
Встановлює або отримує назву поточного документу.
+
{{domxref("Document.URL")}} {{readonlyInline}}
+
Повертає розміщення документу у вигляді стрічки.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Отримує/встановлює колір відвіданих гіперпосилань.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Повертає ширину поточного документу.
+
+ +

Властивості, включені з DocumentOrShadowRoot

+ +

Інтерфейс Document включає наступні властивості, визначені в {{domxref("DocumentOrShadowRoot")}} міксині. Зверни увагу, що це, на даний час, реалізовано в Chrome; інші браузери все ще реалізують їх безпосередньо через {{domxref("Document")}} інтерфейс.

+ +
+
{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
+
Returns the {{domxref('Element')}} within the shadow tree that has focus.
+
{{domxref("Document.fullscreenElement")}} {{readonlyinline}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{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("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
+
Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("afterscriptexecute")}} event.
+
{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("beforescriptexecute")}} event.
+
{{domxref("Document.oncopy")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("copy")}} event.
+
{{domxref("Document.oncut")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("cut")}} event.
+
{{domxref("Document.onfullscreenchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("Document.onfullscreenerror")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("Document.onpaste")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("paste")}} event.
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Represents the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Represents the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Represents the event handling code for the {{event("readystatechange")}} event.
+
{{domxref("Document.onselectionchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("Document.onvisibilitychange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.
+
{{domxref("Document.onwheel")}} {{non-standard_inline}}
+
Represents the event handling code for the {{event("wheel")}} event.
+
+ +

The Document interface is extended with the {{domxref("GlobalEventHandlers")}} interface:

+ +

{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}

+ +

Методи

+ +

Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.

+ +
+
{{domxref("Document.adoptNode()")}}
+
Приймає вузол із зовнішнього документу.
+
{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+
Дивись {{domxref("Window.captureEvents")}}.
+
{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+
Отримує об'єкт {{Domxref("Range")}} для фрагмента документу у відповідності до вказаних координат.
+
{{domxref("Document.createAttribute()")}}
+
Створює новий об'єкт {{domxref("Attr")}} і повертає його.
+
{{domxref("Document.createAttributeNS()")}}
+
Створює  новий вузол атрибута в заданому просторі імен і повертає його.
+
{{domxref("Document.createCDATASection()")}}
+
Створює новий вузол CDATA і повертає його.
+
{{domxref("Document.createComment()")}}
+
 Створює новий вузол коментаря і повертає його.
+
{{domxref("Document.createDocumentFragment()")}}
+
Створює новий фрагмент документу.
+
{{domxref("Document.createElement()")}}
+
Створює новий елемент із заданим ім'ям тега.
+
{{domxref("Document.createElementNS()")}}
+
Створює новий елемент із заданим ім'ям тега і URI простором імен.
+
{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+
Створює нове посилання на об'єкт і повертає його.
+
{{domxref("Document.createEvent()")}}
+
Створює об'єкт події.
+
{{domxref("Document.createNodeIterator()")}}
+
Створює об'єкт {{domxref("NodeIterator")}}.
+
{{domxref("Document.createProcessingInstruction()")}}
+
Створює новий об'єкт {{domxref("ProcessingInstruction")}}.
+
{{domxref("Document.createRange()")}}
+
Створює об'єкт {{domxref("Range")}}.
+
{{domxref("Document.createTextNode()")}}
+
Створює текстовий вузол.
+
{{domxref("Document.createTouch()")}} {{Deprecated_inline}}
+
Створює об'єкт {{domxref("Touch")}}.
+
{{domxref("Document.createTouchList()")}}
+
Створює об'єкт {{domxref("TouchList")}}.
+
{{domxref("Document.createTreeWalker()")}}
+
 Створює об'єкт{{domxref("TreeWalker")}}.
+
{{domxref("Document.enableStyleSheetsForSet()")}}
+
Вмикає таблиці стилів для вказаного набору таблиць стилів.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Звільняє блокування вказівника.
+
{{domxref("Document.getAnimations()")}} {{experimental_inline}}
+
Повертає масив всіх об'єктів {{domxref("Animation")}}, які діють на даний момент, чиї цільові елементи є нащадками document.
+
{{domxref("Document.getElementsByClassName()")}}
+
Повертає список елементів із заданим ім'ям класу.
+
{{domxref("Document.getElementsByTagName()")}}
+
Повертає список елементів із заданим ім'ям тега.
+
{{domxref("Document.getElementsByTagNameNS()")}}
+
Повертає список елементів із заданим ім'ям тега і простором імен.
+
{{domxref("Document.importNode()")}}
+
Повертає клон вузла з зовнішнього документу.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Заміняє сутності, нормалізує текстові вузли, і т. д.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Звільняє поточний захват мишки, якщо він знаходиться на елементі в цьому документі.
+
{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
Дивись {{domxref("Window.releaseEvents()")}}.
+
{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
Дивись {{domxref("Window.routeEvent()")}}.
+
{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Дозволяє змінити елемент, який використовуєтья в якості фонового зображення для вказаного ідентифікатора елемента. 
+
+ +

Інтерфейс Document розширюється інтерфейсом {{domxref("ParentNode")}}:

+ +
+
{{domxref("document.getElementById","document.getElementById(String id)")}}
+
Повертає посилання на об'єкт визначеного елемента.
+
{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Повертає перший Element-вузол в межах документу, в порядку документу, який співпадає зі вказаними селекторами.
+
{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Повертає список всіх Element-вузлів в межах документу, які співпадають з вказаними селекторами.
+
+ +

Інтерфейс Document розширюється інтерфейсом {{domxref("XPathEvaluator")}}:

+ +
+
{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Компілює XPathExpression який може тоді бути використаний для (повторюваних) оцінювань.
+
{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+
Створює об'єкт {{domxref("XPathNSResolver")}}.
+
{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Вираховує вираз XPath.
+
+ +

Розширення для HTML-документів

+ +

інтерфейс Document для HTML-документів наслідується від інтерфейсу {{domxref("HTMLDocument")}} або, починаючи з HTML5,  розширюється для таких документів:

+ +
+
{{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.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 formating command.
+
{{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.
+
+ +

Methods included from DocumentOrShadowRoot

+ +

The Document interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.

+ +
+
{{domxref("DocumentOrShadowRoot.getSelection()")}}
+
Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.
+
{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
+
Returns the topmost element at the specified coordinates.
+
{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
+
Returns an array of all elements at the specified coordinates.
+
{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+
Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}{{Spec2('Page Visibility API')}}Adds onvisibilitychange.
{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectstart and onselectionchange.
{{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('Page Visibility API', '#sec-document-interface', 'Document')}}{{Spec2('Page Visibility API')}}Extend the Document interface with the visibilityState and hidden attributes
{{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 notes

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{non-standard_inline}} {{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.
+
diff --git a/files/uk/web/api/document/visibilitychange_event/index.html b/files/uk/web/api/document/visibilitychange_event/index.html new file mode 100644 index 0000000000..be68d28a48 --- /dev/null +++ b/files/uk/web/api/document/visibilitychange_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'Документ: зміна видимості' +slug: Web/API/Document/visibilitychange_event +tags: + - API + - API відображення сторінки + - visibilitychange + - відображення сторінки + - фоновий режим +translation_of: Web/API/Document/visibilitychange_event +--- +
{{APIRef}}
+ +

Подія  visibilitychange запускається в документі, коли вміст його вкладки змінився, став видимим або прихованим.

+ + + + + + + + + + + + + + + + + + + + +
БульбашкиТак
СкасовуєтьсяНі
Інтерфейс{{domxref("event")}}
Свойство обработчика события{{domxref("Document.onvisibilitychange", "onvisibilitychange")}}
+ +

Інформація про використання

+ +

У подію не включено оновлення статусу видимості документа, але цю інформацію можна отримати з властивості {{domxref ("Document.visibilityState", "visibilityState")}} документа.

+ +

Приклади

+ +

У цьому прикладі починається відтворення музичного запису, коли документ стає видимим, і призупиняється відтворення музики, коли документ більше не видно.

+ +
document.addEventListener("visibilitychange", function() {
+  if (document.visibilityState === 'visible') {
+    backgroundMusic.play();
+  } else {
+    backgroundMusic.pause();
+  }
+});
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}{{Spec2('Page Visibility API')}}
+ +

Сумісність з браузерами

+ +

{{Compat("api.Document.visibilitychange")}}

+ +

Дивись також

+ + diff --git a/files/uk/web/api/domstring/index.html b/files/uk/web/api/domstring/index.html new file mode 100644 index 0000000000..54ba0dee57 --- /dev/null +++ b/files/uk/web/api/domstring/index.html @@ -0,0 +1,45 @@ +--- +title: DOMString +slug: Web/API/DOMString +translation_of: Web/API/DOMString +--- +
{{APIRef("DOM")}}
+ +

DOMString  є 16-бітовою послідовністю безнакових цілих, типово інтерпретуєтьсят як UTF-16 code units. Це точно відповідає до JavaScript примітивному типу String. Коли DOMString застосовється у JavaScript, це напряму відображує відповідну {{jsxref("String")}}.

+ +

When a Web API accepts a DOMString, the value provided will be stringified, using the ToString abstract operation. (For types other than Symbol, this has the same behavior as the {{jsxref("String/String", "String()")}} function.)

+ +

Certain Web APIs accepting a DOMString have an additional legacy behavior, where passing {{jsxref("null")}} stringifies to the empty string instead of the usual "null".

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}
{{SpecName('WebIDL', '#es-DOMString')}}{{Spec2('WebIDL')}}This defines how JavaScript values are converted to DOMString and vice versa.
+ +

Також дивися:

+ + diff --git a/files/uk/web/api/element/getclientrects/index.html b/files/uk/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..5a88f0321c --- /dev/null +++ b/files/uk/web/api/element/getclientrects/index.html @@ -0,0 +1,219 @@ +--- +title: Element.getClientRects() +slug: Web/API/Element/getClientRects +translation_of: Web/API/Element/getClientRects +--- +
{{APIRef("DOM")}}
+ +

getClientRects() метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної CSS border box в клієнта.

+ +

Syntax

+ +
let rectCollection = object.getClientRects();
+ +

Return value

+ +

Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання left, top, right і bottom властивості, які описують border box, в пікселях, з top-left відносно до top-left видимої області веб-сторінки. For tables with captions, the caption is included even though it's outside the border box of the table. When called on SVG elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewBox transform, if any).

+ +

Originally, Microsoft intended this method to return a TextRectangle object for each line of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each border box. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.

+ +

{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds width and height properties to the TextRectangle object.")}}

+ +

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.

+ +

The returned rectangles do not include the bounds of any child elements that might happen to overflow.

+ +

For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty list is returned.

+ +

Rectangles are returned even for CSS boxes that have empty border-boxes. The left, top, right, and bottom coordinates can still be meaningful.

+ +

Fractional pixel offsets are possible.

+ +

Examples

+ +

These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class withClientRectsOverlay.

+ +

HTML

+ +

Example 1: This HTML creates three paragraphs with a <span> inside, each embedded in a <div> block. Client rects are painted for the paragraph in the second block, and for the <span> element in the third block.

+ +
<h3>A paragraph with a span inside</h3>
+<p>Both the span and the paragraph have a border set. The
+  client rects are in red. Note that the p has onlyone border
+  box, while the span has multiple border boxes.</p>
+
+<div>
+  <strong>Original</strong>
+  <p>
+    <span>Paragraph that spans multiple lines</span>
+  </p>
+</div>
+
+<div>
+  <strong>p's rect</strong>
+  <p class="withClientRectsOverlay">
+    <span>Paragraph that spans multiple lines</span>
+  </p>
+</div>
+
+<div>
+  <strong>span's rect</strong>
+  <p>
+    <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span>
+  </p>
+</div>
+ +

Example 2: This HTML creates three ordered lists. Client rects are painted for the <ol> in the second block, and for each <li> element in the third block.

+ +
<h3>A list</h3>
+<p>Note that the border box doesn't include the number, so
+  neither do the client rects.</p>
+
+<div>
+  <strong>Original</strong>
+  <ol>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ol>
+</div>
+
+<div>
+  <strong>ol's rect</strong>
+  <ol class="withClientRectsOverlay">
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </ol>
+</div>
+
+<div>
+  <strong>each li's rect</strong>
+  <ol>
+    <li class="withClientRectsOverlay">Item 1</li>
+    <li class="withClientRectsOverlay">Item 2</li>
+  </ol>
+</div>
+ +

Example 3: This HTML creates two tables with captions. Client rects are painted for the <table> in the second block.

+ +
<h3>A table with a caption</h3>
+<p>Although the table's border box doesn't include the
+  caption, the client rects do include the caption.</p>
+
+<div>
+  <strong>Original</strong>
+  <table>
+    <caption>caption</caption>
+    <thead>
+      <tr><th>thead</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>tbody</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<div>
+  <strong>table's rect</strong>
+  <table class="withClientRectsOverlay">
+    <caption>caption</caption>
+    <thead>
+      <tr><th>thead</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>tbody</td></tr>
+    </tbody>
+  </table>
+</div>
+ +

CSS

+ +

The CSS draws borders around the paragraph and the <span> inside each <div> block for the first example, around the <ol> and li for the second example, and around <table>, <th>, and <td> elements for the third example.

+ +
strong {
+  text-align: center;
+}
+div {
+  display: inline-block;
+  width: 150px;
+}
+div p, ol, table {
+  border: 1px solid blue;
+}
+span, li, th, td {
+  border: 1px solid green;
+}
+ +

JavaScript

+ +

The JavaScript code draws the client rects for all HTML elements that have CSS class withClientRectsOverlay assigned.

+ +
function addClientRectsOverlay(elt) {
+  /* Absolutely position a div over each client rect so that its border width
+     is the same as the rectangle's width.
+     Note: the overlays will be out of place if the user resizes or zooms. */
+  var rects = elt.getClientRects();
+  for (var i = 0; i != rects.length; i++) {
+    var rect = rects[i];
+    var tableRectDiv = document.createElement('div');
+    tableRectDiv.style.position = 'absolute';
+    tableRectDiv.style.border = '1px solid red';
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+    tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
+    tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
+    tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
+    // We want rect.width to be the border width, so content width is 2px less.
+    tableRectDiv.style.width = (rect.width - 2) + 'px';
+    tableRectDiv.style.height = (rect.height - 2) + 'px';
+    document.body.appendChild(tableRectDiv);
+  }
+}
+
+(function() {
+  /* Call function addClientRectsOverlay(elt) for all elements with
+     assigned class "withClientRectsOverlay" */
+  var elt = document.getElementsByClassName('withClientRectsOverlay');
+  for (var i = 0; i < elt.length; i++) {
+    addClientRectsOverlay(elt[i]);
+  }
+})();
+ +

Result

+ +

{{EmbedLiveSample('Examples', 680, 650)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Notes

+ +

getClientRects() was first introduced in the MS IE DHTML object model.

+ +

Browser compatibility

+ + + +

{{Compat("api.Element.getClientRects")}}

+ +

See also

+ + diff --git a/files/uk/web/api/element/index.html b/files/uk/web/api/element/index.html new file mode 100644 index 0000000000..aa007c48e7 --- /dev/null +++ b/files/uk/web/api/element/index.html @@ -0,0 +1,490 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - DOM Reference + - Element + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Elementце найбільш загальний базовий классз якого наслідуються всі об'єкти {{DOMxRef("Document")}} .  Тільки він має методи та властивості, загальні для всіх видів елементів. Більшість специфічних классів наслідуються з Element. Наприклад, {{DOMxRef("HTMLElement")}} інтерфейс є базовим інтерфейсом для HTML елементів, тоді як {{DOMxRef("SVGElement")}} інтерфейс є базовим для усіх SVG елементів. Більшість функціональності визначається ще далі у ієрархії классу.

+ +

Мови за межами сфери Web платформ, такі як XUL, через інтерфейс XULElement , також застосовують Element.

+ +

{{InheritanceDiagram}}implement

+ +

Properties

+ +

Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.
+
{{DOMxRef("Element.className")}}
+
Is a {{DOMxRef("DOMString")}} representing the class of the element.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Properties included from Slotable

+ +

The Element interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.
+
+ +

Event handlers

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the background.
+
{{domxref("Element.onfullscreenerror")}}
+
An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.
+
+ +

Methods

+ +

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attaches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
+
error
+
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Element/scroll_event", "scroll")}}
+
Fired when the document view or an element has been scrolled.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
+
{{domxref("Element/select_event", "select")}}
+
Fired when some text has been selected.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
+
{{domxref("Element/show_event", "show")}}
+
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute. {{deprecated_inline}}
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
+
{{domxref("Element/wheel_event","wheel")}}
+
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.
+
+ +

Clipboard events

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Element/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Element/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Composition events

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
+
+ +

Focus events

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Element/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
{{domxref("Element/focusin_event", "focusin")}}
+
Fired when an element is about to gain focus.
+
{{domxref("Element/focusout_event", "focusout")}}
+
Fired when an element is about to lose focus.
+
+ +

Fullscreen events

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
Sent to an {{domxref("Element")}} when it transitions into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
Sent to an Element if an error occurs while attempting to switch it into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.
+
+ +

Keyboard events

+ +
+
{{domxref("Element/keydown_event", "keydown")}}
+
Fired when a key is pressed.
+ Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.
+
{{domxref("Element/keypress_event", "keypress")}}
+
Fired when a key that produces a character value is pressed down. {{deprecated_inline}}
+ Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.
+
{{domxref("Element/keyup_event", "keyup")}}
+
Fired when a key is released.
+ Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.
+
+ +

Mouse events

+ +
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
+
{{domxref("Element/click_event", "click")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
Fired when the user attempts to open a context menu.
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
+
{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
+
Occurs when an element is activated, for instance, through a mouse click or a keypress.
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
Fired when a pointing device button is pressed on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
Fired when a pointing device (usually a mouse) is moved while over an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
Fired when a pointing device button is released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
Fired each time the amount of pressure changes on the trackpadtouchscreen.
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
+
+ +

Touch events

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
+
{{domxref("Element/touchend_event", "touchend")}}
+
Fired when one or more touch points are removed from the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
Fired when one or more touch points are moved along the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
Fired when one or more touch points are placed on the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
+
+ +
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}{{Spec2("CSS4 Pseudo-Elements")}}Added the pseudo() method.
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimations() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Added the following methods: closest(), insertAdjacentElement() and insertAdjacentText().
+ Moved hasAttributes() from the Node interface to this one.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Removed the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modified the return value of getElementsByTagName() and getElementsByTagNameNS().
+ Removed the schemaTypeInfo property.
{{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')}}The normalize() method has been moved to {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

diff --git a/files/uk/web/api/globaleventhandlers/index.html b/files/uk/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..982d3d2ca3 --- /dev/null +++ b/files/uk/web/api/globaleventhandlers/index.html @@ -0,0 +1,273 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

+ +
+

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

+
+ +

Properties

+ +

This interface doesn't include any properties except for the event handlers listed below.

+ +

Event handlers

+ +

These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{domxref("HTMLMediaElement/abort_event", "abort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running CSS animation has been canceled.
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a CSS animation has stopped playing.
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a CSS animation has started playing.
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
+
{{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.onformdata")}}
+
Is an {{domxref("EventHandler")}} for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type 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.onloadend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type 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")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised. Deprecated. Use onwheel instead.
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} 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("pointerenter")}} 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.onresize")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} 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.onselectstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.
+
{{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.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a CSS transition has finished playing.
+
{{domxref("GlobalEventHandlers.ontransitionrun")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionrun")}} event is sent, indicating that a CSS transition is running, though not nessarilty started.
+
{{domxref("GlobalEventHandlers.ontransitionstart")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionstart")}} event is sent, indicating that a CSS transition has started transitioning.
+
{{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 methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{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("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/uk/web/api/globaleventhandlers/onkeydown/index.html b/files/uk/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..535fd8b0a0 --- /dev/null +++ b/files/uk/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,93 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +tags: + - HTML DOM + - Обробник подій + - клавіатура + - події клавіатури +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +
{{ApiRef("HTML DOM")}}
+ +

Властивість onkeydown спільно з GlobalEventHandlers є EventHandler обробляє події {{event("keydown")}}.

+ +

Подія keydown спрацьовує, коли користувач натискає клавішу клавіатури.

+ +

Синтаксис

+ +
target.onkeydown = functionRef;
+ +

Значення

+ +

functionRef це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{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("Example")}}

+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}{{Spec2('HTML WHATWG')}}
+ +

Сумісність з браузерами 

+ + + +

{{Compat("api.GlobalEventHandlers.onkeydown")}}

+ +

Нотатки щодо сумісності

+ +

Так якб Firefox 65 події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT (bug 354358, також більш детальну інформацію дивіться keydown and keyup події наразі запускаються під час складання IME. Щоб проігнорувати всі події keyup , зробіть щось на зразок цього (229 це спеціальний набір значень для keyCode що відноситься до читу, який був використаний IME):

+ +
eventTarget.addEventListener("keydown", event => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // зробити що-небудь    });
+
+ +

See also

+ + diff --git a/files/uk/web/api/globaleventhandlers/onkeyup/index.html b/files/uk/web/api/globaleventhandlers/onkeyup/index.html new file mode 100644 index 0000000000..d429593327 --- /dev/null +++ b/files/uk/web/api/globaleventhandlers/onkeyup/index.html @@ -0,0 +1,95 @@ +--- +title: GlobalEventHandlers.onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup +tags: + - HTML DOM + - Обробник подій + - клавіатура + - події клавіатури +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +
{{ApiRef("HTML DOM")}}
+ +
+ +

Властивість onkeyup спільно з {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} обробляє події  {{event("keyup")}} .

+ +

Подія keyup спрацьовує, коли користувач відпускає раніше натиснуту клавішу клавіатури.

+ +

Синтаксис

+ +
target.onkeyup = functionRef;
+ +

Значення

+ +

functionRef це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{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.onkeyup = logKey; //
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`; //Видає у тегу <p> ключ натиснутої клавіші
+}
+ +

Підсумок

+ +

{{EmbedLiveSample("Example")}}

+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}{{Spec2('HTML WHATWG')}}
+ +

Сумісність з браузерами

+ + + +

{{Compat("api.GlobalEventHandlers.onkeyup")}}

+ +

Нотатки щодо сумісності

+ +

Так як Firefox 65, події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT ({{bug (354358)}}, також більш детальну інформацію дивіться keydown and keyup події наразі запускаються під час складання IME. Щоб проігнорувати всі події keyup , зробіть щось на зразок цього (229 це спеціальний набір значень для keyCode що відноситься до читу, який був використаний IME):

+ +
eventTarget.addEventListener("keyup", event => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // зробити що-небудь
+});
+ +

Див. також

+ + diff --git a/files/uk/web/api/globaleventhandlers/onmouseover/index.html b/files/uk/web/api/globaleventhandlers/onmouseover/index.html new file mode 100644 index 0000000000..b3d98e075e --- /dev/null +++ b/files/uk/web/api/globaleventhandlers/onmouseover/index.html @@ -0,0 +1,71 @@ +--- +title: Обробник_глобальних_подій.onmouseover +slug: Web/API/GlobalEventHandlers/onmouseover +tags: + - Event Handler + - onmouseover + - Обробник глобальних подій + - Подія мищі +translation_of: Web/API/GlobalEventHandlers/onmouseover +--- +
{{ApiRef("HTML DOM")}}
+ +

Властивістю onmouseover мікшіна {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} , який обробляє події наведення миші {{event("mouseover")}}.

+ +

Подія mouseover запускається, коли користувач переміщує курсор на певний елемент. 

+ +

Синтаксис

+ +
element.onmouseover = function;
+
+ +

Приклад

+ +

Цей приклад додає onmouseover та onmouseout подіі до параграфу. Спробуйте перемістити мишу до елементу.

+ +

HTML

+ +
<p>Test your mouse on me!</p>
+ +

JavaScript

+ +
const p = document.querySelector('p');
+p.onmouseover = logMouseOver;
+p.onmouseout = logMouseOut;
+
+function logMouseOver() {
+  p.innerHTML = 'Виявлено MOUSE OVER';
+}
+
+function logMouseOut() {
+  p.innerHTML = 'Виявлено MOUSE OUT';
+}
+ +

Результат

+ +

{{EmbedLiveSample("Example")}}

+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseover','onmouseover')}}{{Spec2('HTML WHATWG')}}
+ +

Сумісність з браузерами

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onmouseover")}}

+
diff --git a/files/uk/web/api/headers/index.html b/files/uk/web/api/headers/index.html new file mode 100644 index 0000000000..529712ef22 --- /dev/null +++ b/files/uk/web/api/headers/index.html @@ -0,0 +1,133 @@ +--- +title: Заголовки +slug: Web/API/Headers +tags: + - API + - Fetch + - Fetch API + - Headers + - Інтерфейс + - Заголовки +translation_of: Web/API/Headers +--- +
{{ APIRef("Fetch") }}
+ +

Інтерфейс Headers  Fetch API дозволяє вам виконувати різні дії з  HTTP запитами і заголовками відповідей. Ці дії включають отримання налаштування, додавання і видалення . Об'єкт Headers має асоціативний список заголовків, який по замовчуванню пустий і містить ноль чи більше пар імен і значень. Ви можете додавати то цього списку, використовуючи метод типу {{domxref("Headers.append","append()")}}. У всіх методах цього інтерфейсу імена заголовків знаходяться по  не чутливим до реєсту запитам . 

+ +

З метою безпеки деякі заголовки можуть контролюватись тільки за допомогою user agent. Ці заголовки включають: {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  і {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.

+ +

Об'єкт заголовку також має associated guard, що приймає значення: immutable, request, request-no-cors, response чи none. Це впливає на те чи меоди: {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, і {{domxref("Headers.append","append()")}} змінюватимуть заголовок. Для більшої інформації дивіться {{Glossary("Guard")}}.

+ +

Ви можете отримати об'єкт Headers  через властивості {{domxref("Request.headers")}} і{{domxref("Response.headers")}}, і створити новий об'єкт  Headers, використовуючи конструктор {{domxref("Headers.Headers()")}}.

+ +

Об'єкт, що імплементує Headers може напряму використовуватись в структурі {{jsxref("Statements/for...of", "for...of")}} замість{{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders)тотожний for (var p of myHeaders.entries()).

+ +
+

Нотатка: Ви можете знайти більше про доступні заголовки прочитавши довідку по HTTP headers.

+
+ +

Конструктор

+ +
+
{{domxref("Headers.Headers()")}}
+
Створює новий об'єкт заголовку Headers.
+
+ +

Методи

+ +
+
{{domxref("Headers.append()")}}
+
Додає нове значення до існуючого заголовка в об'єкті Headers, або додає заголовок якщо той не існує.
+
{{domxref("Headers.delete()")}}
+
Видаляє заголовок з об'єкта Headers.
+
{{domxref("Headers.entries()")}}
+
Повертає {{jsxref("Iteration_protocols","iterator")}}, дозволяючи проводити через всі пари ключ/значення, що знаходяться в об'єкті.
+
{{domxref("Headers.forEach()")}}
+
Виконує вказану функцію для кожного елементу масива.
+
{{domxref("Headers.get()")}}
+
Повертає {{domxref("ByteString")}} послідовність всіх значеннях заголовків об'єкта Headers з заданим іменем.
+
{{domxref("Headers.has()")}}
+
Повертає логічне значення чи має обєкт Headers певний заголовок
+
{{domxref("Headers.keys()")}}
+
Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам пройтись по всім ключам пар ключ/значення, що містяться в об'єкті.
+
{{domxref("Headers.set()")}}
+
Задає нове значення існуючого заголовку всередині об'єкта Headers, або додає заголовок, якщо той не існує.
+
{{domxref("Headers.values()")}}
+
Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам проходитись по всім значенням пар ключ/значення, які містяться в цьому об'єкті.
+
+ +
+

Нотатка:  Різниця між {{domxref("Headers.set()")}} і {{domxref("Headers.append()")}} в тому, що якщо вказаний заголовок уже існує і допускає багато значень, {{domxref("Headers.set()")}} перезаписуватиме існуючі значення новим., тоді як {{domxref("Headers.append()")}} буде додавати нове значення в кінець набору значень. Дивіться їх сторінки для прикладу кода.

+
+ +
+

Нотатка: Всі методи Headers видаватимуть помилку TypeError якщо ви спробуєте передати не Валідне ім'я заголовку. Операції зміни заголовку видаватимуть TypeError, якщо заголовок  незмінний {{Glossary("Guard")}}. У разі інших невдач, вийняток не виникатиме.

+
+ +
+

Нотатка: Коли значення Header повторюються вони автоматично сортуються в лексикографічному порядку і значення дубльованих заголовків комбінуються.

+
+ +

Застарілі методи

+ +
+
{{domxref("Headers.getAll()")}}
+
Використовується для повернення масиву всіх значень заголовка з заданим іменем в об'єкті Headers ; цей метод - видалений із специфікації і натомість тепер {{domxref("Headers.get()")}} повертає всі значення замість одного.
+
+ +

Приклади

+ +

В наступномуIn the following фрагменті ми створили новий заголовок, використавши конструктор Headers() constructor, додали новий заголовок за допомогою append(), потім повернули значення цього заголовку, використовуючи get():

+ +
var myHeaders = new Headers();
+
+myHeaders.append('Content-Type', 'text/xml');
+myHeaders.get('Content-Type') // should return 'text/xml'
+
+ +

Те ж можна досягнути передаванням масиву масивів чи літералу об'єкта до конструктора:

+ +
var myHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// or, using an array of arrays:
+myHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+myHeaders.get('Content-Type') // should return 'text/xml'
+
+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('Fetch','#headers-class','Headers')}}{{Spec2('Fetch')}} 
+ +

Підтримка браузерів

+ + + +

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

+ +

See also

+ + + +

 

diff --git a/files/uk/web/api/history_api/index.html b/files/uk/web/api/history_api/index.html new file mode 100644 index 0000000000..47dc8cad03 --- /dev/null +++ b/files/uk/web/api/history_api/index.html @@ -0,0 +1,122 @@ +--- +title: History API +slug: Web/API/History_API +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:

+ +
let numberOfEntries = window.history.length
+
+ +

Інтерфейси

+ +
+
{{domxref("History")}}
+
Дозволяє управляти історією сеансу браузера (відвіданими сторінками у вкладці або фреймі, куди завантажується поточна сторінка).
+
+ +

Приклади

+ +

В наступному прикладі призначається обробка подій через властивість onpopstate щоб проілюструвати деякі методи об’єкта історії для додавання, заміни та переміщення в історії браузера в поточній вкладці.

+ +
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() // виведе в консоль "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // виведе в консоль "location: http://example.com/example.html, state: null"
+history.go(2)  // виведе в консоль "location: http://example.com/example.html?page=3, state: {"page":3}"
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}Initial definition.
+ +

Сумісність

+ + + +

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

+ +

Дивіться також

+ +

Довідка

+ + + +

Посібник

+ + diff --git a/files/uk/web/api/html_dom_api/index.html b/files/uk/web/api/html_dom_api/index.html new file mode 100644 index 0000000000..4f94294e96 --- /dev/null +++ b/files/uk/web/api/html_dom_api/index.html @@ -0,0 +1,472 @@ +--- +title: The HTML DOM API +slug: Web/API/HTML_DOM_API +tags: + - API + - Beginner + - DOM + - Documents + - Elements + - HTML DOM + - HTML DOM API + - NeedsTranslation + - Nodes + - Overview + - TopicStub + - Web + - Windows + - hierarchy +translation_of: Web/API/HTML_DOM_API +--- +

{{DefaultAPISidebar("HTML DOM")}}

+ +

The HTML DOM API is made up of the interfaces that define the functionality of each of the {{Glossary("element", "elements")}} in {{Glossary("HTML")}}, as well as any supporting types and interfaces they rely upon.

+ +

The functional areas included in the HTML DOM API include:

+ + + +

HTML DOM concepts and usage

+ +

In this article, we'll focus on the parts of the HTML DOM that involve engaging with HTML elements. Discussion of other areas, such as Drag and Drop, WebSockets, Web Storage, etc. can be found in the documentation for those APIs.

+ +

Structure of an HTML document

+ +

The Document Object Model ({{Glossary("DOM")}}) is an architecture that describes the structure of a {{domxref("document")}}; each document is represented by an instance of the interface {{domxref("Document")}}. A document, in turn, consists of a hierarchical tree of nodes, in which a node is a fundamental record representing a single object within the document (such as an element or text node).

+ +

Nodes may be strictly organizational, providing a means for grouping other nodes together or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document. Each node is based on the {{domxref("Node")}} interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the DOM.

+ +

Nodes don't have any concept of including the content that is actually displayed in the document. They're empty vessels. The fundamental notion of a node that can represent visual content is introduced by the {{domxref("Element")}} interface. An Element object instance represents a single element in a document created using either HTML or an {{glossary("XML")}} vocabulary such as {{glossary("SVG")}}.

+ +

For example, consider a document with two elements, one of which has two more elements nested inside it:

+ +

Structure of a document with elements inside a document in a window

+ +

While the {{domxref("Document")}} interface is defined as part of the DOM specification, the HTML specification significantly enhances it to add information specific to using the DOM in the context of a web browser, as well as to using it to represent HTML documents specifically.

+ +

Among the things added to Document by the HTML standard are:

+ + + +

HTML element interfaces

+ +

The Element interface has been further adapted to represent HTML elements specifically by introducing the {{domxref("HTMLElement")}} interface, which all more specific HTML element classes inherit from. This expands the Element class to add HTML-specific general features to the element nodes. Properties added by HTMLElement include for example {{domxref("HTMLElement.hidden", "hidden")}} and {{domxref("HTMLElement.innerText", "innerText")}}. HTMLElement also adds all the global event handlers.

+ +

An {{Glossary("HTML")}} document is a DOM tree in which each of the nodes is an HTML element, represented by the {{domxref("HTMLElement")}} interface. The HTMLElement class, in turn, implements Node, so every element is also a node (but not the other way around). This way, the structural features implemented by the {{domxref("Node")}} interface are also available to HTML elements, allowing them to be nested within each other, created and deleted, moved around, and so forth.

+ +

The HTMLElement interface is generic, however, providing only the functionality common to all HTML elements such as the element's ID, its coordinates, the HTML making up the element, information about scroll position, and so forth.

+ +

In order to expand upon the functionality of the core HTMLElement interface to provide the features needed by a specific element, the HTMLElement class is subclassed to add the needed properties and methods. For example, the {{HTMLElement("canvas")}} element is represented by an object of type {{domxref("HTMLCanvasElement")}}. HTMLCanvasElement augments the HTMLElement type by adding properties such as {{domxref("HTMLCanvasElement.height", "height")}} and methods like {{domxref("HTMLCanvasElement.getContext", "getContext()")}} to provide canvas-specific features.

+ +

The overall inheritance for HTML element classes looks like this:

+ +

Hierarchy of interfaces for HTML elements

+ +

As such, an element inherits the properties and methods of all of its ancestors. For example, consider a {{HTMLElement("a")}} element, which is represented in the DOM by an object of type {{domxref("HTMLAnchorElement")}}. The element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by {{domxref("HTMLElement")}} and {{domxref("Element")}}, as well as from {{domxref("Node")}} and, finally, {{domxref("EventTarget")}}.

+ +

Each level defines a key aspect of the utility of the element. From Node, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. Of special importance is what is gained by inheriting from EventTarget: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth.

+ +

There are elements that share commonalities and thus have an additional intermediary type. For example, the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements both present audiovisual media. The corresponding types, {{domxref("HTMLAudioElement")}} and {{domxref("HTMLVideoElement")}}, are both based upon the common type {{domxref("HTMLMediaElement")}}, which in turn is based upon {{domxref("HTMLElement")}} and so forth. HTMLMediaElement defines the methods and properties held in common between audio and video elements.

+ +

These element-specific interfaces make up the majority of the HTML DOM API, and are the focus of this article. To learn more about the actual structure of the DOM, see Introduction to the DOM.

+ +

HTML DOM target audience

+ +

The features exposed by the HTML DOM are among the most commonly-used APIs in the web developer's arsenal. All but the most simple web applications will use some features of the HTML DOM.

+ +

HTML DOM API interfaces

+ +

The majority of the interfaces that comprise the HTML DOM API map almost one-to-one to individual HTML elements, or to a small group of elements with similar functionality. In addition, the HTML DOM API includes a few interfaces and types to support the HTML element interfaces.

+ +

HTML element interfaces

+ +

These interfaces represent specific HTML elements (or sets of related elements which have the same properties and methods associated with them).

+ +
+ +
+ +

Web app and browser integration interfaces

+ +

These interfaces offer access to the browser window and document that contain the HTML, as well as to the browser's state, available plugins (if any), and various configuration options.

+ +
+ +
+ +

Form support interfaces

+ +

These interfaces provide structure and functionality required by the elements used to create and manage forms, including the {{HTMLElement("form")}} and {{HTMLElement("input")}} elements.

+ +
+ +
+ +

Canvas and image interfaces

+ +

These interfaces represent objects used by the Canvas API as well as the {{HTMLElement("img")}} element and {{HTMLElement("picture")}} elements.

+ +
+ +
+ +

Media interfaces

+ +

The media interfaces provide HTML access to the contents of the media elements: {{HTMLElement("audio")}} and {{HTMLElement("video")}}.

+ +
+ +
+ +

Drag and drop interfaces

+ +

These interfaces are used by the HTML Drag and Drop API to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.

+ +
+ +
+ +

Page history interfaces

+ +

The History API interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and backward through that history.

+ +
+ +
+ +

Web Components interfaces

+ +

These interfaces are used by the Web Components API to create and manage the available custom elements.

+ +
+ +
+ +

Miscellaneous and supporting interfaces

+ +

These supporting object types are used in a variety of ways in the HTML DOM API; in addition, {{domxref("PromiseRejectionEvent")}} represents the event delivered when a {{Glossary("JavaScript")}} {{jsxref("Promise")}} is rejected.

+ +
+ +
+ +

Interfaces belonging to other APIs

+ +

There are several interfaces which are technically defined in the HTML specification while actually being part of other APIs.

+ +

Web storage interfaces

+ +

The Web Storage API provides the ability for web sites to store data either temporarily or permanently on the user's device for later re-use.

+ +
+ +
+ +

Web Workers interfaces

+ +

These interfaces are used by the Web Workers API both to establish the ability for workers to interact with an app and its content, but also to support messaging between windows or apps.

+ +
+ +
+ +

WebSocket interfaces

+ +

These interfaces, defined by the HTML specification, are used by the WebSocket API.

+ +
+ +
+ +

Server-sent events interfaces

+ +

The {{domxref("EventSource")}} interface represents the source which sent or is sending server-sent events.

+ +
+ +
+ +

Examples

+ +

In this example, an {{HTMLElement("input")}} element's {{domxref("HTMLInputElement.input_event", "input")}} event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.

+ +

JavaScript

+ +
const nameField = document.getElementById("userName");
+const sendButton = document.getElementById("sendButton")
+
+sendButton.disabled = true;
+// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
+//nameField.focus();
+
+nameField.addEventListener("input", event => {
+  const elem = event.target;
+  const valid = elem.value.length != 0;
+
+  if (valid && sendButton.disabled) {
+    sendButton.disabled = false;
+  } else if (!valid && !sendButton.disabled) {
+    sendButton.disabled = true;
+  }
+});
+ +

This code uses the {{domxref("Document")}} interface's {{domxref("Document.getElementById", "getElementById()")}} method to get the DOM object representing the {{HTMLElement("input")}} elements whose IDs are userName and sendButton.  With these, we can access the properties and methods that provide information about and grant control over these elements.

+ +

The {{domxref("HTMLInputElement")}} object for the "Send" button's {{domxref("HTMLInputElement.disabled", "disabled")}} property is set to true, which disables the "Send" button so it can't be clicked. In addition, the user name input field is made the active focus by calling the {{domxref("HTMLElement.focus", "focus()")}} method it inherits from {{domxref("HTMLElement")}}.

+ +

Then {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to add a handler for the input event to the user name input. This code looks at the length of the current value of the input; if it's zero, then the "Send" button is disabled if it's not already disabled. Otherwise, the code ensures that the button is enabled.

+ +

With this in place, the "Send" button is always enabled whenever the user name input field has a value, and disabled when it's empty.

+ +

HTML

+ +

The HTML for the form looks like this:

+ +
<p>Please provide the information below. Items marked with "*" are required.</p>
+<form action="" method="get">
+  <p>
+    <label for="userName" required>Your name:</label>
+    <input type="text" id="userName"> (*)
+  </p>
+  <p>
+    <label for="email">Email:</label>
+    <input type="email" id="userEmail">
+  </p>
+  <input type="submit" value="Send" id="sendButton">
+</form>
+
+ +

Result

+ +

{{EmbedLiveSample("Examples", 640, 300)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG')}}{{Spec2('HTML WHATWG')}}WHATWG HTML Specification
{{SpecName('HTML5 W3C')}}{{Spec2('HTML5 W3C')}}No change from {{SpecName("DOM2 HTML")}}
{{SpecName('DOM2 HTML')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ +
+
References
+
+ +
+
Guides
+
+ +
+
diff --git a/files/uk/web/api/html_dom_api/microtask_guide/index.html b/files/uk/web/api/html_dom_api/microtask_guide/index.html new file mode 100644 index 0000000000..7b02378a59 --- /dev/null +++ b/files/uk/web/api/html_dom_api/microtask_guide/index.html @@ -0,0 +1,324 @@ +--- +title: Використання мікрозадач у JavaScript за допомогою queueMicrotask() +slug: Web/API/HTML_DOM_API/Microtask_guide +tags: + - API + - JavaScript + - ServiceWorker + - SharedWorker + - Window + - Worker + - queueMicrotask + - Довідник + - асинхронний + - мікрозадача + - пакет + - черга +translation_of: Web/API/HTML_DOM_API/Microtask_guide +--- +

{{APIRef("HTML DOM")}}

+ +

Мікрозадача - це коротка функція, яка виконується після того, як функція чи програма, яка її створила, завершується, та тільки якщо стек виконання JavaScript порожній, але перед поверненням контролю до циклу подій {{Glossary("user agent", "користувацького агента")}} для керування середовищем виконання скрипта. Даний цикл подій може бути або головним циклом подій веб-переглядача, або циклом подій, що керує веб-виконавцем. Це дозволяє даній функції виконуватись без ризику втрутитись у виконання іншого скрипта, в той же час гарантує, що мікрозадача виконається до того, як користувацький агент матиме змогу відреагувати на дії, виконані цією мікрозадачею.

+ +

Проміси JavaScript та Mutation Observer API використовують чергу мікрозадач для виконання своїх зворотніх викликів, але бувають інші випадки, коли здатність відкласти роботу до завершення поточного проходу циклу подій може бути корисна. Щоб дозволити стороннім бібліотекам, фреймворкам та поліфілам використовувати мікрозадачі, метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} доступний у інтерфейсах {{domxref("Window")}} та {{domxref("Worker")}} через домішку {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Задачі та мікрозадачі

+ +

Щоб належно обговорювати мікрозадачі, насамперед, корисно знати, що таке задача JavaScript та чим мікрозадачі відрізняються від задач. Це швидке, спрощене пояснення, але якщо вам потрібно більше подробиць, ви можете їх дізнатись у статті В подробицях: мікрозадачі та середовище виконання JavaScript.

+ +

Задачі

+ +

Задача - це будь-який код JavaScript, що запланований до запуску стандартними механізмами, такими як початковий запуск програми, запуск зворотного виклику для події, або запуск таймера чи інтервалу. Всі вони розташовуються у черзі задач.

+ +

Задачі додаються до черги задач, коли:

+ + + +

Цикл подій, що керує вашим кодом, обробляє ці задачі одна за одною, в тому порядку, в якому вони були додані у чергу. Лише ті задачі, які вже знаходились у черзі задач, коли почався прохід циклу подій, будуть виконані протягом поточної ітерації. Решті доведеться зачекати наступної ітерації.

+ +

Мікрозадачі

+ +

Спершу різниця між мікрозадачами та задачами здається незначною. І вони дійсно схожі; і те, й інше - код JavaScript, який розміщується у черзі та запускається у належний час. Однак, в той час, як цикл подій запускає лише задачі, наявні у черзі на момент початку ітерації, одна за одною, з мікрозадачами він поводиться зовсім по-іншому.

+ +

Є дві ключові відмінності.

+ +

По-перше, кожен раз, коли задача завершується, цикл подій перевіряє, чи задача повертає контроль іншому коду JavaScript. Якщо ні, він запускає всі мікрозадачі з черги мікрозадач. Таким чином, черга мікрозадач обробляється багаторазово протягом однієї ітерації циклу подій, в тому числі після обробки подій та інших зворотних викликів.

+ +

По-друге, якщо мікрозадача додає інші мікрозадачі до черги, викликаючи метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, ці додані мікрозадачі виконуються перед запуском наступної задачі. Все тому, що цикл подій викликатиме мікрозадачі, доки у черзі не залишиться жодної, навіть якщо при цьому додаються нові.

+ +
+

Застереження: Оскільки мікрозадачі можуть ставити у чергу інші мікрозадачі, а цикл подій продовжуватиме обробляти мікрозадачі, доки черга не спорожніє, існує реальний ризик спричинити нескінченну обробку мікрозадач циклом подій. Будьте обережні, додаючи мікрозадачі рекурсивно.

+
+ +

Використання мікрозадач

+ +

Перед тим, як продовжити, важливо зазначити ще раз, що більшість програмістів нечасто використовують мікрозадачі, якщо взагалі використовують. Це вузькоспеціалізована функціональність сучасної JavaScript-розробки для переглядачів, що дозволяє вам запланувати виконання коду попереду чогось іншого у довгому списку речей, що чекають на виконання комп'ютером користувача. Зловживання цією можливістю призведе до проблем з продуктивністю.

+ +

Додавання мікрозадач у чергу

+ +

Таким чином, вам варто використовувати мікрозадачі лише тоді, коли немає іншого рішення, або при створенні фреймворків чи бібліотек, які мають використовувати мікрозадачі для створення функціональності, яку реалізують. Хоча раніше існували трюки, які дозволяли ставити мікрозадачі в чергу (наприклад, створення проміса, який негайно вирішується), введення методу {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} додає стандартний спосіб створення мікрозадач безпечно та без допомоги трюків.

+ +

Введення методу queueMicrotask() дозволяє уникнути вивертів, що трапляються під час такого проникнення у чергу мікрозадач за допомогою промісів. Наприклад, при використанні промісів для створення мікрозадач, винятки, викинуті зворотним викликом, повідомляються як відхилені проміси, а не як стандартні винятки. Також, створення та знищення промісів потребує додаткових витрат як часу, так і пам'яті, цього уникає функція, яка належним чином ставить мікрозадачі у чергу.

+ +

Просто передайте {{jsxref("Function","функцію")}} JavaScript, яку треба викликати, коли контекст обробляє мікрозадачі, у метод queueMicrotask(), доступний у глобальному контексті, як визначено у інтерфейсі {{domxref("Window")}} або {{domxref("Worker")}}, в залежності від поточного контексту виконання.

+ +
queueMicrotask(() => {
+  /* тут код, який виконує мікрозадача */
+});
+
+ +

Сама функція мікрозадачі не приймає параметрів та не повертає значення.

+ +

Коли використовувати мікрозадачі

+ +

У цьому розділі ми розглянемо сценарії, в яких мікрозадачі є особливо корисними. Загалом, мова йде про отримання та перевірку результатів, або прибирання, після того, як головне тіло контексту виконання JavaScript завершується, але перед тим, як опрацьовуються будь-які обробники подій, таймери та інтервали, чи інші зворотні виклики.

+ +

Коли це корисно?

+ +

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

+ +

Забезпечення порядку виконання при використанні промісів в умовних конструкціях

+ +

Одна з ситуацій, в якій можуть використовуватись мікрозадачі - це забезпечення завжди послідовного порядку виконання у ситуації, коли проміси використовуються у одному блоці конструкції if...else (чи іншої умовної конструкції), але не в іншому блоці. Розглянемо наступний код:

+ +
customElement.prototype.getData = url => {
+  if (this.cache[url]) {
+    this.data = this.cache[url];
+    this.dispatchEvent(new Event("load"));
+  } else {
+    fetch(url).then(result => result.arrayBuffer()).then(data => {
+      this.cache[url] = data;
+      this.data = data;
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};
+ +

Проблема тут полягає в тому, що, використовуючи задачу в одній гілці конструкції if...else (у випадку, коли зображення доступне з кешу), але маючи проміси у блоці else, ми отримуємо ситуацію, в якій порядок операцій може бути різним; наприклад, як показано нижче.

+ +
element.addEventListener("load", () => console.log("Завантажені дані"));
+console.log("Отримання даних...");
+element.getData();
+console.log("Дані отримано");
+
+ +

Виконання цього коду два рази підряд дає результати, наведені у таблиці:

+ + + + + + + + + + + + + + + +
Результати, коли дані не кешовані (зліва) та коли дані знайдені в кеші
Дані не кешованіДані кешовані
+ 
+Отримання даних
+Дані отримано
+Завантажені дані
+
+ 		+ 
+Отримання даних
+Завантажені дані
+Дані отримано
+
+
+ +

Навіть гірше, іноді властивість елементів data буде встановлена, а іноді не буде, на той момент, коли цей код завершує виконання.

+ +

Ми можемо забезпечити послідовний порядок цих операцій використанням мікрозадачі у блоці if, щоб збалансувати два блоки:

+ +
customElement.prototype.getData = url => {
+  if (this.cache[url]) {
+    queueMicrotask(() => {
+      this.data = this.cache[url];
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(result => result.arrayBuffer()).then(data => {
+      this.cache[url] = data;
+      this.data = data;
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};
+ +

Це збалансовує два блоки, бо тепер в обох ситуаціях встановлення значення data та запуск події load відбувається всередині мікрозадачі (за допомогою queueMicrotask() у блоці if та за допомогою промісів, що використовуються методом {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, у блоці else).

+ +

Пакетне виконання операцій

+ +

Ви також можете використати мікрозадачі, щоб зібрати множину запитів з різних джерел у єдиний пакет, уникаючи можливих затрат, пов'язаних з багатьма викликами задля виконання задач одного типу.

+ +

Фрагмент коду, наведений нижче, створює функцію, яка збирає множину повідомлень у масив, використовуючи мікрозадачу, щоб відправити їх як єдиний об'єкт по завершенні контексту.

+ +
const messageQueue = [];
+
+let sendMessage = message => {
+  messageQueue.push(message);
+
+  if (messageQueue.length === 1) {
+    queueMicrotask(() => {
+      const json = JSON.stringify(messageQueue);
+      messageQueue.length = 0;
+      fetch("url-of-receiver", json);
+    });
+  }
+};
+
+ +

Коли викликається sendMessage(), вказане повідомлення спочатку додається у масив черги повідомлень. А далі відбувається цікаве.

+ +

Якщо повідомлення, яке ми додали до масиву, є першим, ми додаємо мікрозадачу, яка відправлятиме пакет. Мікрозадача виконається, як завжди, коли шлях виконання JavaScript сягне верхнього рівня, одразу перед зворотними викликами. Це означає, що будь-які подальші виклики sendMessage(), зроблені в цей час, додадуть свої повідомлення до черги повідомлень, але, завдяки перевірці довжини масиву перед додаванням мікрозадачі, нових мікрозадач у чергу не буде додано.

+ +

Коли запускається мікрозадача, то вона має масив, потенційно, багатьох повідомлень, які на неї очікують. Вона починається кодуванням його як JSON за допомогою методу {{jsxref("JSON.stringify()")}}. Після цього вміст масиву більше не потрібний, а отже, ми спорожнюємо масив messageQueue. Нарешті, ми використовуємо метод {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, щоб відправити рядок JSON на сервер.

+ +

Це дозволяє кожному виклику sendMessage(), зробленому під час тієї самої ітерації циклу подій, додавати свої повідомлення до тієї самої операції fetch(), без потенційних затримок трансмісії іншими задачами, такими як таймери та подібні.

+ +

Сервер отримає рядок JSON, далі, ймовірно, декодує його та обробить повідомлення, які знайде у отриманому масиві.

+ +

Приклади

+ +

Простий приклад мікрозадачі

+ +

У цьому простому прикладі ми бачимо, що додавання мікрозадачі у чергу спричиняє запуск зворотного виклику мікрозадачі після того, як тіло цього скрипта верхнього рівня завершує виконання.

+ + + +

JavaScript

+ + + +

У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, що використовується для планування запуску мікрозадачі. Цей виклик оточують виклики log(), користувацької функції, яка просто виводить текст на екран.

+ +
log("До розміщення мікрозадачі в черзі");
+queueMicrotask(() => {
+  log("Мікрозадача запустилась.")
+});
+log("Після розміщення мікрозадачі в черзі");
+ +

Результат

+ +

{{EmbedLiveSample("Простий_приклад_мікрозадачі", 640, 80)}}

+ +

Таймер та приклад мікрозадачі

+ +

У цьому прикладі встановлюється таймер для запуску через нуль мілісекунд (або "якомога швидше"). Це демонструє різницю між тим, що означає "якомога швидше" при плануванні нової задачі (наприклад, при використанні setTimeout()) у порівнянні з використанням мікрозадачі.

+ + + +

JavaScript

+ + + +

У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, який використовується для планування запуску мікрозадачі. Цей виклик розташований між викликами log(), користувацької функції, яка просто виводить текст на екран.

+ +

Наступний код встановлює таймер, який має запуститися через нуль мілісекунд, після чого додає у чергу мікрозадачу. Він оточений викликами log() для виводу додаткових повідомлень.

+ +
let callback = () => log("Запустився звичайний зворотний виклик таймера");
+
+let urgentCallback = () => log("*** О, ні! Запустився терміновий зворотний виклик!");
+
+log("Початок головної програми");
+setTimeout(callback, 0);
+queueMicrotask(urgentCallback);
+log("Кінець головної програми");
+ +

Результат

+ +

{{EmbedLiveSample("Таймер_та_приклад_мікрозадачі", 640, 100)}}

+ +

Зауважте, що текст, який виводиться головною програмою, з'являється першим, далі текст, виведений мікрозадачею, а за ним текст зворотного виклику таймера. Все тому, що, коли задача, що керує виконанням головної програми, завершується, черга мікрозадач обробляється раніше черги задач, в якій розташований зворотний виклик таймера. Знання того, що задачі та мікрозадачі розташовуються у різних чергах, і те, що мікрозадачі виконуються першими, допомагає легше в цьому розібратись.

+ +

Мікрозадача з функції

+ +

Цей приклад трохи розширює попередній додаванням функції, яка виконує певну роботу. Ця функція використовує queueMicrotask(), щоб додати мікрозадачу. Важливий момент, який варто з нього винести - мікрозадача не виконується, коли завершується функція, а тільки коли завершується головна програма.

+ + + +

JavaScript

+ + + +

Код головної програми наступний. Функція doWork() викликає queueMicrotask(), але мікрозадача не запускається, доки вся програма не завершується, оскільки саме тоді завершується задача і не залишається нічого іншого у стеку виконання.

+ +
let callback = () => log("Запустився звичайний зворотний виклик таймера");
+
+let urgentCallback = () => log("*** О, ні! Запустився терміновий зворотний виклик!");
+
+let doWork = () => {
+  let result = 1;
+
+  queueMicrotask(urgentCallback);
+
+  for (let i=2; i<=10; i++) {
+    result *= i;
+  }
+  return result;
+};
+
+log("Початок головної програми");
+setTimeout(callback, 0);
+log(`10! дорівнює ${doWork()}`);
+log("Кінець головної програми");
+ +

Результат

+ +

{{EmbedLiveSample("Мікрозадача_з_функції", 640, 100)}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/htmlcanvaselement/index.html b/files/uk/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..9f1a6452ed --- /dev/null +++ b/files/uk/web/api/htmlcanvaselement/index.html @@ -0,0 +1,264 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of canvas elements. The HTMLCanvasElement interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

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

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Is a positive integer reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.
+
{{domxref("HTMLCanvasElement.width")}}
+
Is a positive integer reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.
+
{{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.
+
+ +

Methods

+ +

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

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with "2d" returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with "experimental-webgl" (or "webgl") returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to png). The returned image is in a resolution of 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is 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}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatVersionUnknown}}{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatNo}}{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatNo}}{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{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/uk/web/api/htmlelement/index.html b/files/uk/web/api/htmlelement/index.html new file mode 100644 index 0000000000..02de0c792e --- /dev/null +++ b/files/uk/web/api/htmlelement/index.html @@ -0,0 +1,486 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsMobileBrowserCompatibility + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
 
+ +

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
+
{{domxref("HTMLElement.contentEditable")}}
+
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
+
{{domxref("HTMLElement.contextMenu")}}
+
Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null.
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's custom data attributes (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")}} representing the item scope.
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the item ID.
+
{{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 a {{jsxref("Object")}} representing the item value.
+
{{domxref("HTMLElement.lang")}}
+
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
+
{{domxref("HTMLElement.noModule")}}
+
Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.
+
{{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 a {{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 a {{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 doesn't have an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is a {{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")}} representing the translation.
+
+ +

Event handlers

+ +

Most event handler properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by HTMLElement. In addition, the following handlers 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}}
+
Runs the spell checker on the element's contents.
+
+ +

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)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}{{CompatChrome(17)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}6.0
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}9{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatChrome(9)}}{{CompatVersionUnknown}}9{{CompatUnknown}}6.0
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}{{CompatChrome(8)}}{{CompatVersionUnknown}}1111.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}9{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{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}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.onModule")}}{{CompatUnknown}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(47)}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{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}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{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}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Android WebviewChrome for AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.onModule", "onModule()")}}{{CompatUnknown}}{{CompatChrome(60)}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(47)}}{{CompatUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/uk/web/api/htmlelement/offsettop/index.html b/files/uk/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..9bafdc485c --- /dev/null +++ b/files/uk/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,60 @@ +--- +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) {
+  // object is offset more
+  // than 10 pixels from its parent
+}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифіуаціяСтатусКоментар
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}} 
+ +

Браузерна сумісність

+ + + +

{{Compat("api.HTMLElement.offsetTop")}}

+ +

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

+ +

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

diff --git a/files/uk/web/api/htmlformelement/index.html b/files/uk/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..7871a2d052 --- /dev/null +++ b/files/uk/web/api/htmlformelement/index.html @@ -0,0 +1,245 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - Form Element + - Forms + - HTML DOM + - HTML forms + - HTMLFormElement + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLFormElement interface represents a {{HTMLElement("form")}} element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Properties

+ +

This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}
+
A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.
+
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
+
A long reflecting  the number of controls in the form.
+
{{domxref("HTMLFormElement.name")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
+
{{domxref("HTMLFormElement.method")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
+
{{domxref("HTMLFormElement.target")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.
+
{{domxref("HTMLFormElement.action")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
+
{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ 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. The two properties are synonyms.
+
{{domxref("HTMLFormElement.acceptCharset")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.
+
{{domxref("HTMLFormElement.autocomplete")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
+
{{domxref("HTMLFormElement.noValidate")}}
+
A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.
+
+ +

Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).

+ +

Methods

+ +

This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}
+
Returns true if the element's child controls are subject to constraint validation and satisfy those contraints; returns 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.reportValidity", "reportValidity()")}}
+
Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.
+
{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}
+
Requests that the form be submitted using the specified submit button and its corresponding configuration.
+
{{domxref("HTMLFormElement.reset", "reset()")}}
+
Resets the form to its initial state.
+
{{domxref("HTMLFormElement.submit", "submit()")}}
+
Submits the form to the server.
+
+ +

Deprecated methods

+ +
+
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}
+
Triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
formdata
+
 The formdata event fires after the entry list representing the form's data is constructed.
+ Also available via the onformdata property.
+
reset
+
 The reset event fires when a form is reset.
+ Also available via the onreset property.
+
submit
+
The submit event fires when a form is submitted.
+ Also available via the onsubmit property.
+
+ +

Usage notes

+ +

Obtaining a form element object

+ +

To obtain an HTMLFormElement object, you can use a CSS selector with {{domxref("ParentNode.querySelector", "querySelector()")}}, or you can get a list of all of the forms in the document using its {{domxref("Document.forms", "forms")}} property.

+ +

{{domxref("Document.forms")}} returns an array of HTMLFormElement objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:

+ +
+
document.forms[index]
+
Returns the form at the specified index into the array of forms.
+
document.forms[id]
+
Returns the form whose ID is id.
+
document.forms[name]
+
Returns the form whose {{domxref("Element.name", "name")}} attribute's value is name.
+
+ +

Accessing the form's elements

+ +

You can access the list of the form's data-containing elements by examining the form's {{domxref("HTMLFormElement.elements", "elements")}} property. This returns an {{domxref("HTMLFormControlsCollection")}} listing all of the form's user data entry elements, both those which are descendants of the <form> and those which are made members of the form using their form attributes.

+ +

You can also get the form's element by using its name attribute as a key of the form, but using elements is a better approach — it contains only the form's elements, and it cannot be mixed with other attributes of the form.

+ +

Elements that are considered form controls

+ +

The elements which are included by HTMLFormElement.elements and HTMLFormElement.length are:

+ + + +

No other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.

+ +

Examples

+ +

Creating a new form element, modifying its attributes, then submitting it:

+ +
var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST";
+f.submit();                            // Call the form's submit method
+
+ +

Extract information from a form element and set some of its attributes:

+ +
<form name="formA" action="/cgi-bin/test" method="post">
+ <p>Press "Info" for form details, or "Set" to change those details.</p>
+ <p>
+  <button type="button" onclick="getFormInfo();">Info</button>
+  <button type="button" onclick="setFormInfo(this.form);">Set</button>
+  <button type="reset">Reset</button>
+ </p>
+
+ <textarea id="form-info" rows="15" cols="20"></textarea>
+</form>
+
+<script>
+  function getFormInfo(){
+    // Get a reference to the form via its name
+    var f = document.forms["formA"];
+    // The form properties we're interested in
+    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    // Iterate over the properties, turning them into a string that we can display to the user
+    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
+
+    // Set the form's <textarea> to display the form's properties
+    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
+  }
+
+  function setFormInfo(f){ // Argument should be a form element reference.
+    f.action = "a-different-url.cgi";
+    f.name   = "a-different-name";
+  }
+</script>
+
+ +

Submit a form into a new window:

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Example new-window form submission</title>
+</head>
+<body>
+
+<form action="test.php" target="_blank">
+  <p><label>First name: <input type="text" name="firstname"></label></p>
+  <p><label>Last name: <input type="text" name="lastname"></label></p>
+  <p><label><input type="password" name="pwd"></label></p>
+
+  <fieldset>
+   <legend>Pet preference</legend>
+    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
+    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
+  </fieldset>
+
+  <fieldset>
+    <legend>Owned vehicles</legend>
+
+    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
+    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
+  </fieldset>
+
+  <p><button>Submit</button></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 {{domxref("XMLHttpRequest")}} API, please read this paragraph.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}The following method has been added: requestAutocomplete().
{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "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.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/uk/web/api/htmlformelement/reset/index.html b/files/uk/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..9917055250 --- /dev/null +++ b/files/uk/web/api/htmlformelement/reset/index.html @@ -0,0 +1,70 @@ +--- +title: HTMLFormElement.reset() +slug: Web/API/HTMLFormElement/reset +tags: + - скидання форми +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

Метод HTMLFormElement.reset() відновлює значення елемента форми за замовчуванням.  Цей метод робить те ж саме, що і натискання кнопки скидання форми. 

+ +

Якщо елемент управління форми (наприклад, кнопка скидання) має ім'я або ідентифікатор скидання, він маскує метод скидання форми. Він не скидає інші атрибути input елемента, наприклад, disabled.

+ +

Синтаксис

+ +
HTMLFormElement.reset()
+
+ +

Приклад

+ +
<form>
+    <input type="text" size="350" value="Приймеш синю пігулку - і казці кінець. Ти прокинешся у своєму ліжку і повіриш, що це був сон. Приймеш червону пігулку - увійдеш до країни чудес. Я покажу тобі, чи глибока кроляча нора."/>
+    <input type="reset" value="Reset">
+    <button type="reset">Red</button>
+    <div id="test">Blue</div>
+</form>
+
+<script>
+  // тут ми будем зберігати елемент, при нажатті на який ініціювало reset подію
+  let resetElement = undefined;
+
+  // додамо прослуховувач click події до елементів, які дозволяють скинути значення форми
+  document.querySelectorAll("*[type=reset], #test").forEach(element => element.addEventListener("click", e => {
+    resetElement = e.target;
+  }));
+
+  // при активації клік події виклечемо .reset() на FORM елементі
+  document.querySelector("#test").addEventListener("click", e => e.target.parentNode.reset());
+
+ // переконаємося в тому, що .reset() ініціює подію
+ window.addEventListener("reset", e => {
+    console.log(e.type, " has been initiated by: ", resetElement.tagName);
+    resetElement = undefined;
+  })
+</script>
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}{{Spec2('HTML WHATWG')}}
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.HTMLFormElement.reset")}}

diff --git a/files/uk/web/api/htmlimageelement/image/index.html b/files/uk/web/api/htmlimageelement/image/index.html new file mode 100644 index 0000000000..1477430aae --- /dev/null +++ b/files/uk/web/api/htmlimageelement/image/index.html @@ -0,0 +1,117 @@ +--- +title: Image() +slug: Web/API/HTMLImageElement/Image +tags: + - Constructor + - DOM + - HTML DOM + - HTMLImageElement + - Довідка +translation_of: Web/API/HTMLImageElement/Image +--- +
{{ APIRef("HTML DOM") }}
+ +
Конструктор Image() створює новий примірник {{domxref("HTMLImageElement")}}. Наслідком є те саме, що й для {{domxref("Document.createElement()", "document.createElement('img')")}}.
+ +

Синтаксис

+ +
new Image(width, height)
+ +

Параметри

+ +
+
width {{optional_inline}}
+
Ширина зображення (визначає значення атрибута {{htmlattrxref("width", "img")}}).
+
height {{optional_inline}}
+
Висота зображення (визначає значення атрибута {{htmlattrxref("height", "img")}}).
+
+ +

Приклади

+ +

У наведеному прикладі створюється елемент <img> завбільшки 100x200, до нього завантажується якесь зображення та додається до тіла документа:

+ +
var image = new Image(100, 200);
+image.onload = function() {
+  // Додати у DOM
+  document.body.appendChild(image);
+};
+image.src = '/assets/зразок.png';
+ +

Того ж можна досягти оголошенням такого HTML-елемента просто всередині {{htmlelement("body")}}:

+ +
<img width="100" height="200" src="/assets/зразок.png">
+ +

Але перевагою створення <img> за допомогою конструктора Image() є можливість додати зображення у DOM лише після його завантаження (завдяки обробникові події load).

+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}{{spec2("HTML WHATWG")}} 
+ +

Підтримка веб-переглядачами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}{{compatversionunknown}}
+
+ +

 

diff --git a/files/uk/web/api/htmlimageelement/index.html b/files/uk/web/api/htmlimageelement/index.html new file mode 100644 index 0000000000..0f227e69f3 --- /dev/null +++ b/files/uk/web/api/htmlimageelement/index.html @@ -0,0 +1,401 @@ +--- +title: HTMLImageElement +slug: Web/API/HTMLImageElement +tags: + - API + - HTML DOM + - HTMLImageElement + - Interface + - NeedsTranslation + - Reference + - TopicStub + - img +translation_of: Web/API/HTMLImageElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLImageElement interface provides special properties and methods  for manipulating the layout and presentation of {{HTMLElement("img")}} elements.

+ +

Properties

+ +

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

+ +
+
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context.
+
{{domxref("HTMLImageElement.alt")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.
+
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.
+
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} that is true if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.
+
{{domxref("HTMLImageElement.crossOrigin")}}
+
Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See CORS settings attributes for further details.
+
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).
+
{{domxref("HTMLImageElement.height")}}
+
Is a unsigned long that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.
+
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
+
Is a long representing the space on either side of the image.
+
{{domxref("HTMLImageElement.isMap")}}
+
Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.
+
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing the URI of a long description of the image.
+
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.
+
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} representing the name of the element.
+
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
+
Returns a unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
+
{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}
+
Returns a unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.
+
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.
+
{{domxref("HTMLImageElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.
+
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.
+
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (',', U+002C COMMA). A candidate image is a URL followed by a 'w' with the width of the images, or an 'x' followed by the pixel density.
+
{{domxref("HTMLImageElement.useMap")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.
+
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
+
Is a long representing the space above and below the image.
+
{{domxref("HTMLImageElement.width")}}
+
Is a unsigned long that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.
+
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a long representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.
+
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
+
Returns a long representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.
+
+ +

Methods

+ +

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

+ +
+
{{domxref("HTMLImageElement.Image()", "Image()")}}
+
The Image() constructor, taking two optional unsigned long, which are the width and the height of the resource, creates an instance of HTMLImageElement , not inserted in a DOM tree.
+
+ +

Errors

+ +

If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:

+ + + +

Example

+ +
var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // use DOM HTMLImageElement
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// using first image in the document
+alert(document.images[0].src);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Added the x and y properties.
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}The following properties have been added: srcset, currentSrc and sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{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.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}21{{CompatSafari(7.1)}}
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(33)}}[3]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(51)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
complete{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}iOS 8
currentSrc {{experimental_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile(33)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
x and y{{CompatVersionUnknown}}{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onerror event handler{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Though, these x and y properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.

+ +

[2] This feature is behind the dom.image.srcset.enabled preference, defaulting to false.

+ +

[3] This feature is behind the dom.image.picture.enabled preference, defaulting to false.

+ +

[4] IE reports false for broken images.

+ +

See also

+ + diff --git a/files/uk/web/api/index.html b/files/uk/web/api/index.html new file mode 100644 index 0000000000..60714ca304 --- /dev/null +++ b/files/uk/web/api/index.html @@ -0,0 +1,26 @@ +--- +title: Список Web API +slug: Web/API +translation_of: Web/API +--- +

Під час написання коду розробнику доступна велика кількість Web API (Application Programming Interface, інтерфейс програмування застосунків). Нижче наведено перелік усіх API та інтерфейсів, які ви можете використовувати під час розробки веб-застосунку чи сайту.

+ +

Web API зазвичай використовуються JavaScript, хоча і не обмежені саме цією мовою програмування.

+ +

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

+ +

Нижче наведено список усіх доступних API.

+ +
{{ListGroups}}
+ +

Інтерфейси

+ +

Нижче наведено список усіх доступних інтерфейсів.

+ +
{{APIListAlpha}}
+ +

Дивіться також

+ + diff --git a/files/uk/web/api/intersection_observer_api/index.html b/files/uk/web/api/intersection_observer_api/index.html new file mode 100644 index 0000000000..49a9ce1d06 --- /dev/null +++ b/files/uk/web/api/intersection_observer_api/index.html @@ -0,0 +1,610 @@ +--- +title: Intersection Observer API +slug: Web/API/Intersection_Observer_API +tags: + - API + - Clipping + - Intersection + - Intersection Observer API + - IntersectionObserver + - Overview + - Performance + - Reference + - Web + - Швидкодія +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 

+ +

Intersection Observer API дозволяє вказати функцію, яка буде викликана щоразу для елемента (target) при перетині його з областю видимості документа (по-замовчуванню) чи заданим елементом (root).

+ +

Зазвичай, використовується відстеження перетину елементу з областю видимості (необхідно вказати  null в якості кореневого елементу).

+ +

Чи використовуємо ми область видимості чи інший елемент в якості кореневого, API працює однаково, викликаючи задану вами функцію зворотнього виклику, щоразу, коли видимість цільового елементу змінюється так, що вона перетинає в потрібному ступені кореневий елемент.

+ +

Ступінь перетину цільового і кореневого елементу задається в діапазоні від 0.0 до 1.0, де 1.0 це повний перетин цільовим елементом кордонів кореневого.

+ +

Створення intersection observer

+ +

Для початку з допомогою конструктору потрібно створити об'єкт-спостерігач, вказати для нього функцію для виклику і налаштування відстеження:

+ +
let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);
+
+ +

Параметр threshold зі значенням 1.0 означає що функція буде викликана при 100% перетину об'єкта (за яким ми стежимо) з об'єктом root.

+ +

Налаштування Intersection observer

+ +

The options object passed into the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor let you control the circumstances under which the observer's callback is invoked. It has the following fields:

+ +
+
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]. Дефолтне значення 0 (як тільки хоча б один піксель стане видимим, то буде викликаний колбек). Значення 1.0 означає, що увесь елемент повністю має стати видимим перед тим, як буде викликано колбек.
+
+ +

Цільовий елемент, який буде спостерігатися

+ +

Після того, як ви створили спостерігача, вам потрібно дати йому цільовий елемент для перегляду:

+ +
let target = document.querySelector('#listItem');
+observer.observe(target);
+
+// the callback we setup for the observer will be executed now for the first time
+// it waits until we assign a target to our observer (even if the target is currently not visible)
+
+ +

Щоразу, коли ціль досягає порогового значення, вказаного для IntersectionObserver, викликається функція зворотнього виклику callback. Де callback отримує список об'єктів IntersectionObserverEntry і спостерігача:

+ +
let callback = (entries, observer) => {
+  entries.forEach(entry => {
+    // Each entry describes an intersection change for one observed
+    // target element:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+
+ +

Зверніть увагу, що функція зворотнього виклику запускається в головному потоці і повинна виконуватися якнайшвидше, тому якщо щось забирає багато часу, то використовуйте {{domxref("Window.requestIdleCallback()")}}.

+ +

Також зверніть увагу, що якщо ви вказали опцію root, цільовий елемент повинен бути потомком кореневого елементу. 

+ +

How intersection is calculated

+ +

All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. Similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element.

+ +

It's useful to understand a bit about how the various properties provided by {{domxref("IntersectionObserverEntry")}} describe an intersection.

+ +

The intersection root and root margin

+ +

Before we can track the intersection of an element with a container, we need to know what that container is. That container is the intersection root, or root element. This can be either a specific element in the document which is an ancestor of the element to be observed, or null to use the document's viewport as the container.

+ +

The root intersection rectangle is the rectangle used to check against the target or targets. This rectangle is determined like this:

+ + + +

The root intersection rectangle can be adjusted further by setting the root margin, rootMargin, when creating the {{domxref("IntersectionObserver")}}. The values in rootMargin define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed).

+ +

Thresholds

+ +

Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses thresholds. When you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. Then, the API only reports changes to visibility which cross these thresholds.

+ +

For example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. You can tell which direction the visibility changed in (that is, whether the element became more visible or less visible) by checking the value of the {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} property on the {{domxref("IntersectionObserverEntry")}} passed into the callback function at the time of the visibility change. If isIntersecting is true, the target element has become at least as visible as the threshold that was passed. If it's false, the target is no longer as visible as the given threshold.

+ +

To get a feeling for how thresholds work, try scrolling the box below around. Each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. Each box has a different set of thresholds:

+ + + + + +

{{EmbedLiveSample("Threshold_example", 500, 500)}}

+ +

Clipping and the intersection rectangle

+ +

The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.

+ +
    +
  1. The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.
    2. +
  2. Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting overflow to anything but visible causes clipping to occur.
    3. +
  3. If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <iframe> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.
    4. +
  4. When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.
    5. +
  5. The resulting rectangle is then updated by intersecting it with the root intersection rectangle.
    6. +
  6. This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.
    7. +
+ +

Intersection change callbacks

+ +

When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of IntersectionObserverEntry objects, one for each threshold which was crossed, and a reference to the IntersectionObserver object itself.

+ +

Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.

+ +

The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%.

+ +
intersectionCallback(entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio >= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+
+ +

Інтерфейси

+ +
+
{{domxref("IntersectionObserver")}}
+
Основний інтерфейс для API Intersection Observer. Надає методи для створення і керування observer, який може спостерігати будь-яку кількість цільових елементів для однієї і тієї ж конфігурації перетину. Кожен observer може асинхронно спостерігати зміни в перетині між одним чи кількома цільовими елементами і спільним елементом-батьком чи з їх верхнім рівнем Document's viewport. Батько чи область перегляду згадується як root.
+
{{domxref("IntersectionObserverEntry")}}
+
+

Описує перетин між цільовим елементом і його кореневим контейнером в певний момент переходу. Об'єкти цього типу можуть бути отримані тільки двома способами: в якості вхідних даних для вашого зворотнього виклику IntersectionObserver чи шляхом виклику {{domxref("IntersectionObserver.takeRecords()")}}.

+
+
+ +

A simple example

+ +

This simple example causes a target element to change its color and transparency as it becomes more or less visible. At Timing element visibility with the Intersection Observer API, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..

+ +

HTML

+ +

The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID "box") and some contents within the box.

+ +
<div id="box">
+  <div class="vertical">
+    Welcome to <strong>The Box!</strong>
+  </div>
+</div>
+ +

CSS

+ +

The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in CSS transitions, which we'll use to affect the changes to the element as it becomes more or less obscured.

+ +
#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}
+ +

JavaScript

+ +

Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.

+ +

Setting up

+ +

First, we need to prepare some variables and install the observer.

+ +
const numSteps = 20.0;
+
+let boxElement;
+let prevRatio = 0.0;
+let increasingColor = "rgba(40, 40, 190, ratio)";
+let decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up
+window.addEventListener("load", (event) => {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);
+ +

The constants and variables we set up here are:

+ +
+
numSteps
+
A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.
+
prevRatio
+
This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.
+
increasingColor
+
A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.
+
decreasingColor
+
Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.
+
+ +

We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID "box" using {{domxref("Document.querySelector", "querySelector()")}}, then call the createObserver() method we'll create in a moment to handle building and installing the intersection observer.

+ +

Creating the intersection observer

+ +

The createObserver() method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.

+ +
function createObserver() {
+  let observer;
+
+  let options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}
+ +

This begins by setting up an options object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so root is null. We need no margin, so the margin offset, rootMargin, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.

+ +

The list of visibility ratio thresholds, threshold, is constructed by the function buildThresholdList(). The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.

+ +

Once options is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, handleIntersect(), and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.

+ +

We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling observer.observe() for each of those elements, if we wanted to do so.

+ +

Building the array of threshold ratios

+ +

The buildThresholdList() function, which builds the list of thresholds, looks like this:

+ +
function buildThresholdList() {
+  let thresholds = [];
+  let numSteps = 20;
+
+  for (let i=1.0; i<=numSteps; i++) {
+    let ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}
+ +

This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value i/numSteps onto the thresholds array for each integer i between 1 and numSteps. It also pushes 0 to include that value. The result, given the default value of numSteps (20), is the following list of thresholds:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Ratio#Ratio
10.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0
+ +

We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.

+ +

Handling intersection changes

+ +

When the browser detects that the target element (in our case, the one with the ID "box") has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, handleIntersect():

+ +
function handleIntersect(entries, observer) {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}
+ +

For each {{domxref("IntersectionObserverEntry")}} in the list entries, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in increasingColor (remember, it's "rgba(40, 40, 190, ratio)"), replaces the word "ratio" with the entry's intersectionRatio. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.

+ +

Similarly, if the intersectionRatio is going down, we use the string decreasingColor and replace the word "ratio" in that with the intersectionRatio before setting the target element's background-color.

+ +

Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevRatio.

+ +

Result

+ +

Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.

+ +

{{EmbedLiveSample('A_simple_example', 400, 400)}}

+ +

There's an even more extensive example at Timing element visibility with the Intersection Observer API.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + + +
+
+
diff --git a/files/uk/web/api/mediaquerylist/addlistener/index.html b/files/uk/web/api/mediaquerylist/addlistener/index.html new file mode 100644 index 0000000000..f908e9cf49 --- /dev/null +++ b/files/uk/web/api/mediaquerylist/addlistener/index.html @@ -0,0 +1,82 @@ +--- +title: MediaQueryList.addListener() +slug: Web/API/MediaQueryList/addListener +tags: + - API + - MediaQueryList + - Довідка + - Медіа-запити + - метод +translation_of: Web/API/MediaQueryList/addListener +--- +
{{APIRef("CSSOM View")}}
+ +

Метод addListener() інтерфейсу {{domxref("MediaQueryList")}} додає слухача до MediaQueryListener, який викличе вказану функцію щойно стан медіа-запиту зміниться.

+ +

Цей метод є простим скороченням для {{domxref("EventTarget.addEventListener()")}} задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати addListener замість addEventListener, тоді як в нових MediaQueryList просто успадковує EventTarget.

+ +

Синтаксис

+ +
MediaQueryList.addListener(func)
+ +

Параметри

+ +
+
func
+
Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт {{domxref("MediaQueryListListener")}}, а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт події {{domxref("MediaQueryListEvent")}} успадковано від {{domxref("Event")}}.
+
+ +

Вертає

+ +

Нічого.

+ +

Приклади

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    // Вікно є вужчим за 600 пікселів (або ж точно 600)
+    para.textContent = 'Маємо вузький екран, щонайбільше 600px';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    // Вікно є ширшим за 600 пікселів
+    para.textContent = 'Маємо широкий екран — понад 600px завширшки';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусПримітка
{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}{{Spec2("CSSOM View")}}Початкова виознака
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("api.MediaQueryList.addListener")}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/mediaquerylist/index.html b/files/uk/web/api/mediaquerylist/index.html new file mode 100644 index 0000000000..7e22ce652e --- /dev/null +++ b/files/uk/web/api/mediaquerylist/index.html @@ -0,0 +1,109 @@ +--- +title: MediaQueryList +slug: Web/API/MediaQueryList +tags: + - API + - CSSOM View + - Interface + - MediaQueryList + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/MediaQueryList +--- +
{{APIRef("CSSOM View")}} {{SeeCompatTable}}
+ +

A MediaQueryList object stores information on a media query applied to a document, and handles sending notifications to listeners when the media query state change (i.e. when the media query test starts or stops evaluating to true).

+ +

This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.

+ +

Properties

+ +

The new version of the MediaQueryList interface inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaQueryList.matches")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that returns true if the {{domxref("document")}} currently matches the media query list, or false if not.
+
{{domxref("MediaQueryList.media")}} {{readonlyInline}}
+
A {{domxref("DOMString")}} representing a serialized media query.
+
+ +

Event handlers

+ +
+
{{domxref("MediaQueryList.onchange")}}
+
An event handler property representing a function that is invoked when the {{event("change")}} event fires, i.e when the status of media query support changes. The event object is a {{domxref("MediaQueryListEvent")}} instance, which is recognised as a MediaListQuery instance in older browsers, for backwards compatibility purposes.
+
+ +

Methods

+ +

The new version of the MediaQueryList interface inherits methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaQueryList.addListener()")}}
+
Adds a listener to the MediaQueryListener that will run a custom callback function in response to the media query status changing. This is basically an alias for {{domxref("EventTarget.addEventListener()")}}, for backwards compatibility purposes.
+
{{domxref("MediaQueryList.removeListener()")}}
+
Removes a listener from the MediaQueryListener. This is basically an alias for {{domxref("EventTarget.removeEventListener()")}}, for backwards compatibility purposes.
+
+ +
+
+ +

Examples

+ +

This simple example creates a MediaQueryList and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page.

+ +
var para = document.querySelector('p');
+
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+ +
+

Note: You can find this example on GitHub (see the source code, and also see it running live).

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/uk/web/api/network_information_api/index.html b/files/uk/web/api/network_information_api/index.html new file mode 100644 index 0000000000..0afabb53ad --- /dev/null +++ b/files/uk/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}}

+ +

Network Information API надає інформацію про мережеве підключення в загальних термінах ('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("Тип підключення було змінено з " + type + " на " + connection.effectiveType);
+  type = connection.effectiveType;
+}
+
+connection.addEventListener('change', updateConnectionStatus);
+
+ +

Попереднє завантаження великих ресурсів

+ +

Об'єкт підключення {{domxref ("Navigator.connection")}} корисний для визначення необхідності попереднього завантажування ресурсів, що мають великий розмір. Перевірка типу підключення буде викликана незабаром після завантаження сторінки. Якщо з'єднання визначено як стільниковий зв’язок, то прапорець preloadVideo буде встановлено у значення false. Для простоти та наочності цей приклад перевіряє лише один тип підключення. На практиці використовується оператор switch або інший метод для перевірки всіх можливих значень {{domxref ("NetworkInformation.type")}}. Незалежно від значення type ви можете оцінити швидкість з'єднання через властивість {{domxref ("NetworkInformation.effectiveType")}}.

+ +
let preloadVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    preloadVideo = false;
+  }
+}
+ +

Інтерфейси

+ +
+
{{domxref("NetworkInformation")}}
+
Надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує сповіщення, якщо тип з’єднання змінюється. Інтерфейс NetworkInformation  не може бути створено як екземпляр. Натомість доступ до нього здійснюється через інтерфейс {{domxref ("Navigator")}}.
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Initial specification
+ +

Сумісність

+ +

NetworkInformation

+ + + +

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

+ + + + + +

{{Compat("api.Navigator.connection")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/api/networkinformation/index.html b/files/uk/web/api/networkinformation/index.html new file mode 100644 index 0000000000..f1bff837d6 --- /dev/null +++ b/files/uk/web/api/networkinformation/index.html @@ -0,0 +1,88 @@ +--- +title: NetworkInformation +slug: Web/API/NetworkInformation +translation_of: Web/API/NetworkInformation +--- +
{{APIRef("Network Information API")}}{{SeeCompatTable}}
+ +

Інтерфейс NetworkInformation надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує засоби для сповіщень, якщо тип підключення змінюється. Інтерфейс NetworkInformation не може бути створено як екземпляр. Натомість доступ до нього здійснюється через властивість з'єднання інтерфейсу {{domxref("Navigator")}}.

+ +

{{AvailableInWorkers}}

+ +

Властивості

+ +

Цей інтерфейс також успадковує властивості свого батьківського елементу, {{domxref("EventTarget")}}.

+ +
+
+
    +
+
+
{{domxref("NetworkInformation.downlink")}} {{readonlyinline}}
+
Повертає приблизне значення ефективної пропускної здатності в мегабітах в секунду. Значення округлено до найближчого кратного до 25 кілобіт на секунду.
+
{{domxref("NetworkInformation.downlinkMax")}} {{readonlyinline}}
+
Повертає максимальну швидкість, в мегабітах в секунду (Mbps), для поточного з'єднання.
+
{{domxref("NetworkInformation.effectiveType")}} {{readonlyinline}}
+
Повертає діючий тип з'єднання в значенні 'slow-2g', '2g', '3g', або '4g'.
+
{{domxref("NetworkInformation.rtt")}} {{readonlyinline}}
+
Повертає оцінку часу зворотного зв'язку (RTT) поточного з'єднання, округлену до найближчого кратного до 25 мілісекунд.
+
{{domxref("NetworkInformation.saveData")}} {{readonlyinline}}
+
Повертає true, якщо користувач встановив параметр зменшеного використання даних.
+
{{domxref("NetworkInformation.type")}} {{readonlyinline}}
+
Повертає тип підключення, яке використовує пристрій для зв’язку з мережею. Існуючі значення: +
    +
  • bluetooth
    • +
  • cellular
    • +
  • ethernet
    • +
  • none
    • +
  • wifi
    • +
  • wimax
    • +
  • other
    • +
  • unknown
    • +
+
+
+ +

Обробники подій

+ +
+
{{domxref("NetworkInformation.onchange")}}
+
Подія, яка запускається, коли змінюється інформація про з’єднання, і {{event("change")}} запускається на цьому об’єкті.
+
+ +

Методи

+ +

Цей інтерфейс також успадковує властивості свого батьківського елементу, {{domxref("EventTarget")}}.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('Network Information', '#networkinformation-interface', 'NetworkInformation')}}{{Spec2('Network Information')}}Initial definition
+ +

Сумісність

+ + + +

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

+ +

Дивіться також

+ + diff --git a/files/uk/web/api/node/contains/index.html b/files/uk/web/api/node/contains/index.html new file mode 100644 index 0000000000..db187f1462 --- /dev/null +++ b/files/uk/web/api/node/contains/index.html @@ -0,0 +1,112 @@ +--- +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")}}, яке вказує, чи переданий вузол є нащадком заданого вузла чи ні.

+ +

Синтаксис

+ +
node.contains( otherNode )
+
+ +

Приклад

+ +

Ця функція перевіряє, чи елемент знаходиться в тілі сторінки. А також визначає чи тіло сторінки включає само себе. Якщо включає само себе, то відповідно метод isInPage буде повертати false. В іншому випадку буде повертатися true або false в залежності від того, чи елемент існує всередині тіла сторінки.

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Початкове визначення
+ +

Сумісність із браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобливістьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}5.0[1]{{CompatVersionUnknown}}3.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобливістьAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer лише підтримує метод contains() для елементів.

+ +

[2] Safari 2.x реалізувала метод contains() неправильно.

+ +

Дивитися також

+ + diff --git a/files/uk/web/api/node/index.html b/files/uk/web/api/node/index.html new file mode 100644 index 0000000000..9fc5be13f4 --- /dev/null +++ b/files/uk/web/api/node/index.html @@ -0,0 +1,508 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

+ +

The following interfaces all inherit from Node its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. +
+

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the https://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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
+
+
{{domxref("Node.nodeValue")}}
+
Returns / Sets the value of the current node
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.rootNode")}} {{readOnlyInline}}
+
Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This is found by walking backward along {{domxref("Node.parentNode")}} until the top is reached.
+
{{domxref("Node.textContent")}}
+
Returns / Sets the textual content of an element and all its descendants.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Adds the specified childNode argument as the last child to the current node.
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
{{domxref("Node.contains()")}}
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
{{domxref("Node.getRootNode()")}}
+
Returns the context objects root which optionally includes the shadow root if it is available. 
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
{{domxref("Node.isEqualNode()")}}
+
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
+
{{domxref("Node.isSameNode()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.lookupPrefix()")}}
+
{{domxref("Node.lookupNamespaceURI()")}}
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
+ +

Examples

+ +

Browse all child nodes

+ +

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntax

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

+ +

Parameters

+ +
+
parentNode
+
The parent node (Node Object).
+
callbackFunction
+
The callback function (Function).
+
+ +

Sample usage

+ +

The following example send to the console.log the text content of the body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + {{CompatNo}}{{CompatGeckoDesktop("22.0")}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getFeature(){{obsolete_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ Removed in {{CompatGeckoDesktop("10")}}
+ Returned in {{CompatGeckoDesktop("48")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("22.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
rootNode(){{CompatUnknown}}{{CompatUnknown}}CompatGeckoDesktop(48)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
namespaceURI, localName, prefix {{obsolete_inline}}{{CompatVersionUnknown}}
+ {{CompatNo}}46.0[3]		{{CompatUnknown}}{{CompatVersionUnknown}}
+ {{CompatNo}}48.0[3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
getRootNode{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(41)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getFeature(){{obsolete_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
isSameNode(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}} +

{{CompatGeckoDesktop("1.0")}}
+ Removed in {{CompatGeckoDesktop("10")}}
+ Returned in {{CompatGeckoDesktop("48")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
rootNode(){{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
namespaceURI, localName, prefix {{obsolete_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+ {{CompatNo}}48.0[3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
getRootNode(){{CompatNo}}{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(41)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

[1] WebKit and old versions of Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

+ +

[2] In Gecko 22.0 {{geckoRelease("22.0")}} the attributes property was moved to {{domxref("Element")}}.

+ +

[3] The properties were moved to the {{domxref("Element")}} and {{domxref("Attr")}} APIs according to the DOM4 standard.

diff --git a/files/uk/web/api/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/index.html new file mode 100644 index 0000000000..897a97a97a --- /dev/null +++ b/files/uk/web/api/promiserejectionevent/index.html @@ -0,0 +1,95 @@ +--- +title: PromiseRejectionEvent +slug: Web/API/PromiseRejectionEvent +tags: + - API + - HTML DOM + - Interface + - JavaScript + - PromiseRejectionEvent + - Promises + - Reference + - events + - події + - проміси +translation_of: Web/API/PromiseRejectionEvent +--- +
{{APIRef("HTML DOM")}}
+ +

Інтерфейс PromiseRejectionEvent відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript {{jsxref("Promise")}} відхиляються. Ці події особливо корисні для цілей телеметрії та налагоджування.

+ +

Щоб дізнатись більше про події відхилення промісів, дивіться {{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}.

+ +

Конструктор

+ +
+
{{domxref("PromiseRejectionEvent.PromiseRejectionEvent", "PromiseRejectionEvent()")}}
+
Створює подію PromiseRejectionEvent, отримуючи тип події (unhandledrejection або rejectionhandled) та інші деталі.
+
+ +

Властивості

+ +

Також успадковує властивості від батьківського інтерфейсу {{domxref("Event")}}.

+ +
+
{{domxref("PromiseRejectionEvent.promise")}} {{readonlyInline}}
+
Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений.
+
{{domxref("PromiseRejectionEvent.reason")}} {{readOnlyInline}}
+
Значення чи {{jsxref("Object","об'єкт")}}, що вказує причину відхилення проміса, як вона передається у {{jsxref("Promise.відхилено","Promise.reject()")}}.
+
+ +

Методи

+ +

Цей інтерфейс не має унікальних методів; він успадковує методи від батьківського інтерфейсу {{domxref("Event")}}.

+ +

Події

+ +
+
rejectionhandled
+
Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, і після того, як відхилення було оброблене кодом для обробки відхилення проміса.
+
unhandledrejection
+
Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, але немає обробника, який зреагував би на відхилення.
+
+ +

Приклади

+ +

Цей простий приклад перехоплює необроблені відхилення промісів та логує їх з метою відлагодження.

+ +
window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#promiserejectionevent', 'PromiseRejectionEvent')}}{{ Spec2('HTML WHATWG') }}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/api/promiserejectionevent/promise/index.html b/files/uk/web/api/promiserejectionevent/promise/index.html new file mode 100644 index 0000000000..a9874092ad --- /dev/null +++ b/files/uk/web/api/promiserejectionevent/promise/index.html @@ -0,0 +1,76 @@ +--- +title: PromiseRejectionEvent.promise +slug: Web/API/PromiseRejectionEvent/promise +tags: + - API + - HTML DOM + - JavaScript + - Promise + - PromiseRejectionEvent + - Властивість + - Проміс + - події +translation_of: Web/API/PromiseRejectionEvent/promise +--- +
{{APIRef("HTML DOM") }}
+ +

Властивість promise інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, вказує об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений. Ви можете дослідити властивість події {{domxref("PromiseRejectionEvent.reason")}}, щоб дізнатись, чому проміс був відхилений.

+ +

Синтаксис

+ +
promise = PromiseRejectionEvent.promise
+ +

Значення

+ +

Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений, і чиє відхилення пройшло необробленим.

+ +

Приклади

+ +

Цей приклад прослуховує необроблені проміси, і, якщо властивість {{domxref("PromiseRejectionEvent.reason", "reason")}} є об'єктом з полем code, що містить текст "Модуль не готовий", він встановлює функцію зворотного виклику, що виконується під час неактивності переглядача, яка буде повторно запускати невиконану задачу, щоб виконати її правильно.

+ +

Метод {{domxref("event.preventDefault()")}} викликається, щоб зазначити, що проміс тепер був оброблений.

+ +
window.onunhandledrejection = function(event) {
+  if (event.reason.code && event.reason.code == "Модуль не готовий") {
+    window.requestIdleCallback(function(deadline) {
+      loadModule(event.reason.moduleName)
+        .then(performStartup);
+    });
+    event.preventDefault();
+  }
+}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-promise', 'PromiseRejectionEvent.promise')}}{{ Spec2('HTML WHATWG') }}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.PromiseRejectionEvent.promise")}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html new file mode 100644 index 0000000000..a7ae3616a8 --- /dev/null +++ b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html @@ -0,0 +1,89 @@ +--- +title: PromiseRejectionEvent() +slug: Web/API/PromiseRejectionEvent/PromiseRejectionEvent +tags: + - API + - HTML DOM + - JavaScript + - Promise + - PromiseRejectionEvent + - Конструктор + - Проміс + - події +translation_of: Web/API/PromiseRejectionEvent/PromiseRejectionEvent +--- +
{{APIRef("HTML DOM")}}
+ +

Конструктор PromiseRejectionEvent() створює та вертає {{domxref("PromiseRejectionEvent")}}, що відображає події, запущені, коли об'єкт JavaScript {{jsxref("Promise")}} був відхилений. З подіями відхилення промісів стає можливим виявляти та повідомляти про проміси, чиє неуспішне завершення пройшло непоміченим. Також стає легше писати глобальні обробники для помилок.

+ +

Існують два типи подій PromiseRejectionEvent: unhandledrejection надсилається середовищем виконання JavaScript, коли проміс був відхилений, але відхилення не було оброблене. Подія rejectionhandled видається, якщо проміс був відхилений, але відхилення було перехоплене обробником відхилень.

+ +

Синтаксис

+ +
promiseRejectionEvent = PromiseRejectionEvent(type, options);
+
+ +

Параметри

+ +

Конструктор PromiseRejectionEvent() також успадковує параметри від {{domxref("Event.Event", "Event()")}}.

+ +
+
type
+
Рядок, що відображає ім'я типу події PromiseRejectionEvent. Він чутливий до регістру, і повинен мати значення "rejectionhandled" або "unhandledrejection", щоб відповідати іменам можливих (не штучно створених) подій {{domxref("PromiseRejectionEvent")}}, які можуть запустити програмні агенти).
+
options
+
{{jsxref("Object","Об'єкт")}}, що визначає деталі відхилення: +
+
promise
+
{{jsxref("Promise","Проміс")}}, що був відхилений.
+
reason
+
Будь-яке значення чи {{jsxref("Object","об'єкт")}}, що відображає причину відхилення проміса. Це може бути що завгодно, від числового коду помилки, до помилки {{domxref("DOMString")}} та об'єкта, який містить детальну інформацію, що описує ситуацію, яка призвела до відхилення проміса.
+
+
+
+ +

Значення, що повертається

+ +

Нова подія PromiseRejectionEvent, що має конфігурацію, визначену параметрами.

+ +

Приклади

+ +

Цей приклад створює нову подію unhandledrejection для проміса myPromise з причиною-рядком "Мій будинок горить". Параметр reason (причина) міг так само легко бути числом, чи навіть об'єктом з детальною інформацією, що містить адрес будинку, чи опис того, наскільки сильний вогонь, і номер телефону людини, яку потрібно повідомити.

+ +
let myRejectionEvent = new PromiseRejectionEvent("unhandledrejection", {
+  promise : myPromise,
+  reason : "Мій будинок горить"
+});
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', '#the-promiserejectionevent-interface', 'the PromiseRejectionEvent interface')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

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

+ +

Див. також

+ + diff --git a/files/uk/web/api/promiserejectionevent/reason/index.html b/files/uk/web/api/promiserejectionevent/reason/index.html new file mode 100644 index 0000000000..b12a2480c1 --- /dev/null +++ b/files/uk/web/api/promiserejectionevent/reason/index.html @@ -0,0 +1,66 @@ +--- +title: PromiseRejectionEvent.reason +slug: Web/API/PromiseRejectionEvent/reason +tags: + - API + - HTML DOM + - JavaScript + - Promise + - PromiseRejectionEvent + - reason + - Властивість + - Проміс + - події +translation_of: Web/API/PromiseRejectionEvent/reason +--- +

{{APIRef("HTML DOM")}}

+ +

Властивість reason інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, є будь-яким значенням JavaScript чи {{jsxref("Object","об'єктом")}}, що надає причину, яка передається у {{jsxref("Promise.відхилено","Promise.reject()")}}. Це, в теорії, надає інформацію щодо причини відхилення проміса.

+ +

Синтаксис

+ +
reason = PromiseRejectionEvent.reason
+ +

Значення

+ +

Значення або об'єкт, що надає інформацію, якою ви можете скористатись, щоб зрозуміти, чому був відхилений проміс. Це може бути що завгодно, від коду помилки до об'єкта з текстом, посиланнями та всім, що ви захочете в нього додати.

+ +

Приклади

+ +
window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#dom-promiserejectionevent-reason', 'PromiseRejectionEvent.reason')}}{{ Spec2('HTML WHATWG') }}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.PromiseRejectionEvent.reason")}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/svganimatedstring/animval/index.html b/files/uk/web/api/svganimatedstring/animval/index.html new file mode 100644 index 0000000000..46f2c2a3d2 --- /dev/null +++ b/files/uk/web/api/svganimatedstring/animval/index.html @@ -0,0 +1,44 @@ +--- +title: SVGAnimatedString.animVal +slug: Web/API/SVGAnimatedString/animVal +translation_of: Web/API/SVGAnimatedString/animVal +--- +

{{APIRef("SVG")}}

+ +

Атрибут AnimVal або властивість animVal містить те саме значення, що і властивість baseVal. Якщо атрибут або властивість анімований, він буде містити поточне анімоване значення атрибута або властивості. Якщо даний атрибут або властивість в даний час не анімовані, то він містить те саме значення, що і baseVal

+ +
+

Властивість animVal доступна лише для зчитування значення. Internet Explorer 9 підтримує анімацію SVG, але не підтримує анімацію SVG на основі декларативних баз даних. В результаті, властивість animVal містить те саме значення, що і властивість baseVal.

+
+ +

Синтакс

+ +
var = object.animVal
+ +

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

+ + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментарі
{{SpecName('SVG1.1', 'types.html#__svg__SVGAnimatedString__animVal')}}{{Spec2('SVG1.1')}} 
{{SpecName('SVG2', 'types.html#__svg__SVGAnimatedString__animVal')}}{{Spec2('SVG2')}} 
+ +

Сумісність браузерів

+ + + +

{{Compat("api.SVGAnimatedString.animVal")}}

diff --git a/files/uk/web/api/svganimatedstring/index.html b/files/uk/web/api/svganimatedstring/index.html new file mode 100644 index 0000000000..bca995b90e --- /dev/null +++ b/files/uk/web/api/svganimatedstring/index.html @@ -0,0 +1,60 @@ +--- +title: SVGAnimatedString +slug: Web/API/SVGAnimatedString +tags: + - API + - NeedsExample + - NeedsTranslation + - Reference + - Référence(2) + - SVG + - SVG DOM + - TopicStub +translation_of: Web/API/SVGAnimatedString +--- +
{{APIRef("SVG")}}
+ +
 
+ +

The SVGAnimatedString interface represents string attributes which can be animated from each SVG declaration. You need to create SVG attribute before doing anything else, everything should be declared inside this.

+ +

Properties

+ +
+
{{domxref("SVGAnimatedString.animVal")}} {{readonlyInline}}
+
This is a {{domxref("DOMString")}} representing the animation value. If the given attribute or property is being animated it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as baseVal.
+
{{domxref("SVGAnimatedString.baseVal")}}
+
This is a {{domxref("DOMString")}} representing the base value. The base value of the given attribute before applying any animations. Setter throws DOMException.
+
+ +

Methods

+ +

The SVGAnimatedString interface do not provide any specific methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG1.1', '#InterfaceSVGAnimatedString')}}{{Spec2('SVG1.1')}} 
{{SpecName('SVG2', 'types.html#InterfaceSVGAnimatedString')}}{{Spec2('SVG2')}} 
+ +

Browser compatibility

+ + + +

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

diff --git a/files/uk/web/api/urlsearchparams/index.html b/files/uk/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..78ab36b8e8 --- /dev/null +++ b/files/uk/web/api/urlsearchparams/index.html @@ -0,0 +1,171 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

URLSearchParams інтерфейс визначає корисні методи для роботи з довгими текстовими URL.

+ +

Об'єктна реалізація URLSearchParams може використовуватись напряму в {{jsxref("Statements/for...of", "for...of")}} структурі, замість {{domxref('URLSearchParams.entries()', 'entries()')}}: for (var p of mySearchParams) що еквівалентно до for (var p of mySearchParams.entries()).

+ +

Конструктор

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
Конструктор вертає URLSearchParams об'єкт.
+
+ +

Properties

+ +

This interface doesn't inherit any property.

+ +

Методи

+ +

Інтерфейс на наслідує ніяких методів

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Appends a specified key/value pair as a new search parameter.
+
{{domxref("URLSearchParams.delete()")}}
+
Deletes the given search parameter, and its associated value, from the list of all search parameters.
+
{{domxref("URLSearchParams.entries()")}}
+
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.
+
{{domxref("URLSearchParams.get()")}}
+
Returns the first value associated to the given search parameter.
+
{{domxref("URLSearchParams.getAll()")}}
+
Returns all the values association with a given search parameter.
+
{{domxref("URLSearchParams.has()")}}
+
Returns a {{jsxref("Boolean")}} indicating if such a search parameter exists.
+
{{domxref("URLSearchParams.keys()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.
+
{{domxref("URLSearchParams.set()")}}
+
Sets the value associated to a given search parameter to the given value. If there were several values, delete the others.
+
{{domxref("URLSearchParams.toString()")}}
+
Returns a string containg a query string suitable for use in a URL.
+
{{domxref("URLSearchParams.values()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.
+
+ +

Example

+ +
var paramsString = "q=URLUtils.searchParams&topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Iterate the search parameters.
+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"
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(49)}}{{CompatGeckoDesktop("29.0")}}{{CompatNo}}36{{CompatNo}}
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatGeckoDesktop("44.0")}}{{CompatNo}}36{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(49)}}
entries(), keys(), values(), and support of for...of{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("44.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(49)}}
+
+ +

See also

+ + + +
+
diff --git a/files/uk/web/api/web_workers_api/index.html b/files/uk/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..a22a63cd93 --- /dev/null +++ b/files/uk/web/api/web_workers_api/index.html @@ -0,0 +1,215 @@ +--- +title: Web Workers API +slug: Web/API/Web_Workers_API +translation_of: Web/API/Web_Workers_API +--- +

{{DefaultAPISidebar("Web Workers API")}}

+ +

Web Workers це механізм, який дозволяє запускати скрипові операції  у фоновому потоці, окремо від основного діючого потоку web-додатку. Перевага цього методу в тому, що трудоміські процеси можуть виконуватися в окромому потоці, дозволяючи основному (зазвичай UI) потоку працювати без блокування/сповільнення.

+ +

Концепція та використання Web Workers

+ +

Worker це об'єкт, який створюється з використанням конструктору (e.g. {{domxref("Worker.Worker", "Worker()")}}), який запускає вказаний JavaScript-файл — файл, який містить код, що буде запущений у робочому потоці; workers запускаються у іншому глобальному контексті, який не є поточним {{domxref("window")}}. Цей контекст представляюється об'єктом  {{domxref("DedicatedWorkerGlobalScope")}} у разі виділеного workers (стандартний workers, які використовуються одним сценарієм; загальні workers використовують {{domxref("SharedWorkerGlobalScope")}}).

+ +

У потоці workers можна запускати будь-який код з невеликкими винятками. Наприклад, не можна напряму маніпулювати DOM з worker або використовувати деякі стандартні методи та властивості об'єкту {{domxref("window")}}, але можна використовувати велику кількість речей, доступних з window, включаючи WebSockets, та механізми зберігання даних, як IndexedDB та Firefox OS-only Data Store API.  Дивіться Функції та класи, доступні для workers для більшої детальності.

+ +

Дані передаються між workers та основним потоком за допомогою системи сповіщення — обидві сторони пересилають свої сповіщення, використовуючи методи postMessage(), та відповідаюсь через обробник подій onmessage (повідомлення містится всепредині атрибутів даних {{event("Message")}} ). Дані копіюються, а не поширюються.

+ +

Workers можуть в свою чергу породжувати нові workers, за умови, що ці workers будуть розміщуватися в межах однієї й тієї ж самої сорінки, що й батьківський worker.  На додаток, workers можуть використовувати XMLHttpRequest для мережевого В/В, за винятком того, що responseXML та channel атрибути XMLHttpRequest завжди повертають null.

+ +

Окрім виділених workers, є й інши типи:

+ + + +
+

Примітка: Згіздно з Web workers Spec, події помилок worker не повинні вспливати (дивіться {{bug(1188141)}}. Це було реалізовано у Firefox 42.

+
+ +

Інтерфейси Web Worker

+ +
+
{{domxref("AbstractWorker")}}
+
Абстрактні властивості та методи, загальні для всіх видів workers ({{domxref("Worker")}} або {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Представляє собою діючий поток worker, дозволяючи передавати сповіщення запущеному коду worker.
+
{{domxref("SharedWorker")}}
+
Представляє собою специфічний вид worker, який може бути доступний з декількох контекстів браузерів, будучи декількома вікнами, iframes або іншими workers.
+
{{domxref("WorkerGlobalScope")}}
+
Представляє собою загальний scope будь-якого worker (виконуючи ту ж роботу, що й {{domxref("Window")}} для звичайного контенту web). Різні види worker мають об'єкт scope, який наслідується з цього інерфейсу та додає більше специфічних особливостей.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Представляє собою scope виділеного worker, наслудуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі  особливості.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Представляє собою scope загального worker, наслідуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.
+
{{domxref("WorkerNavigator")}}
+
Представляє собою ідентифікатор та стан користувача (клієнта):
+
+ +

Приклади

+ +

Ми створили декілька простих прикладів, щоб показати основне вікористання:

+ + + +

Ви можете знайти більше інформації як працюють ці демо у Використання web workers.

+ +

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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
+ +

Сумісність з браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatGeckoDesktop(1.9.1)}}10.010.64
Shared workers4{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Passing data using structured cloning13{{CompatGeckoDesktop(8)}}10.011.56
Passing data using  transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[1]
+ 23		{{CompatGeckoDesktop(21)}}11156[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Shared workers{{CompatNo}}4291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using  transferable objects{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] As webkitURL.

+ +

See also

+ + diff --git a/files/uk/web/api/webgl_api/index.html b/files/uk/web/api/webgl_api/index.html new file mode 100644 index 0000000000..078414deeb --- /dev/null +++ b/files/uk/web/api/webgl_api/index.html @@ -0,0 +1,238 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL + - Графіка + - Детально + - Медіа +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 {{HTMLElement("canvas")}} елементах.

+
+ +

Підтримка WebGL присутня в Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.

+ +

Елемент {{HTMLElement("canvas")}} також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.

+ +

Посилання

+ +

Стандартні інтерфейси

+ +
+ +
+ +

Розширення

+ +
+ +
+ +

Події

+ + + +

Константи і типи

+ + + +

Керівництва і навчальні сторінки

+ + + +

Детальні керівництва

+ + + +

Ресурси

+ + + +

Бібліотеки

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Початкове визначення. Базується на OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Будується поверх WebGL1. На основі OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Сумісність

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
ФункціяFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базова підтримка{{CompatGeckoDesktop("2.0")}}91112[1]5.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ФункціяFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Базова підтримка425[1]{{CompatNo}}12[1]8.1
+
+ +

[1] Реалізація цієї функції є експериментальною.

+ +

Зауваження по сумісності

+ +

На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я webgl, але старішим також потрібно experimental-webgl. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту webgl2.

+ +

Зауваження 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/uk/web/api/websocket/index.html b/files/uk/web/api/websocket/index.html new file mode 100644 index 0000000000..e2dac93e8c --- /dev/null +++ b/files/uk/web/api/websocket/index.html @@ -0,0 +1,330 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}{{SeeCompatTable}}
+ +

Об'єкт WebSocket надає API (інтерфейс) для створення і керування  WebSocket-з'єднаннями з сервером connection to a server, а також для надсилання і отримання повідомлень з даними.

+ +

Конструктор WebSocket приймає один обов'язковий і один опціональний параметр:

+ +
new WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+ +
+
url
+
Це адреса URL, до якої треба підключитись. Тобто адреса, з якої буде відповідати WebSocket на сервері.
+
protocols {{optional_inline}}
+
Це один протокол або масив протоколів. Протокол - це текст. Ці протоколи потрібні, щоб вказати під-протоколи, щоб один сервер міг виконувати декілька під-протоколів WebSocket (на приклад, вам потрібен сервер, який здатний працювати з різними типами взаємодій залежно від протоколу). Якщо ви не вкажете протокол, то WebSocket буде вважати, що отримав пустий рядок.
+
+ +

Конструктор може повертати помилки. На прикладі нижче помилка про "порт, до якого була спроба підключитися, був заблокований":

+ +
+
SECURITY_ERR
+
The port to which the connection is being attempted is being blocked.
+
+ +

Method overview

+ + + + + + + + + + +
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
+ +

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
binaryType{{DOMXref("DOMString")}}A string indicating the type of binary data being transmitted by the connection. This should be either "blob" if DOM {{domxref("Blob")}} objects are being used or "arraybuffer" if {{jsxref("ArrayBuffer")}} objects are being used.
bufferedAmountunsigned longThe number of bytes of data that have been queued using calls to {{manch("send")}} but not yet transmitted to the network. This value resets to zero once all queued data has been sent. This value does not reset to zero when the connection is closed; if you keep calling {{manch("send")}}, this will continue to climb. Read only
extensions{{DOMXref("DOMString")}}The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.
onclose{{domxref("EventListener")}}An event listener to be called when the WebSocket connection's readyState changes to CLOSED. The listener receives a CloseEvent named "close".
onerror{{domxref("EventListener")}}An event listener to be called when an error occurs. This is a simple event named "error".
onmessage{{domxref("EventListener")}}An event listener to be called when a message is received from the server. The listener receives a MessageEvent named "message".
onopen{{domxref("EventListener")}}An event listener to be called when the WebSocket connection's readyState changes to OPEN; this indicates that the connection is ready to send and receive data. The event is a simple one with the name "open".
protocol{{DOMXref("DOMString")}}A string indicating the name of the sub-protocol the server selected; this will be one of the strings specified in the protocols parameter when creating the WebSocket object.
readyStateunsigned shortThe current state of the connection; this is one of the {{anch("Ready state constants")}}. Read only.
url{{DOMXref("DOMString")}}The URL as resolved by the constructor. This is always an absolute URL. Read only.
+ +

Constants

+ +

Ready state constants

+ +

These constants are used by the readyState attribute to describe the state of the WebSocket connection.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
CONNECTING0The connection is not yet open.
OPEN1The connection is open and ready to communicate.
CLOSING2The connection is in the process of closing.
CLOSED3The connection is closed or couldn't be opened.
+ +

Methods

+ +

close()

+ +

Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing.

+ +
void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+
+ +

Parameters

+ +
+
code {{optional_inline}}
+
A numeric value indicating the status code explaining why the connection is being closed. If this parameter is not specified, a default value of 1000 (indicating a normal "transaction complete" closure) is assumed. See the list of status codes on the CloseEvent page for permitted values.
+
reason {{optional_inline}}
+
A human-readable string explaining why the connection is closing. This string must be no longer than 123 bytes of UTF-8 text (not characters).
+
+ +

Exceptions thrown

+ +
+
INVALID_ACCESS_ERR
+
An invalid code was specified.
+
SYNTAX_ERR
+
The reason string is too long or contains unpaired surrogates.
+
+ +
+

Note: In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.

+
+ +

send()

+ +

Transmits data to the server over the WebSocket connection.

+ +
void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+
+ +

Parameters

+ +
+
data
+
A text string to send to the server.
+
+ +

Exceptions thrown

+ +
+
INVALID_STATE_ERR
+
The connection is not currently OPEN.
+
SYNTAX_ERR
+
The data is a string that has unpaired surrogates.
+
+ +
+

Note: Gecko's implementation of the send() method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a boolean indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in {{Gecko("8.0")}}.

+ +

As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.

+
+ +

Example

+ +
// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server', event.data);
+});
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}{{Spec2("Websockets")}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use MozWebSocket(): var mySocket = new MozWebSocket("http://www.example.com/socketserver");

+ +

The extensions attribute was not supported in Gecko until Gecko 8.0.

+ +

Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the send() method were limited to 16 MB. They can now be up to 2 GB in size.

+ +

See also

+ + diff --git a/files/uk/web/api/window/confirm/index.html b/files/uk/web/api/window/confirm/index.html new file mode 100644 index 0000000000..61da2b0042 --- /dev/null +++ b/files/uk/web/api/window/confirm/index.html @@ -0,0 +1,69 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - API + - DOM + - Window + - confirm + - Посилання + - метод +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Метод Window.confirm() показує модальний діалог з необов’язковим текстом та двома кнопками, Так та Відміна.

+ +

Синтакс

+ +
result = window.confirm(message);
+
+ + + +

Приклад

+ +
if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+
+ +

Результат:

+ +

firefox confirm
+  

+ +

Нотатки

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.alertДіалоги є модальними вікнами - вони запобігають доступу користувача до іншої частини програмного інтерфейсу аж до моменту закриття діалогу. Саме тому ви не маєте занадто часто використовувати жодну функцію, яка створює діалоги (чи модальні вікна). В будь якому разі, є хороші підстави не використовувати діалоги для підтверджень.

+ +

Починаючи з Chrome {{CompatChrome(46.0)}} цей етод заблокований в межах {{htmlelement("iframe")}} доти, доки атрибут sandbox айфрейму не має значення allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} Цей аргумент є необов’язковим і не вимагається специфікацією.

+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}{{Spec2('HTML WHATWG')}} 
+ +

Дивіться також

+ + diff --git a/files/uk/web/api/window/console/index.html b/files/uk/web/api/window/console/index.html new file mode 100644 index 0000000000..bb1cc673b9 --- /dev/null +++ b/files/uk/web/api/window/console/index.html @@ -0,0 +1,56 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Property + - Read-only + - Window + - console + - Посилання +translation_of: Web/API/Window/console +--- +

{{ APIRef }}

+ +

Window.console — це незмінювана (read-only) властивість, що повертає посилання на об’єкт {{domxref("Console")}}, який надає методи для логування інформацію до консолі браузера. Ці методи призначені для відлагоджування і не мають використовуватися для передачі інформації кінцевому користувачу.

+ +

Синтакс

+ +
var consoleObj = window.console;
+
+ +

Приклад

+ +

Логування до консолі

+ +

Перший приклад відправляє текст до консолі браузера.

+ +
console.log("An error occurred while loading the content");
+
+ +

Наступний приклад відправляє текст до консолі браузера, разом з полями об’єкта, які можуть розкриватися:

+ +
console.dir(someObject);
+ +

Дивіться {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} для перегляду інших прикладів.

+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +
+

Наразі існує багато імплементацій, що відрізняються залежно від браузера, однак триває робота щодо уніфікації і міжбраузерної  консистентності.

+
diff --git a/files/uk/web/api/window/history/index.html b/files/uk/web/api/window/history/index.html new file mode 100644 index 0000000000..208b453c09 --- /dev/null +++ b/files/uk/web/api/window/history/index.html @@ -0,0 +1,63 @@ +--- +title: Window.history +slug: Web/API/Window/history +tags: + - API + - History API + - Property + - Reference + - Window +translation_of: Web/API/Window/history +--- +

{{ APIRef }}

+ +

Window.history - це незмінювана (read-only) властивість, що повертає посилання на об'єкт {{domxref("History")}}, який надає інтерфейс для керування історією сеансу браузера (сторінки, відвіданій на вкладці або фреймі, в якому завантажена поточна сторінка ).

+ +

Дивіться Manipulating the browser 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')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("api.Window.history")}}

diff --git a/files/uk/web/api/window/index.html b/files/uk/web/api/window/index.html new file mode 100644 index 0000000000..a27230e343 --- /dev/null +++ b/files/uk/web/api/window/index.html @@ -0,0 +1,460 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - DOM + - Interface + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - Window +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

+ +

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

+ +

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
{{domxref("Window.Components")}} {{Non-standard_inline}}
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Returns a reference to the console object which provides access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("Window.innerWidth")}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Indicates whether a context is capable of using features that require secure contexts.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Provides a hosting area for performance related attributes.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+ +
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

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.)
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+ +
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{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()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}}
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("Window.setResizable()")}}
+
Toggles a user's ability to resize a window.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Displays a modal dialog.
+
{{domxref("Window.sizeToContent()")}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{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("EventTarget.removeEventListener")}}
+
Removes an event listener from the window.
+
{{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.
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("Window.onappinstalled")}}
+
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
+
{{domxref("Window.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Called when a back putton is pressed.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("Window.ConstantSourceNode")}}
+
Creates an instance of {{domxref("ConstantSourceNode")}}
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/uk/web/api/window/localstorage/index.html b/files/uk/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..84401af92f --- /dev/null +++ b/files/uk/web/api/window/localstorage/index.html @@ -0,0 +1,147 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Property + - Web Storage + - Window + - Довідка +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

Властивість localStorage надає доступ до об’єкта {{domxref("Storage")}}, пов'язаного з джерелом поточного {{domxref("Document", "документа")}}. Сховище localStorage є схожим на sessionStorage, але не має обмежень тривалості зберігання даних, тоді як дані sessionStorage видаляються по закритті сторінки (насправді, лише після закриття всіх сторінок з цього джерела, якщо їх кілька відкрито в переглядачі).

+ +

Варто також зазначити, що сторінки, завантажені з різних джерел (важить все: ім'я хоста, порт, та навіть протокол — http/https), з міркувань безпеки мають незалежні окремі сховища, тож до даних одне одного доступу не мають.

+ +

Синтакс

+ +
myStorage = window.localStorage;
+ +

Значення

+ +

Об’єкт типу {{domxref("Storage")}}, який можна використовувати для доступу до чинного для поточної сторінки сховища.

+ +

Винятки

+ +
+
SecurityError
+
Виникає в разі порушення встановлених правил або коли джерелом сторінки є неприйнятний протокол/хост/порт (наприклад, коли протоколом джерела є file: чи data:). Зокрема, користувач може заборонити збереження даних з окремих джерел в налаштуваннях переглядача.
+
+ +

Приклад

+ +

Розгляньмо основні дії зі сховищем: запис, читання, видалення окремого ключа та повне очищення всього сховища.

+ +

Цей приклад створює (чи змінює, якщо такий ключ вже існує) запис в чинному для поточної сторінки сховищі (через об'єкт типу {{domxref("Storage")}}) за допомогою метода {{domxref("Storage.setItem()", "setItem()")}}:

+ +
localStorage.setItem('Кіт', 'Барсик');
+ +

Дістати значення за ключем дозволяє метод {{domxref("Storage.getItem()", "getItem()")}}:

+ +
var cat = localStorage.getItem('Кіт');
+ +

Для видалення раніше створеного запису за його ключем існує метод {{domxref("Storage.removeItem()", "removeItem()")}}:

+ +
localStorage.removeItem('Кіт');
+ +

А для очищення сховища (видалення всіх створених записів) призначено метод {{domxref("Storage.clear()", "clear()")}}:

+ +
localStorage.clear();
+ +
+

Заувага: повний приклад див. у статті Використання Web Storage API.

+
+ +

А тепер розгляньмо дещо змістовніший приклад:

+ +
function clearCart() {
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+  for (var i = 1; i <= count; i++) {
+    localStorage.removeItem('cart-item-' + i)
+  }
+  localStorage.removeItem('cart-size');
+}
+
+
+function addCartItem(itemId) {
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+  localStorage.setItem('cart-item-' + (count + 1), itemId);
+  localStorage.setItem('cart-size', count + 1);
+}
+
+function getCartItems() {
+  var items = [];
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+
+  for (var i = 1; i <= count; i++) {
+    var itemId = localStorage.getItem('cart-item-' + i);
+    items.push(parseInt(itemId));
+  }
+
+  return items;
+}
+
+
+addCartItem(111);
+addCartItem(222);
+
+console.log(getCartItems());  // виводить [111, 222]
+clearCart();
+console.log(getCartItems());  // виводить []
+
+ +

Варто зауважити, що сховище працює лише з рядками (як ключ, так і значення мусить бути рядком, або його буде перетворено на рядок неявним викликом {{jsxref("Object.prototype.toString()", "toString()")}}). Тому для зберігання структурованих даних доведеться спершу подбати про їх перетворення в текстовий рядок — наприклад, JSON:

+ +
function setLocalStorageObjectItem(key, value) {
+  if (value === undefined) {
+    localStorage.removeItem(key);
+  } else {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+}
+
+function getLocalStorageObjectItem(key) {
+  var json = localStorage.getItem(key);
+  if (json === undefined) {
+    return undefined;
+  }
+  return JSON.parse(json);
+}
+
+setLocalStorageObjectItem('foo', {a: {x: 123}});
+console.log(getLocalStorageObjectItem('foo'));  // виводить {a: {x: 123}}
+
+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Підтримка веб-переглядачами

+ + + +

{{Compat("api.Window.localStorage")}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/window/rejectionhandled_event/index.html b/files/uk/web/api/window/rejectionhandled_event/index.html new file mode 100644 index 0000000000..f725917a75 --- /dev/null +++ b/files/uk/web/api/window/rejectionhandled_event/index.html @@ -0,0 +1,85 @@ +--- +title: 'Window: подія rejectionhandled' +slug: Web/API/Window/rejectionhandled_event +tags: + - API + - Event + - HTML DOM + - JavaScript + - Promise + - Window + - Worker + - global + - onrejectionhandled + - rejectionhandled + - Проміс + - подія +translation_of: Web/API/Window/rejectionhandled_event +--- +
{{APIRef("HTML DOM")}}
+ +

Подія rejectionhandled посилається у глобальну область видимості скрипта (зазвичай, {{domxref("window")}}, але також {{domxref("Worker")}}), коли відхиляється об'єкт JavaScript {{jsxref("Promise")}}, але після того, як відбулась обробка відхилення. Це можна використовувати для відлагодження та для загальної стійкості застосунка, в тандемі з подією {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, яка посилається, коли проміс був відхилений, але не існує обробника відхилення.

+ + + + + + + + + + + + + + + + + + + + +
СпливаєНі
СкасовуєтьсяНі
Інтерфейс{{domxref("PromiseRejectionEvent")}}
Обробник події{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}
+ +

Приклад

+ +

Ви можете використовувати подію rejectionhandled, щоб залогувати проміси, які було відхилено, у консоль, разом з причинами відхилення:

+ +
window.addEventListener("rejectionhandled", event => {
+  console.log("Проміс відхилено; причина: " + event.reason);
+}, false);
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.Window.rejectionhandled_event")}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/window/self/index.html b/files/uk/web/api/window/self/index.html new file mode 100644 index 0000000000..70c58d6faf --- /dev/null +++ b/files/uk/web/api/window/self/index.html @@ -0,0 +1,70 @@ +--- +title: Window.self +slug: Web/API/Window/self +tags: + - API + - HTML DOM + - Window + - Властивість +translation_of: Web/API/Window/self +--- +
{{APIRef}}
+ +

Властивість Window.self, доступна лише для читання, повертає window як {{domxref("WindowProxy")}}. Її можна використовувати через крапку на об'єкті window (а саме, window.self) або автономно (self). Перевага автономного запису в тому, що схожий запис існує для не window контексту, наприклад у {{domxref("Worker", "Web Workers", "", 1)}}. Використовуючи self, ви можете звертатись до глобальної області видимості таким чином, що звернення працюватиме не лише в контексті window (self дорівнюватиме window.self), але також у контексті worker (тоді self дорівнюватиме {{domxref("WorkerGlobalScope.self")}}).

+ +

Приклад

+ +

Наступне використання window.self можна також замінити на window.

+ +
if (window.parent.frames[0] != window.self) {
+    // це вікно не є першим фреймом у списку
+}
+
+ +

Більше того, при використанні у активному документі контексту перегляду window - це посилання на поточний глобальний об'єкт, і таким чином, усе перечислене є еквівалентним:

+ +
var w1 = window;
+var w2 = self;
+var w3 = window.window;
+var w4 = window.self;
+// w1, w2, w3, w4 є строго рівними, та лише w2 функціонуватиме у workers
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}{{Spec2('HTML WHATWG')}}Немає змін від останнього знімку {{SpecName("HTML5.1")}}
{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}{{Spec2('HTML5.1')}}Немає змін від {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}{{Spec2('HTML5 W3C')}}Перший знімок, що містить визначення Window.self.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.Window.self")}}

+ +

Див. також

+ + diff --git a/files/uk/web/api/window/unhandledrejection_event/index.html b/files/uk/web/api/window/unhandledrejection_event/index.html new file mode 100644 index 0000000000..8f621c5ea9 --- /dev/null +++ b/files/uk/web/api/window/unhandledrejection_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'Window: подія unhandledrejection' +slug: Web/API/Window/unhandledrejection_event +tags: + - API + - Event + - HTML DOM + - JavaScript + - Promise + - Window + - Worker + - unhandledrejection + - Проміс + - відхилення + - подія +translation_of: Web/API/Window/unhandledrejection_event +--- +
{{APIRef("HTML DOM")}}
+ +

Подія unhandledrejection посилається у глобальну область видимості скрипта, коли об'єкт JavaScript {{jsxref("Promise")}}, що не має обробника відхилення, відхиляється; зазвичай, це {{domxref("window")}}, але також може бути {{domxref("Worker")}}. Це корисно для відлагодження та для надання резервної обробки помилок у неочікуваних ситуаціях.

+ + + + + + + + + + + + + + + + + + + + +
СпливаєНі
СкасовуєтьсяТак
Інтерфейс{{domxref("PromiseRejectionEvent")}}
Обробник подій{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}
+ +

Примітки щодо використання

+ +

Дозвіл події unhandledrejection спливати зрештою призведе до виводу повідомлення помилки у консолі. Ви можете запобігти цьому, викликавши {{domxref("Event.preventDefault", "preventDefault()")}} на інтерфейсі {{domxref("PromiseRejectionEvent")}}; дивіться приклад {{anch("Запобігання обробці за замовчуванням")}} нижче.

+ +

Приклади

+ +

Тут ми маємо кілька прикладів, які демонструють, як ви можете скористатись подією unhandledrejection. Подія містить деяку корисну інформацію:

+ +
+
promise
+
Власне, {{jsxref("Promise","проміс")}}, який був відхилений, не маючи обробника, який зреагував би на відхилення.
+
reason
+
Причина, яка була б передана у обробник відхилення, якби він існував. Дивіться більше інформації у {{jsxref("Promise.catch", "catch()")}}.
+
+ +

Базове логування помилки

+ +

Цей приклад просто логує інформацію щодо необробленого відхилення проміса у консоль.

+ +
window.addEventListener("unhandledrejection", event => {
+  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
+});
+
+ +

Ви також можете скористатись обробником подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}, щоб налаштувати прослуховувач подій:

+ +
window.onunhandledrejection = event => {
+  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
+};
+
+ +

Запобігання обробці за замовчуванням

+ +

Багато середовищ (таких як {{Glossary("Node.js")}}) за замовчуванням виводять необроблені відхилення промісів у консоль. Ви можете запобігти цьому, додавши обробник для подій unhandledrejection, що — на додачу до будь-яких інших задач, які ви бажаєте виконати — викликає {{domxref("Event.preventDefault()", "preventDefault()")}}, щоб скасувати подію, запобігаючи її спливанню та обробці кодом логування під час виконання. Це працює, тому що unhandledrejection скасовується.

+ +
window.addEventListener('unhandledrejection', function (event) {
+  // ...тут ваш код, який обробляє необроблені відхилення...
+
+  // Запобігти обробці за замовчуванням (наприклад, виводу
+  // помилки у консоль)
+
+  event.preventDefault();
+});
+
+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.Window.unhandledrejection_event")}}

+ +

Див. також

+ + + +

[1] Відповідний обробник подій визначений як властивість у домішці {{domxref("WindowEventHandlers")}}, яка доступна як у інтерфейсі {{domxref("Window")}}, так і в усіх типах інтерфейсів {{domxref("Worker")}}.

diff --git a/files/uk/web/api/windoweventhandlers/index.html b/files/uk/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..cb37cc2a2c --- /dev/null +++ b/files/uk/web/api/windoweventhandlers/index.html @@ -0,0 +1,105 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

The WindowEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.

+ +
+

Note: WindowEventHandlers is a mixin and not an interface; you can't actually create an object of type WindowEventHandlers.

+
+ +

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.onmessageerror")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} 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.onrejectionhandled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("rejectionhandled")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected and the rejection has been handled.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunhandledrejection")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unhandledrejection")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected but the rejection was not handled.
+
{{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', 'WindowEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html new file mode 100644 index 0000000000..81cabc79bd --- /dev/null +++ b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html @@ -0,0 +1,52 @@ +--- +title: WindowEventHandlers.onrejectionhandled +slug: Web/API/WindowEventHandlers/onrejectionhandled +tags: + - API + - HTML DOM + - JavaScript + - Promise + - WindowEventHandlers + - onrejectionhandled + - Обробник подій + - Проміс + - події +translation_of: Web/API/WindowEventHandlers/onrejectionhandled +--- +
{{APIRef}}
+ +

Властивість onrejectionhandled домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій rejectionhandled. Ці події виникають, коли відхиляються об'єкти {{jsxref("Promise")}}.

+ +

Синтаксис

+ +
window.addEventListener("rejectionhandled", function(event) { ... });
+window.onrejectionhandled = function(event) { ...};
+ +

Приклад

+ +
window.onrejectionhandled = function(e) {
+  console.log(e.reason);
+}
+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.WindowEventHandlers.onrejectionhandled")}}

diff --git a/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html new file mode 100644 index 0000000000..888297c406 --- /dev/null +++ b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html @@ -0,0 +1,56 @@ +--- +title: WindowEventHandlers.onunhandledrejection +slug: Web/API/WindowEventHandlers/onunhandledrejection +tags: + - API + - HTML DOM + - Promise + - WindowEventHandlers + - onunhandledrejection + - Властивість + - події + - проміси +translation_of: Web/API/WindowEventHandlers/onunhandledrejection +--- +
{{APIRef}}
+ +

Властивість onunhandledrejection домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій unhandledrejection. Ці події виникають для необроблених відхилень об'єктів {{jsxref("Promise")}}.

+ +

Синтаксис

+ +
window.onunhandledrejection = function;
+ +

Значення

+ +

function - це {{domxref("EventHandler")}} або функція, яку треба викликати, коли вікно отримує події unhandledrejection. Обробник подій отримує вхідний параметр як {{domxref("PromiseRejectionEvent")}}.

+ +

Приклади

+ +

Цей приклад просто виводить у консоль значення reason (причина) необроблених відхилень.

+ +
window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}
+ +

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

+ + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}{{Spec2('HTML WHATWG')}}Початкове визначення.
+ +

Сумісність з веб-переглядачами

+ + + +

{{Compat("api.WindowEventHandlers.onunhandledrejection")}}

diff --git a/files/uk/web/api/windoworworkerglobalscope/index.html b/files/uk/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..0c8177dbaa --- /dev/null +++ b/files/uk/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,189 @@ +--- +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()}}
+ +

The WindowOrWorkerGlobalScope mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.

+ +
+

Note: WindowOrWorkerGlobalScope is a mixin and not an interface; you can't actually create an object of type WindowOrWorkerGlobalScope.

+
+ +

Properties

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{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 origin of the global scope, serialized as a string.
+
+
+ +

Methods

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
{{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.
+
+ +

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', 'webappapis.html#dom-origin', '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/uk/web/api/windowtimers/index.html b/files/uk/web/api/windowtimers/index.html new file mode 100644 index 0000000000..8e3b6dfd47 --- /dev/null +++ b/files/uk/web/api/windowtimers/index.html @@ -0,0 +1,125 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML DOM + - Interface + - Intervals + - Mixin + - NeedsTranslation + - Reference + - Timers + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.

+ +

Properties

+ +

This interface neither inherits nor provides any properties.

+ +

Methods

+ +

This interface does not inherit any methods. It offers the following methods.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

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/uk/web/api/windowtimers/settimeout/index.html b/files/uk/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..19c90148ce --- /dev/null +++ b/files/uk/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,428 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +
 
+ +
Метод setTimeout(), що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.
+ +
 
+ +

Синтаксис

+ +
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
+var timeoutID = window.setTimeout(code[, delay]);
+
+ +

Параметри

+ +
+
func
+
{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.
+
code
+
Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису не рекомендовано з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.
+
delay {{optional_inline}}
+
 
+
Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}
+
param1, ..., paramN {{optional_inline}}
+
Додаткові параметри, що передаються до func або code, щойно час таймера спливе.
+
+ +
+

Зверніть увагу:  Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ Callback arguments).  

+
+ +

Значення, що повертається

+ +


+ Після виклику setTimeout(), повертається timeoutID  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.

+ +

Корисно знати, що setTimeout() та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  clearTimeout() та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. 

+ +

Приклад

+ +

У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до setTimeout() та clearTimeout() процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у clearTimeout(). За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.

+ +

HTML код

+ +
<p>Live Example</p>
+<button onclick="delayedAlert();">Відобразити діалогове вікно alert через дві секунди.</button>
+<p></p>
+<button onclick="clearAlert();">Відмінити відображення діалогового вікна.</button>
+
+ +

JavaScript код

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("Це було дійсно повільно!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

Результат

+ +

{{EmbedLiveSample('Example', 'Приклад')}}

+ +

Дивіться також clearTimeout() example.

+ +

Поліфіл

+ +

Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для setTimeout() чи setInterval() (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: 

+ +
/*\
+|*|
+|*|  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);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    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);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    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);
+    };
+  }, 0, 'test');
+}())
+
+ +

Фікс для IE

+ +

Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
+  (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 instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+
+ +

Або використати умовні коментарі HTML для IE9 та нижче:

+ +
<!--[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 instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+</script><![endif]-->
+
+ +

Тимчасові рішення

+ +

Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:

+ +
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
+ +

Приклад, наведений вище, може бути також написаний за допомогою   arrow function:

+ +
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
+
+ +

Ще одне рішення - використання   function's bind. Приклад:

+ +
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+
+ +

Проблема "this"

+ +

Коли ви передаєте до setTimeout() метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням this, на яке ви очікуєте. Ця проблема детально описана у JavaScript reference.

+ +

Пояснення

+ +

Код, що виконується всередині setTimeout(), викликається із  іншого контекста виконання (execution context), ніж у функції, яка викликала setTimeout. До функції, яку викликають всередині setTimeout застосовуються звичайні правила призначення this. І, якщо ви не встановили this під час виклику або за допомогою bind, його значенням за замовчуванням буде об'єкт  global (або window) у нестрогому режимі, або undefined у строгому режимі. Значення this буде іншим, аніж у функції, яка викликала setTimeout. Розгляньте наступний приклад:

+ +
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"
+ +

Приклад вище працює тому, що myMethod викликано, як метод масиву myArray. Тому його this дорівнює myArray, а значення this[sProperty] всередині метода дорівнює myArray[sProperty]. Тим не менше, у наступному прикладі:

+ +
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds
+ +

Метод myArray.myMethod передано до setTimeout, як звичайну функцію, якій не задано значення this. І коли вона викликається, її this за замовчуванням дорівнює об'єкту window. У  setTimeout неможливо передати this аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  call, як показано у прикладі нижче:

+ +
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 із необхідним значенням: 

+ +
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
+ +

Стрілочна функція також є прийнятною альтернативою:

+ +
setTimeout(() => {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(() => {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
+ +

Ще одне можливе рішення проблеми this - замінити нативні глобальні функції setTimeout() та setInterval() кастомними функціями, які можуть приймати об'єкт this і застосовувати його у колбек функції, використовуючи  Function.prototype.call. Наприклад: 

+ +
// Enable setting 'this' in 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);
+};
+ +
Зверніть увагу:  Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф Callback arguments .
+ +

Випробування нового підхода:

+ +
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
+
+ +
Зверніть увагу:  JavaScript 1.8.5 впровадив метод   Function.prototype.bind(), який встановлює значення this для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення this колбека.
+ +

Приклад використання bind():

+ +
myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length > 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+
+ +

Примітки

+ +

Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.

+ +

Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала setTimeout(). Наприклад. 

+ +
function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');
+ +

Виведе в консоль:

+ +
After setTimeout
+foo has been called
+ +

Тому що, навіть не зважаючи на те, що setTimeout було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.

+ +

Passing string literals

+ +

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

+ +
// Recommended
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Not recommended
+window.setTimeout("alert('Hello World!');", 500);
+
+ +

A string passed to setTimeout is 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.

+ +

Причини чому затримка є фактично довшою ніж вказано

+ +

There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.

+ +

Nested timeouts forced to >=4ms

+ +

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 5.

+ +

In fact, 4 ms 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.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{domxref("window.postMessage()")}} as described here.

+ +

Timeouts in inactive tabs clamped to >=1000ms

+ +

To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.

+ +

Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the dom.min_background_timeout_value preference). Chrome implements this behavior since version 11 (crbug.com/66078).

+ +

Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.

+ +
+

Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.

+
+ +

Late timeouts

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks

+ +

Maximum delay value

+ +

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.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Supports parameters for callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Supports parameters for callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

See also

+ + diff --git a/files/uk/web/api/xmlhttprequest/index.html b/files/uk/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..11828836cf --- /dev/null +++ b/files/uk/web/api/xmlhttprequest/index.html @@ -0,0 +1,178 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - API + - HTTP + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web + - XHR +translation_of: Web/API/XMLHttpRequest +--- +
{{APIRef("XMLHttpRequest")}}
+ +
+ +

Об'єкти XMLHttpRequest використовуються для взаємодії з серверами. Ти можеш отримати дані за URL без повної перезагрузки сторінки. Це дозволяє веб-сторінці оновити частину вмісту, не перешкоджаючи роботі користувача XMLHttpRequest часто використовуюється в програмуванні з використанням технології Ajax.

+ +

{{InheritanceDiagram}}

+ +
Історія
+ +

XMLHttpRequest був спочатку розроблений компанією Microsoft десь у 1999 році і пізніше прийнятий компаніями Mozilla, Apple та Google. З жовтня 2014 року він був стандартизований в WHATWG, разом з новим методом {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} на основі промісів.

+ +

Не зважаючи на своє ім'я, XMLHttpRequest може використовуватись для отримання будь-якого типу даних, не лише XML, і підтримує інші протоколи окрім HTTP (включаючи file і ftp).

+ +

Конструктор

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
Конструктор ініціалізує об'єкт XMLHttpRequest. Він має бути викликаний перед використанням будь-яких з його методів.
+
+ +

Властивості

+ +

Успадковує властивості {{domxref("XMLHttpRequestEventTarget")}} і {{domxref("EventTarget")}}.

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
{{domxref("EventHandler")}} викликається щоразу, коли атрибут readyState змінюється.
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Повертає unsigned short, the state запиту.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Повертає {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, об'єкт JavaScript, або ж {{domxref("DOMString")}}, залежить від значення {{domxref("XMLHttpRequest.responseType")}}, що містить тіло відповіді.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Повертає {{domxref("DOMString")}}, що містить відповідь на запит в якості тексту, або null, якщо запит завершився помилкою або не був надісланим досі.
+
{{domxref("XMLHttpRequest.responseType")}}
+
Вказує на тип відповіді.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Повертає the serialized URL відповіді або ж пустий рядок, якщо URL — null.
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Повертає {{domxref("Document")}}, що містить відповідь на запит або null, якщо запит завершився помилкою, досі не був надісланий, або не може бути розпізнаний, як XML чи HTML. Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Повертає unsigned short з статусом відповіді на запит.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}
+
Повертає {{domxref("DOMString")}}, що містить стрічку відповіді, повернену HTTP-сервером. Навідміну від {{domxref("XMLHTTPRequest.status")}}, що включає цілісний текст відповіді (наприклад, "200 OK").
+
+ +
+

Увага: починаючи від специфікації HTTP/2 (8.1.2.4 Поля пседо-заголовку відповіді), HTTP/2 не визначає шляху передачі версії чи reason phrase, що включається в стрічку статусу HTTP/1.1.

+
+ +
+
{{domxref("XMLHttpRequest.timeout")}}
+
Має тип unsigned long. Являє собою час у мілісекундах, відведений на запит перед тим, як буде автоматично перерваний.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
{{domxref("EventHandler")}}, що викликається щоразу після спливання часу, відведенного на запит. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
{{domxref("XMLHttpRequestUpload")}}, що являє собою процес завантаження.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
{{domxref("Boolean")}}, що вказує, чи слід робити запити Access-Control використовуючи такі облікові дані, як файли cookie або заголовки авторизації.
+
+ +

Нестандартні властивості

+ +
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
{{Interface("nsIChannel")}}. Канал, що використовується об'єктом коли виконується запит.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Логічна змінна. Якщо її значення — істина, запит буде надісланий без кукі та заголовків аутентифікації.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Логічна змінна. Якщо її значення — істина, оригінальна політика не буде застосована до запиту.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Логічна змінна. Вказує чи представляє об'єкт сервіс фонового запиту.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
Є ArrayBuffer. Відповідь на запит у вигляді масиву JavaScript.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
Це особливість Gecko, логічна змінна, що була видалена з Firefox/Gecko 22. Будь ласка, використовуйте натомість Server-Sent Events, Web Sockets, або responseText.
+
+ +

Обробники подій

+ +

onreadystatechange підримується у всіх браузерах, як властивість XMLHttpRequest.

+ +

З тих пір у різних браузерах було впроваджено ряд додаткових обробників подій (onload, onerror, onprogress тощо). Вони підтримуються у Firefox. Зокрема, дивіться nsIXMLHttpRequestEventTarget та Using XMLHttpRequest.

+ +

Більш нові браузери, включаючи Firefox, також підтримують прослуховування подій XMLHttpRequest починаючи від стандарту API addEventListener в розширені на встановлення властивостей функцій обробника on*.

+ +

Methods

+ +
+
{{domxref("XMLHttpRequest.abort()")}}
+
Aborts the request if it has already been sent.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Returns all the response headers, separated by CRLF, as a string, or null if no response has been received.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Returns the string containing the text of the specified header, or null if either the response has not yet been received or the header doesn't exist in the response.
+
{{domxref("XMLHttpRequest.open()")}}
+
Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use openRequest() instead.
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Overrides the MIME type returned by the server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Sets the value of an HTTP request header. You must call setRequestHeader()after open(), but before send().
+
+ +

Non-standard methods

+ +
+
{{domxref("XMLHttpRequest.init()")}}
+
Initializes the object for use from C++ code.
+
+ +
Warning: This method must not be called from JavaScript.
+ +
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use open() instead. See the documentation for open().
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
A variant of the send() method that sends binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
+ +

Browser compatibility

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

See also

+ + diff --git "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" new file mode 100644 index 0000000000..e1aab3dfde --- /dev/null +++ "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/index.html" @@ -0,0 +1,188 @@ +--- +title: Подія +slug: Web/API/Подія +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

Event інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом HTMLElement.click() методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи EventTarget.dispatchEvent().

+ +

Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі Event. Сам по собі Event вміщає можливості та методи, спільні для всіх подій.

+ +

Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних HTML elements (таких як <button>, <div>, <span>, і т.п.) при використанні EventTarget.addEventListener(), а це, як правило, замінює використання атрибутів хендлера подій старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи removeEventListener().  

+ +

Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем, обидва з яких забезпечують моніторинг перегляду відео.) 

+ +

Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.

+ +

Інтерфейси на основі Event

+ +

Нижче надано список інтерфейсів, які існують на основі головного Event інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.

+ +

Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "Event".

+ + + +
+ +
+ +

Конструктор

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Створює  Event об'єкт та повертає його абоненту.
+
+ +

Властивості

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
Булевий вираз вказує на те, чи вспливає подія через DOM.
+
{{domxref("Event.cancelBubble")}}
+
Історичний псевдонім {{domxref("Event.stopPropagation()")}}. Встановлення його значення true  перед поверненням з обробника події запобігає поширенню події.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
Булевий вираз вказує на те, чи скасовується подія.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
Булевий вираз вказує на те, чи може подія всплити через межу між  тінню DOM та черговим DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
Посилання на зареєстровану зараз ціль події. Це об'єкт, на котрий наразі планується відіслати подію. Можливо, це змінилося по дорозі через retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
 {{jsxref("Array")}} of DOM {{domxref("Node")}}, через який всплила подія.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Вказує, чи виклик {{domxref("event.preventDefault()")}}  скасував подію.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Вказує, яка фаза потоку подій обробляється.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Явна оригінальна мета події (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).
+
{{domxref("Event.returnValue")}}
+
Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref(''Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати returnValue, якщо ви  вирішите це зробити.
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
Нестандартний псевдонім (зі старої версії Microsoft Internet Explorer) для {{domxref("Event.target")}}. Деякі інші браузери починають підтримувати його для веб-сумісності.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
Посилання на ціль, до якої спочатку була відправлена подія.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).
+
Застарілі властивості
+
+ +

{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}

+ +

Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)

+ +

Методи

+ +
+
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
+
Створює нову подію, котра повинна бути ініційована викликом її  initEvent() методу.
+
{{domxref("Event.composedPath()")}}
+
Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.
+
{{domxref("Event.preventDefault()")}}
+
Скасовує подію, (якщо її можливо скасувати).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).
+
{{domxref("Event.stopPropagation()")}}
+
Зупиняє розповсюдження подій далі у DOM.
+
Застарілі методи
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)
+
{{domxref("Event.preventBubble()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation")}}. (Захищає подію від вспливання).
+
{{domxref("Event.preventcapture()"}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Застарілий; використовуйте замість нього {{domxref("event.stopPropagation"}}.
+
+ +

Технічні характеристики

+ + + + + + + + + + + + + + +
ХарактеристикаСтатусКоментар
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Сумісність з браузером

+ +

приховано

+ +

Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит https://github/com/mdn/browser-compat-data

+ + + +

Дивіться також

+ + diff --git "a/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" new file mode 100644 index 0000000000..20c17f2d31 --- /dev/null +++ "b/files/uk/web/api/\320\277\320\276\320\264\321\226\321\217/target/index.html" @@ -0,0 +1,134 @@ +--- +title: Event.target +slug: Web/API/Подія/target +translation_of: Web/API/Event/target +--- +

{{ApiRef("DOM")}}

+ +

Властивість target інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.

+ +

Синтаксис

+ +
var theTarget = event.target;
+ +

Приклад

+ +

Властивість 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")}}Initial definition
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Нотатки про сумісність

+ +

В браузерах IE 6-8 використовується інша модель подій. Слухачі подій приєднуються з використанням нестандартного методу {{domxref('EventTarget.attachEvent')}}. В цій моделі, об'єкт події має {{domxref('Event.srcElement')}} властивість, замість властивості target, і воно має ту ж саму семантику як event.target.

+ +
function hide(e) {
+  // Підтримка IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

Читати також

+ + diff --git a/files/uk/web/css/-moz-orient/index.html b/files/uk/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..fbed678743 --- /dev/null +++ b/files/uk/web/css/-moz-orient/index.html @@ -0,0 +1,153 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-moz-orient CSS властивість, що задає орієнтацію обраного елемента.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Значення

+ +
+
inline
+
The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.
+
block
+
The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.
+
horizontal
+
The element is rendered horizontally.
+
vertical
+
The element is rendered vertically.
+
+ +

Приклади

+ +

HTML

+ +
<p>
+  The following progress meter
+  is horizontal (the default):
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+ The following progress meter
+ is vertical:
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

+ +
.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Examples","200","360")}}

+ +

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

+ +

Though submitted to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, -moz-orient).

+ +

Браузерна сумісність

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
auto value{{CompatNo}}{{CompatGeckoDesktop("21.0")}}[2]
+ {{CompatNo}}{{CompatGeckoDesktop(40)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
inline and block values{{CompatNo}}{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
auto value{{CompatNo}}{{CompatGeckoMobile("21.0")}}[2]
+ {{CompatNo}}{{CompatGeckoDesktop(40)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
inline and block values{{CompatNo}}{{CompatGeckoMobile(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] In Gecko 6.0 {{geckoRelease("6.0")}}, there was a bug that causes vertical {{HTMLElement("progress")}} elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 {{geckoRelease("7.0")}}.

+ +

[2] The auto value was equivalent to horizontal.

+ +

Дивитися також

+ + diff --git a/files/uk/web/css/@font-face/font-display/index.html b/files/uk/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..d11214dcbc --- /dev/null +++ b/files/uk/web/css/@font-face/font-display/index.html @@ -0,0 +1,87 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

Властивість font-display визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.

+ +

Хронологія відображення шрифта

+ +

Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.

+ +
+
Блокування шрифту(block)
+
Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(invisible). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.
+
Заміна шрифту(swap)
+
Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.
+
Невдача(failure)
+
Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Значення

+ +
+
auto
+
Відображення шрифту виконуєтся автоматично клієнтом.
+
block
+
Надає елементам короткий період блокування і нескінченний swap період.
+
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('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Initial definition
+ +

Сумісність з браузерами

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

diff --git a/files/uk/web/css/@font-face/index.html b/files/uk/web/css/@font-face/index.html new file mode 100644 index 0000000000..6a872bcb8f --- /dev/null +++ b/files/uk/web/css/@font-face/index.html @@ -0,0 +1,197 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@-правила' + - '@font-face' + - CSS + - CSS Шрифти + - Посилання + - типографія + - шрифти +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +

@font-face CSS @-правило вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція local() вказує ім'я шрифта то його пошук буде відбуватися  на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції url() будуть завантажені і використані

+ +

Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.

+ +

Поширеним випадком є використання url() і local() разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.

+ +

@font-face @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого @-правила.

+ +
@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

Синтаксис

+ +

Опис

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.
+
{{cssxref("@font-face/font-family", "font-family")}}
+
Задає ім'я, що буде використовуватися для задання властивостей шрифта.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів)  {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-stretch: 50% 200%;
+
{{cssxref("@font-face/font-style", "font-style")}}
+
Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-style: oblique 20deg 50deg;
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: font-weight: 100 400;
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
Значення {{cssxref("font-variant")}}.
+
{{cssxref("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("truetype");
+ +

Достіпні типи: "woff", "woff2", "truetype", "opentype", "embedded-opentype", і "svg".

+
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
Діапазон  Unicode кодів, що буде використовуватись в шрифті.
+
+ +

Формальний синтаксис

+ +
{{csssyntax}}
+ +

Приклади

+ +

Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:

+ +

Дивитися live приклад

+ +
<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')}}Початкове визначення
+ +

Підтримка браузерів 

+ + + +

{{Compat("css.at-rules.font-face")}}

+ +

Прогляньте також

+ + diff --git a/files/uk/web/css/@page/bleed/index.html b/files/uk/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..f937f5dfaf --- /dev/null +++ b/files/uk/web/css/@page/bleed/index.html @@ -0,0 +1,83 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - '@сторінка' + - CSS + - Web +translation_of: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

 bleed це пропускний дескриптор правил css, використовується  з {{cssxref("@page")}} за правилом , визначає ступінь області пропуску сторінки за межами сторінки. Ця властивість має тільки ефект  якщо позначки обрізання   увімкнено за допомогою властивості {{cssxref("@page/marks", "marks")}} property.

+ +

Syntax

+ +
/* Keyword values */
+bleed: auto;
+
+/* <length> values */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

Значення

+ +
+
auto
+
Обчислюється до 6pt якщо  значення в {{cssxref("@page/marks", "marks")}} є обрізаним. В іншому випадку він обчислюється до нуля.
+
{{cssxref("<довжина>")}}
+

+ Вказує, наскільки назовні, в кожному напрямку, область випуску простягається поза полем сторінки. Значення можуть бути від’ємними, але можуть бути певні обмеження щодо реалізації.
+
+ +

Формальне визначення

+ +

{{cssinfo}}

+ +

Формальний синтаксис

+ +
{{csssyntax}}
+ +

Приклади

+ +

Встановлення кровоточення сторінки  в 1см.

+ +
@page {
+  bleed: 1cm;
+}
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтанКоментарі
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Initial definition
+ +

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

+ + + + + +

{{Compat("css.at-rules.page.bleed")}}

+ +

Зазвичай переглядають

+ + diff --git a/files/uk/web/css/@page/index.html b/files/uk/web/css/@page/index.html new file mode 100644 index 0000000000..7704892bfb --- /dev/null +++ b/files/uk/web/css/@page/index.html @@ -0,0 +1,112 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - '@page' + - At-rule + - CSS + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

The @page CSS at-rule is used to modify some CSS properties when printing a document.

+ +

Syntax

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+ +

Descriptors

+ +
+
size
+
Specifies the target size and orientation of the page box’s containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.
+
+ +
+
marks
+
Adds crop and/or registration marks to the document.
+
+ +
+
bleed
+
Specifies the extent beyond the page box at which the page rendering is clipped.
+
+ +

Description

+ +

You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

+ +

The @page at-rule can be accessed via the CSS object model interface {{domxref("CSSPageRule")}}.

+ +
Note: The W3C is discussing how to handle viewport-related {{cssxref("<length>")}} units, vh, vw, vmin, and vmax. Meanwhile do not use them within a @page at-rule.
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

@page pseudo-class examples

+ +

Please refer to the various pseudo-classes of @page for examples.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Adds the :recto and :verso page selectors
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.page")}}

+ +

See also

+ + diff --git a/files/uk/web/css/_colon_active/index.html b/files/uk/web/css/_colon_active/index.html new file mode 100644 index 0000000000..f85ba17940 --- /dev/null +++ b/files/uk/web/css/_colon_active/index.html @@ -0,0 +1,129 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Веб + - Довідка + - Макет + - Псевдоклас +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

CSS псевдо-клас :active  відображає елемент (наприклад, кнопку), який в даний момент активовано користувачем. У випадку застосування миші, "активація" зазвичай починається в момент натискання основної клавіші.

+ +
/* Вибирає будь-який <a>, що активується */
+a:active {
+  color: red;
+}
+ +

Псевдоклас :active частіш за все використовується на елементах {{HTMLElement("a")}} і {{HTMLElement("button")}}. Інші поширені варіанти застосування цього селектору включають елементи, що містять активований елемент, а також елементи форм, які активуються через асоційований із ними  {{HTMLElement("label")}}.

+ +

Стилі, задані псевдокласом :active будуть перевизначені будь-яким наступним спорідненим із посиланнями псевдокласом ({{cssxref(":link")}}, {{cssxref(":hover")}}, чи {{cssxref(":visited")}}), що має хоча б таку ж специфічність. Для правильної стилізації посилань помістіть правила :active після всіх інших споріднених із посиланнями правил, як визначено порядком LVHA: :link — :visited — :hover — :active.

+ +
Зауважте, що: на системах із багатокнопковими мишами CSS3 вказує, що псевдоклас :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;
+}
+ +

Результат

+ +

{{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/uk/web/css/_colon_root/index.html b/files/uk/web/css/_colon_root/index.html new file mode 100644 index 0000000000..b7b20a01d9 --- /dev/null +++ b/files/uk/web/css/_colon_root/index.html @@ -0,0 +1,100 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - Псевдо-клас +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

Опис

+ +

Псевдо-клас :root вказує на кореневий елемент дерева документа. Якщо застосувати його до HTML, :root відображає {{HTMLElement("html")}} і є ідентичним селектору html, та не зважаючи на це, його вага є більшою.

+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Приклад

+ +

Використання :root може бути корисним при декларуванні глобальних змінних CSS

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтанКоментар
{{SpecName('CSS4 Селектори', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Без змін
{{SpecName('CSS3 Селектори', '#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/uk/web/css/_doublecolon_before/index.html b/files/uk/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..ec3560be1f --- /dev/null +++ b/files/uk/web/css/_doublecolon_before/index.html @@ -0,0 +1,237 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - 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('Adding_quotation_marks', '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('Decorative_example', 450, 60)}}

+ +

Список завдань

+ +

В цьому прикладі ми створимо простий список завдань, використовуючи псевдо-елемент. Цей метод може часто використовуватись щоб додавати невеликі штрихи до  UI щоб покращити user experience.

+ +

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('To-do_list', 400, 300)}}

+ +

Нотатки

+ +

Також виправлення позиціонування в Firefox 3.5 не дозволяють вмісту бути згенерованим як окремий попередній елемент (відповідно до специфікації CSS "Псевдо-елемент :before і :after впливають на інші блоки так як вони були б справжніми елементами"), Вони можуть використовуватись, щоб впроваджувати незначні поліпшення для  не табличних розміток.  (наприклад, щоб досягти центрування) в випадку  доки вміст, що має центруватись  поміщений в дочірній наступний , колонка до і після контенту може бути представлена без додавання попереднього чи наступного сусіднього блоку (наприклад, це, можливо, найбільш семантично правильніше, додавати допоміжний span як нижче, чим додавати  <div/>  перед і після). (І завжди пам'ятайте додавати ширину до  float об'єкта, інакше він не буде обтікати!)

+ +

HTML

+ +
<div class="example">
+<span id="floatme">"Floated Before" має згенеруватись ліворуч від
+вікна перегляду і не виносити за межі рядка на потік нижче. Аналогічно
+"Floated After" має з'являтись праворуч</span>
+</div>
+ +

CSS

+ +
#floatme { float: left; width: 50%; }
+
+/* Щоб отримати пусту колонку просто позначте в hex коді
+  нерозривний пробіл: \a0 у якості контенту
+(Використовуйте \0000a0 коли іде після такого символа як пробіл )
+*/
+.example::before {
+  content: "Floated Before";
+  float: left;
+  width: 25%;
+}
+.example::after {
+  content: "Floated After";
+  float: right;
+  width: 25%;
+}
+
+/* For styling */
+.example::before, .example::after {
+  background: yellow;
+  color: red;
+}
+ +

Результат

+ +

{{EmbedLiveSample("Notes")}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}No significant changes to the previous specification.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Allows transitions on properties defined on pseudo-elements.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Allows animations on properties defined on pseudo-elements.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduces the two-colon syntax.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Initial definition, using the one-colon syntax
+ +

Підтримка браузерів

+ +
+ + +

{{Compat("css.selectors.before")}}

+
+ +

Дивіться також

+ + diff --git a/files/uk/web/css/_doublecolon_slotted/index.html b/files/uk/web/css/_doublecolon_slotted/index.html new file mode 100644 index 0000000000..56b3e5e86d --- /dev/null +++ b/files/uk/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,104 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +translation_of: 'Web/CSS/::slotted' +--- +
{{ CSSRef }}
+ +

Псевдо-елемент ::slotted() являє собою будь-який елемент, поміщений в слот всередині шаблону HTML (додаткову інформацію див. в розділі Використання шаблонів і слотів).

+ +

Це працює тільки при використанні всередині CSS, поміщеного в тіньовий DOM. Зверніть увагу, що цей селектор не буде вибирати текстовий вузол, поміщений в слот; він призначений тільки для фактичних елементів.

+ +
/* Вибір будь-якого елемента, поміщеного в слот */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Вибір будь-якого <span> елемента, поміщеного в слот */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

Синтакс

+ +
{{csssyntax}}
+ +

Приклади

+ +

Наступні фрагменти коду взяті з демо-версії застосування псевдо-елемента :slotted (див. демо).

+ +

У цьому демо ми використовуємо простий шаблон з трьома слотами:

+ +
<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));
+  }
+})
+ +

Ви побачите, що при заповненні елемента стилю  певними значеннями, ми вибираємо всі слотовані елементи  (::slotted(*)) і надаємо їм інший шрифт і колір. Це дозволяє їм краще виділятися поруч зі слотами, які не були успішно заповнені. 

+ +

Для вибору конкретних елементів, вказуєм необхідний тип елементу замість *.  Для прикладу - селектор, який застосує стилі лише для div елементів, матиме наступний вигляд (::slotted(div)). Більше інформації про стилізацію slot елементів та розробку кастомних веб компонентів, ви можете знайти на моєму github.

+ +

При вставці на сторінку елемент виглядає наступним чином:

+ +

<person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> </person-details>

+ +

Cпецифікації

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}{{ Spec2('CSS Scope') }}Початкове визначення
+ +

Сумісність браузерами

+ + + +

{{Compat("css.selectors.slotted")}}

+ +

Див. також

+ + diff --git a/files/uk/web/css/animation-name/index.html b/files/uk/web/css/animation-name/index.html new file mode 100644 index 0000000000..1f53e12cf4 --- /dev/null +++ b/files/uk/web/css/animation-name/index.html @@ -0,0 +1,141 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +
Animation-name - це властивість CSS, яка визначає одну або декілька анімацій, які повинні бути застосовані на елементі. Кожне animation-name вказує на {{cssxref("@keyframes")}} правило, яке визначає значення властивостей для анімаційного ряду.
+ +
 
+ +
/* Single animation */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* Multiple animations */
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Global values */
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+ +

Часто, буде зручно користуватися коротким варіантом  {{cssxref("animation")}} для встановлення усіх властивостей анімації за один раз.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
none
+
Значення, яке вказує на відсутність основних кадрів (keyframes). Може бути використано для деактивації анімації без зміни інших параметрів анімації, or to deactivate animations coming from the cascade.
+
{{cssxref("<custom-ident>")}}
+
Ім'я анімації. Цей ідентифікатора складається з комбінаціїThis identifier is composed of a combination of літер a-z (без врахування регістру літер), цифр 0-9, підкреслення (_), і/або дефісу (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be none, unset, initial, or inherit.
+
+ +
+

Note: When you specify multiple comma-separated values on an animation-* property, they will be assigned to the animations specified in the {{cssxref("animation-name")}} property in different ways depending on how many there are. For more information, see Setting multiple animation property values.

+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

See CSS animations for examples.

+ +

Specifications

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

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}[1]		10 12 {{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.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.

+ +

See also

+ + diff --git a/files/uk/web/css/attr()/index.html b/files/uk/web/css/attr()/index.html new file mode 100644 index 0000000000..1a484489b4 --- /dev/null +++ b/files/uk/web/css/attr()/index.html @@ -0,0 +1,265 @@ +--- +title: attr() +slug: Web/CSS/attr() +tags: + - CSS + - CSS функція + - Web + - attr + - Макет +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +
+ +
+ +
Примітка: Функція attr() може буті використана з будь-якою властивісттю CSS, але підтримка для властивостей інших ніж {{CSSxRef("content")}} є експериментальною, і підтримка для параметру type-or-unit обмежена.
+ +
+ +

Функція attr() в CSS використовується для повернення значення атрибуту вибраного елементу і використання його в таблиці стилів. Вона може бути використана на псевдоелементах, і в цьому випадку повертається значення атрибута для використання в якості тексту псевдоелемента.

+ +
/* Просте застосування */
+attr(data-count);
+attr(title);
+
+/* З параметром type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* З параметром  fallback */
+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>")}}Значення атрибута трактується як CSS {{CSSxRef("<string>")}}. Воно НЕ буде оброблюватися, і зокрема символи будуть використані як-є замість того, щоб маскування CSS перетворювалися на інші символи.Пустий рядок.
color {{Experimental_Inline}}{{CSSxRef("<color>")}}Значення атрибуту аналізується як хеш (3- або 6-значні хеші) або як ключове слово. Повінне бути дійсним значенням CSS {{CSSxRef("<string>")}}.
+ Провідні і кінцеві прогалини будуть прибрані.		currentColor
url {{Experimental_Inline}}{{CSSxRef("<url>")}}Значення атрибута аналізується як CSS рядок що використовується всередині CSS функції url().
+ Відносна URL-адреса вирішується відносно оригінального документа, а не щодо таблиці стилів.
+ Провідні і кінцеві прогалини будуть прибрані.		The url about:invalid that points to a non-existent document with a generic error condition.
integer {{Experimental_Inline}}{{CSSxRef("<integer>")}}Значення атрибута аналізується як CSS {{CSSxRef("<integer>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані.		0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
number {{Experimental_Inline}}{{CSSxRef("<number>")}}Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані.		0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
length {{Experimental_Inline}}{{CSSxRef("<length>")}}Значення атрибута аналізується як CSS {{CSSxRef("<length>")}} вимір, що вміщує одиниці виміру (наприклад, 12.5em). Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини
+ Провідні і кінцеві прогалини будуть прибрані.		0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{Experimental_Inline}}{{CSSxRef("<length>")}}Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (e.g. 12.5), і трактується як {{CSSxRef("<length>")}} з вказаними одиницями виміру. Якщо воно не є дійсним значенням, тобто не є довжиною або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Якщо дана одиниця виміру є відносною довжиною, attr () обчислює її до абсолютної довжини
+ Провідні і кінцеві прогалини будуть прибрані.		0, або, якщо 0 не є дійсним значенням для властивості, мінімальним значенням властивості.
angle {{Experimental_Inline}}{{CSSxRef("<angle>")}}Значення атрибута аналізується як CSS {{CSSxRef("<angle>")}} вимір, із зазначеними одиницями віміру (наприклад, 30.5deg). Якщо воно не є дійсним значенням, тобто не є мірою кута або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані.		0deg, або, якщо 0deg не є дійсним значенням для властивості, мінімальним значенням властивості.
deg, grad, rad {{Experimental_Inline}}{{CSSxRef("<angle>")}}Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, 12.5), і трактується як  {{CSSxRef("<angle>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані.		0deg, або, якщо 0deg не є дійсним значенням для властивості, мінімальним значенням властивості.
time {{Experimental_Inline}}{{CSSxRef("<time>")}}Значення атрибута аналізується як CSS {{CSSxRef("<time>")}} вимір, із зазначеними одиницями віміру (наприклад, 30.5ms). Якщо воно не є дійсним значенням, тобто не є значенням часу або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані.		0s, або, якщо 0s не є дійсним значенням для властивості, мінімальним значенням властивості.
s, ms {{Experimental_Inline}}{{CSSxRef("<time>")}}Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, що не містить одиниць виміру (наприклад, 12.5), і трактується як {{CSSxRef("<time>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані..		0s, або, якщо 0s не є дійсним значенням для властивості, мінімальним значенням властивості.
frequency {{Experimental_Inline}}{{CSSxRef("<frequency>")}}Значення атрибута аналізується як CSS {{CSSxRef("<frequency>")}} вимір, із зазначеними одиницями віміру (наприклад, 30.5kHz). Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.0Hz, або, якщо 0Hz не є дійсним значенням для властивості, мінімальним значенням властивості.
Hz, kHz {{Experimental_Inline}}{{CSSxRef("<frequency>")}}Значення атрибута аналізується як CSS {{CSSxRef("<number>")}}, тобто без одиниць виміру (наприклад, 12.5), і трактується як {{CSSxRef("<frequency>")}} із зазначеними одиницями віміру. Якщо воно не є дійсним значенням, тобто не є частотою або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Провідні і кінцеві прогалини будуть прибрані.		0Hz, або, якщо 0Hz не є дійсним значенням для властивості, мінімальним значенням властивості.
% {{Experimental_Inline}}{{CSSxRef("<percentage>")}}Значення атрибута аналізується як CSS {{CSSxRef ("<number>")}}, тобто без одиниць виміру (наприклад, 12.5), і інтерпретується як {{CSSxRef ("<percentage>")}}. Якщо воно не є дійсним значенням, тобто не є числом або виходить за межі діапазону, прийнятого властивістю CSS, використовується значення за замовчуванням.
+ Якщо дане значення використовується як довжина, attr () обчислює його до абсолютної довжини.
+ Провідні і кінцеві прогалини будуть прибрані.		0%, або, якщо 0% не є дійсним значенням для властивості, мінімальним значенням властивості.
+
+
<fallback> {{Experimental_Inline}}
+
Значення, яке буде використовуватися, якщо пов'язаний атрибут відсутній або містить неприпустиме значення. Резервне значення має бути допустимим, якщо вказано attr(), навіть якщо воно не використовується, і не повинно містити іншого виразу attr(). Якщо attr() не є єдиним значенням компонента властивості, його значення <fallback> повинно мати тип, визначений <type-or-unit>. Якщо не встановлено, CSS буде використовувати значення за замовчуванням, визначений для кожного <type-or-unit>.
+
+ +

Формальний синтаксис

+ +
{{CSSSyntax}}
+ +

Приклади

+ +

Властивість content

+ +

HTML

+ +
<p data-foo="hello">world</p>
+ +

CSS

+ +
[data-foo]::before {
+  content: attr(data-foo) " ";
+}
+ +

Результат

+ +

{{EmbedLiveSample("content_property", "100%", 50)}}

+ +

<color> значення

+ +

{{SeeCompatTable}}

+ +
+

HTML

+ +
<div class="background" data-background="lime">background expect to be red if your browser does not support adavanced usage of attr()</div>
+ +

CSS

+ + + +
.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("color-value", "100%", 50)}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}Без змін.
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

Додано два не обов'язкові параметри;
+ може використовуватися зі всіма властивостями;
+ може повертати інші значення, крім {{CSSxRef("<string>")}}.

+ Ці зміни експериментальні і можуть бути скасовані під час фази CR, якщо підтримка браузерів занадто мала.
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Обмежено властивісттю {{CSSxRef("content")}};
+ завжди повертає {{CSSxRef("<string>")}}.
+ +

Сумісність браузерів

+ + + +

{{Compat("css.types.attr")}}

+ +

Також перегляньте

+ + diff --git a/files/uk/web/css/backdrop-filter/index.html b/files/uk/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..ca4da47ee3 --- /dev/null +++ b/files/uk/web/css/backdrop-filter/index.html @@ -0,0 +1,136 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Властивість backdrop-filter дозволяє застосувати графічні ефекти, такі як розмиття або зміщення кольорів до області позаду елемента. Оскільки це стосується всього, що стоїть поза елементом, щоб побачити ефект, ви повинні зробити елемент або його фон принаймні частково прозорим.

+ +
/* Значення ключового слова */
+backdrop-filter: none;
+
+/* URL до SVG фільтру */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Значення фільтру функцій */
+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>
+
Перелік фільтрів, розділених пробілами які застосовані для фону. Список фільтрів такий же як і для властивості filter.
+
+ +

Формальний синтаксис

+ +
{{csssyntax}}
+ +

Приклад

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-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: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

Результат

+ +

{{EmbedLiveSample("Example", 600, 400)}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікацяСтатусКоментар
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Initial definition.
+ +

Сумісність з браузерами

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/css/css_animations/index.html b/files/uk/web/css/css_animations/index.html new file mode 100644 index 0000000000..9b1af6c15e --- /dev/null +++ b/files/uk/web/css/css_animations/index.html @@ -0,0 +1,140 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS анімації + - Довідка + - Огляд +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

CSS-анімації - це модуль CSS, який дозволяє вам змінювати значення CSS-правил впродовж певного часу, використовуючи ключові кадри (keyframes). Поведінка цих анімацій може контролюватися шляхом встановлення їх функцій синхронізації, тривалості, числа повторів, та інших атрибутів.

+ +

Довідка

+ +

CSS Властивості

+ +
+ +
+ +

CSS @-правила

+ +
+ +
+ +

Посібники

+ +
+
Виявлення підтримки CSS-анімації
+
Описує техніку виявлення підтримки браузером CSS-анімації.
+
Використання CSS анімацій
+
Покроковий підручник про те, як створити анімацію засобами CSS. Дана стаття описує кожне відповідне CSS властивість і at-правило, та пояснює, як вони взаємодіють між собою.
+
Підказки і хитрощі для CSS анімацій
+
Підказки і хитрощі, які допоможуть вам досягти якнайкращих результатів у CSS-анімаціях. В даний момент описує техніку, що дозволяє програти спочатку уже запущену анімацію (API не підтримує напряму такий функціонал).
+
+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Початкове визначення.
+ +

Сумісність із браузерами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВластивістьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Базова підтримка{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatVersionUnknown}}{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ВластивістьAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatVersionUnknown}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Часткова підтримка: властивість {{cssxref("animation-fill-mode")}} не підтримується в Android браузері до версії 2.3.

+ +

[2] Ознайомтесь із release notes to Opera 12.50.

+ +

Дивіться також

+ + + +

 

diff --git "a/files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" "b/files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" new file mode 100644 index 0000000000..f8b8466ef4 --- /dev/null +++ "b/files/uk/web/css/css_animations/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_css_\320\260\320\275\321\226\320\274\320\260\321\206\321\226\320\271/index.html" @@ -0,0 +1,357 @@ +--- +title: Використання CSS анімацій +slug: Web/CSS/CSS_Animations/Використання_CSS_анімацій +tags: + - CSS Animations + - Довідка +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

CSS анімації роблять можливим анімацію переходів (transitions) з однєї конфігурації CSS стилю до іншої. Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів (keyframes), які задають початковий та кінцевий стан стилю анімації, а також є можливим задання точок проміжного стану.

+ +

В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:

+ +
    +
  1. Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.
    2. +
  2. Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені). Движок рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.
    3. +
  3. Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість брауцзеру оптимізувати свою роботу та ефективність, наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.
    4. +
+ +

Конфігурування анімації

+ +

Щоб створити CSS-анімаційну послідвність, ви стилізуєте анімований елемент {{ cssxref("animation") }} властивістю чи її підвластивостями. Це дозвоялє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це не конфігурує актуальний вигляд анімації, яка здійснюється проходом через {{ cssxref("@keyframes") }} at-правила, як це описано в {{ anch("Визначення послідовності анімації через ключові кадри") }} нижче.

+ +

Підвластивостями властивості {{ cssxref("animation") }} є:

+ +
+
{{ cssxref("animation-delay") }}
+
Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.
+
{{ cssxref("animation-direction") }}
+
Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.
+
{{ cssxref("animation-duration") }}
+
Визначає тривалість циклу анімації.
+
{{ cssxref("animation-iteration-count") }}
+
Визначає кількість проходів (повторів) анімації; ви можете також обрати значення infinite для нескінченного повтору анімації.
+
{{ cssxref("animation-name") }}
+
Задає ім'я для анімації {{ cssxref("@keyframes") }} через at-правило, яке описує анімаційні ключові кадри.
+
{{ cssxref("animation-play-state") }}
+
Дозволяє вам призупиняти та відновлювати анімацію.
+
{{ cssxref("animation-timing-function") }}
+
Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо завдяки кривим прискорення.
+
{{ cssxref("animation-fill-mode") }}
+
Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.
+
+ +

Визначення послідовності анімації через ключові кадри

+ +

Опісля того, як ви задали анімації таймінг, вам потрібно задати вигляд анімації. Це робиться завдяки одному чи більше  ключовому кадру шляхом застосування at-правила {{ cssxref("@keyframes") }}. Кожен ключовий кадр описує, як саме повинен відображатися анімований елемент у певний момент під час проходження анімаційної послідовності.

+ +

Після того, як таймінг анімації був заданий в CSS стилі, який конгфігурує анімацію, ключові кадри використовують {{ cssxref("percentage") }} для відображення моменту під час анімації, в якому буде розміщений той чи інший ключовий кадр. 0% вказує на сам початок анімаціїйної послідовності, тоді як 100% вказує на завершальний етап анімації. Оскільки ці два моменти є такими важливими, вони мають свої спеціальні імена: from і to відповідно. Обидва ці імені є необов'язковими. Якщо from/0% чи to/100% не є задано, то браузер починає чи зупиняє анімацію використовуючи середньообраховані значення всіх атрибутів.

+ +

Ви також можете на свій розсуд додавати проміжні кадри до анімації, аби описати стан анімації в проміжні періоди.

+ +

Приклади

+ +
Примітка: Подані приклади не використовують вендорних префіксів. WebKit-браузери та старіші версії інших браузерів можуть потребувати цих префіксів; приклади, на які ви можете клацнути для перегляду у вашому браузері також включають -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") }}-елемента визначає, що тривалість анімації становить 3 секунди від початку до кінця, використовуючи властивість {{ cssxref("animation-duration") }}, а також присвоює ім'я цій анімації, яке використано у ключових кадрах {{ cssxref("@keyframes") }} . Їхні at-правила визначили, що це ключові кадри для анімації, яка називається “slidein”.

+ +

Якщо нам потрібно ще якусь додаткову стилізацію елемента {{ HTMLElement("p") }} для відобаження в браузерах, які не підтримують CSS анімацій, то ми б її включили туди ж; однак, в цьому випадку ми не потребуємо додаткової стилізації, крім анімації елемента.

+ +

Ключові кадри визначені через  at-правила {{ cssxref("@keyframes") }}. В даному випадку є лише два ключових кадри. Перший ключовий кадр наступає в 0% (вжито спеціальне ім'я from). Тут, ми змінюємо лівий маргін елемента як 100% (тобто це відраховується, як відстань від правого краю контейнера), і встановили 300% ширини для елемента (Втричі ширше за контейнер). Завдяки цьому на першому ключовому кадрі анімований елемент буде знаходитися поза межами контейнера (вікна браузера).

+ +

Другий ключовий кадр (він же завершальний) розміщений на завершенні анімації, 100% (спеціальне ім'я to). Лівий маргін встановлено як 0% і ширину елемента ми встановили як 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>
+
+ +

(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на кнопку CodePen, щоб побачити анімацію в середовищі CodePen)

+ +

{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+ +

Додавання інших ключових кадрів

+ +

Давайте додамо ще один ключовий кадр до анімації з попереднього прикладу. Припустимо, нам потрібно трішки збільшити шрифт, коли текст рухається вліво, а потім ми його повертаємо до попередніх параметрів. Це просто, як додавання ось такого ключового кадру:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Це повідомляє браузеру, що елемент, при виконанні 75% анімації, повинен мати лівий маргін 25% і ширину 150%.

+ +

(Перезавантажте сторінку, аби побачити анімацію, або ж клікніть на конпку CodePen, щоб побачити анімацію в середовищі CodePen)

+ +

{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+ +

Making it repeat

+ +

Якщо вам потрібно, аби анімація повторювалась, просто використайте властивість  {{ cssxref("animation-iteration-count") }} , щоб зазначити, скільки разів повинна повторитися анімація. В даному випадку давайте використаємо значення infinite для отримання постійної анімації:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+ +

Змінюємо напрямки анімації

+ +

Отже, анімація повторювана, але це виглядає дивно: текст по завершенню циклу, з початком нового знову стрибає вбік. Отже нам треба зробити, аби текст плавно повертався назад, на початкову позицію. Це просто: прописуємо у {{ cssxref("animation-direction") }} значення alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+ +

Використання скорочень для правил анімації

+ +

{{ 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 анімації можуть приймати множинні значення, розділені комами — таку особливість можна використати, якщо вам потрібно задати множинні анімації єдиним набором правил і відповідно задати різні тривалості, повтори і так далі для різних анімацій. Давайте глянемо на кілька швидких прикладів, аби пояснити різні зміни:

+ +

В першому прикладі у нас є набір з трьох різних імен анімації, але одна й та ж тривалість і кількість повторів:

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+ +

В другому прикладі в нас є набір з 3х значень для кожної властивості. В цьому випадку кожна анімація буде здійснюватися з відповідними значеннями, згідно з їх розміщенням у властивостях, то ж, приміром, fadeInOut має тривалість в 2.5s і кількість повторів 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("AnimationEvent") }}, можуть бути використані, аби визначити, коли починаються, закінчуються і починають новий повтор різні анімації. Кожна подія містить час, о котрій вона сталась та ім'я анімації, яка її запустила.

+ +

Зараз ми змінимо приклад з ковзаючим текстом, аби вивести певну інформацію про кожну анімаційну подію, тобто її час, то ж ми можемо розібратися, як вони працюють.

+ +

Додавання CSS

+ +

Починаємо зі створення CSS для анімації. Дана анімація триватиме 3 секунди, назвемо її “slidein”, задамо повтор 3 рази, і напрям анімації alternate кожного разу. В {{ cssxref("@keyframes") }}, ширина і лівий маргін змінюються, щоб текст ковзав по екрану.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+ +

Встановлення animation event listeners - прослуховування подій анімації

+ +

Ми використаємо код JavaScript для прослуховування всіх трьох можливих подій анімації. Даний код задає наші event listeners; ми викликаємо його, коли документ вперше завантажений, для того, щоб отримати впорядковані дані.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+ +

Це цілком звичайний код, аби дізнатися більше, ви можете звіритися з документацією {{ domxref("eventTarget.addEventListener()") }}. Останнє, що робить код - він задає клас анімованого елемента як “slidein”; це нам потрібно для запуску анімації.

+ +

Чому? Тому що подія animationstart запускається одразу ж, як стартує анімація; в даному випадку це стається до того, як починає діяти наш код. То ж ми починаємо анімацію самі, задаючи клас елементу для стиля, котрий буде анімований по факту.

+ +

Отримання подій

+ +

Події надсилаються до функції 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") }} (невпорядкований список), який ми використовуємо для виводу звіту про ці події.

+ +

Звіт після завершення роботи буде виглядати якось от так:

+ + + +

Зауважте, що часи подій досить точні щодо тих, які ми очікували відповідно до таймінгу, який ми задали, коли створювали анімацію. Візьміть до уваги також і те, що після завершального проходу анімації подія animationiteration не була надіслана; натомість надіслало подію animationend.

+ +

HTML

+ +

Чисто для повної завершеності огляду ось код, який відображає контент сторіки, включно зі списком звіту про події анімації, який створився завдяки вищеописаному скрипту:

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</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('Using_animation_events', '600', '300')}}

+ +

Дивіться також

+ + diff --git "a/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" "b/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" new file mode 100644 index 0000000000..b47325c5bf --- /dev/null +++ "b/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" @@ -0,0 +1,90 @@ +--- +title: Згортання відступів +slug: Web/CSS/CSS_Box_Model/Згортання_відступів +tags: + - CSS + - Коробчаста модель CSS + - Посібник +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

+ +

Margin collapsing occurs in three basic cases:

+ +
+
Безпосередні (прилеглі) сусіди
+
The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
+
Батько та перший/останній дочірній елемент
+
If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or clearance to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
+
+ +
+
Порожні блоки
+
If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.
+
+ +

More complex margin collapsing (of more than two margins) occurs when these cases are combined.

+ +

These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.

+ +

When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.

+ +

When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.

+ +

Приклади

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed...</p>
+<p>...with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>Blah blah blah.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Examples','100%',250)}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Первинне визначення
+ +

Див. також

+ + diff --git a/files/uk/web/css/css_flexible_box_layout/index.html b/files/uk/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..3520d3040d --- /dev/null +++ b/files/uk/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,132 @@ +--- +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 Layout це модуль CSS що реалізує можливість розмітки макета за допомогою оптимізованої коробочної моделі, що використовується для створення дизайну інтерфейса користувача, та проводити вирівнювання елементів в одному із вимірів. В цій моделі (flex layout), потомки flex контейнера можуть бути розміщені відносно будь якої осі, і можуть "гнучко" змінювати свій розмір, можуть рости, щоб зайняти весь відведений простір або зменшуватись щоб не переповнити своїми поточними розмірами контейнер, що їх містить. Наявне і горизонтальне і вертикальне вирівнювання потомків, і до того-ж проводити будь-які маніпуляції дуже легко.

+ +

 

+ +

 

+ +

Простий Приклад

+ +

В наступному прикладі у контейнерa встановлено властивість display: flex, що означає - три його вкладені елементи є  flex елементами. Значення justify-content має значення space-between для того щоб порожній простір між елементами рівномірно розподілився по головній осі. Однаковий простір буде виділений між кожним елементом, але при цьому крайні елементи(перший та останній) не будуть мати  справа та зліва відповідно відступів від контейнера. Ви можете бачити що елементи будуть розподілені по поточній направляючій вісі, бо на це впливають виставлені по замовчуванню значення властивості align-items рівний stretch. Елементи розтягуються по висоті flex контейнера, і кожен стане такої висоти як самий вищий елемент.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Reference

+ +

 

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

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.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ 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/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..cdb8ea92c1 --- /dev/null +++ b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,390 @@ +--- +title: Використання CSS flexible-боксів +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

CSS3 flex-бокс, або flexbox, це режим розмітки створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).

+ +

Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.

+ +
Увага: Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із  таблицею сумісності для flex боксів
+ +

Концепція flex-боксів

+ +

Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.

+ +

Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.

+ +

Словник Flexible box термінів  

+ +

Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає flex-контейнер, що має  flex-напрямок ряду, що означає, що кожен flex item розміщений горизонтально, один за одним по головній осі (main axis) відповідно до встановленного режиму написання, напрямку тексту елементу. Зліва-направо у данному випадку.

+ +

flex_terms.png

+ +
+
Flex-контейнер
+
Батьківський елемент, у якому містяться flex-айтеми. Flex-контейнер визначається flex або inline-flex значеннями {{Cssxref("display")}} властивості.
+
Flex-айтем
+
+

Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.

+
+
Осі
+
+

Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (main axis) - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (cross axis) вісь, що перпендикулярна до main axis.

+ +
    +
  • Властивість flex-direction встановлює main axis.
    • +
  • Властивість justify-content визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.
    • +
  • Властивість align-items визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.
    • +
  • Властивість align-self встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою align-items.
    • +
+
+
Напрямки
+
+

Головний початок/головний кінець(main start/main end) і перехресний початок/перехресний кінець(cross start/cross end) це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).

+ +
    +
  • Властивість order присвоює елементи порядковим групам і визначає, який елемент є першим.
    • +
  • Властивість flex-flow це скорочена форма для flex-direction та flex-wrap властивостей.
    • +
+
+
Лінії
+
+

Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до flex-wrap властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.

+
+
Виміри
+
Еквівалентами для height і width для flex-айтемів є main size та cross size, які відповідно стосуються main axis і cross axis flex-контейнера.
+
+
    +
  • Початковим значенням для min-height і min-width є 0.
    • +
  • Властивість flex виступає скороченням для flex-grow, flex-shrink, а також flex-basis властивостей для встановлення гнучкості flex-айтема.
    • +
+
+
+ +

Робимо елемент flexible-боксом

+ +

Щоб зробити елемент flexible-боксом, вкажіт занчення display властивості наступним чином:

+ +
display : flex
+ +

або

+ +
display : inline-flex
+ +

Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення flex робить контейнер блоковим елементом. А inline-flex значення перетворює його на інлайн-елемент.

+ +
Увага: Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, display : -webkit-flex.
+ +

Характеристики flex-айтема

+ +

Текст, що напряму поміщений до flex-контейнера автоматично обгортається в анонімний flex-айтем. Тим не менше анонімний flex-айтем, що містить лише пробільні симфоли не рендериться, так ніби йому було встановлене правило display: none.

+ +

Абсолютно-позиціоновані дочірні елементи flex-контейнера позиціонуються так, що іхня статична позиція визначається відносно головного стартового кута контент-боксу їхнього flex-контейнера.

+ +

У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів.  Для детальної інформації прочитайте  вирівнювання з допомогою 'auto' марджінів у W3C специфікації "модель Flexible-бокс розмітки" (англ.).

+ +

Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте min-width:auto і/або min-height:auto. Для flex-айтемів, значення атрибуту auto вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.

+ +

Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.

+ +

For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

+ +

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

+ +

Flexible box properties

+ +

Properties not affecting flexible boxes

+ +

Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:

+ + + +

Examples

+ +

Basic flex example

+ +

This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      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.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      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>
+ +

Holy Grail Layout example

+ +

This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.

+ +

HolyGrailLayout.png

+ +

Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           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 {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            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>
+ +

Playground

+ +

There are a few flexbox playgrounds available online for experimenting:

+ + + +

Things to keep in mind

+ +

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+ +

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

Browser compatibility

+ +

{{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 up to version  6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+ +

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+ +

[6] Up to Firefox 29, specifying visibility: collapse on a flex item causes it to be treated as if it were display: none instead of the intended behavior, treating it as if it were visibility: hidden. The suggested workaround is to use visibility:hidden for flex items that should behave as if they were designated visibility:collapse. For more information, see {{bug(783470)}}

diff --git a/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..84c95201bb --- /dev/null +++ b/files/uk/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,699 @@ +--- +title: Основна концепція макета grid +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +tags: + - CSS Grid + - Посібник +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS Grid Layout вводить двовимірну сітку до CSS. Сітки можуть бути використані для виділення основних областей сторінки або невеликих елементів інтерфейсу користувача. У цій статті надана схема CSS Grid Layout та нова термінологія, що є частиною специфікації CSS Grid Layout Level 1. Функції, наведені в цьому огляді, будуть більш детально пояснені далі в цьому посібнику.

+ +

Що таке grid?

+ +

Grid є перехресним набором  горизонтальних і вертикальних ліній, що перетинаються - один набір визначає стовпці,  інший рядки. Елементи можуть бути розміщені на сітці, дотримуючись цих стовпців та рядків. Макет сітки CSS має такі особливості:

+ +

Фіксовані та гнучкі розміри смуг

+ +

Ви можете створити сітку з фіксованими розмірами смуг – наприклад, використовуючи пікселі. Це встановлює сітку на певні пікселі, що відповідають бажаному макету. Ви також можете створити сітку з використанням гнучких розмірів у відсотках або з новою одиницею fr, яку розроблену саме для цієї мети.

+ +

Розміщення елементів

+ +

Ви можете розміщувати елементи у точному місці сітки, використовуючи номери рядків, імена або орієнтуючись на область сітки. Сітка також містить алгоритм для контролю розміщення елементів, які не мають явного положення на сітці.

+ +

Створення додаткових смуг для вмісту

+ +

Ви можете визначати сітку явно в макеті сітки, але специфікація також стосується вмісту, доданого за межами оголошеної сітки, додаючи додаткові рядки та стовпчики за потребою. Спрацьовує принцип додавання " стільки стовпчиків, скільки вміститься в контейнер".

+ +

Управління вирівнюванням

+ +

Сітка містить функції вирівнювання для того, щоб ми могли контролювати, як вирівнюються розміщені в області сітки елементи  та як вирівнюється вся Grid-сітка.

+ +

Управління вмістом, що перекривається

+ +

У секцію сітки можна додати більш ніж один елемент. Також області можуть частково перекривати одна одну. Цим накладенням можна керувати за допомогою {{cssxref("z-index")}} властивості.

+ +

Grid - це потужна специфікація, яка у поєднанні з іншими можливостями CSS такими, як flexbox, дозволяє вам створювати макети, які раніше неможливо було створити за допомогою CSS. Все починається шляхом створення сітки у grid-контейнері.

+ +

Grid-контейнер

+ +

Ми створюємо grid-контейнер оголошуючи display: grid або display: inline-grid на елементі. Як тільки ми це зробимо, всі прямі діти елементу стають 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('The_Grid_container', '200', '330') }}

+ +

Всі прямі нащадки тепер є grid-елементами. В браузері ви не помітите ніякої різниці між виглядом елементів до і після створення grid-контейнеру. З цієї точки зору вам буде корисно працювати в редакторі Firefox Developer Edition, який має Grid Inspector, доступний як частина інструментів розробника. Якщо ви розглянете цей приклад в  Firefox і перевірите grid, ви побачите маленький значок біля значення grid. Клікніть його і сітка накладеться на цей елемент у вікні браузера.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Як вийде - працюйте з  CSS Grid Layout, це інструмент надасть вам краще розуміння того що відбувається з вашою grid-сіткою візуально. 

+ +

Якщо ми хочемо щоб це було більше grid-орієнтовано, треба додавати більше смуг-стовбців.

+ +

Grid Смуги

+ +

Ми визначаємо рядки і стовпчики на нашій grid-сітці  властивостями {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}. Вони визначають grid смуги. Grid-смуга – це простір будь якими двома лініями на grid-сітці. На зображенні нижче кольорова смуга – перша смуга-рядок на нашій grid-сітці.

+ +

+ +

До попереднього прикладу можна додати властивість  grid-template-columns, визначаючи розмір смуг-стовпчиків.

+ +

Таким чином створено grid-сітку з трьома смугами-стовпчиками шириною по 200 рх. Дочірні елементи вкладатимуться в цю grid-сітку в кожну клітинку. 

+ +
+
<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 

+ +

Смуги визначаються одиницями довжини. Grid-сітка має додаткову одиницю довжини яка допомагає створювати гнучкі grid-смуги. Одиниця fr  являє собою частку вільного простору в  grid-контейнері. Наступна сітка створює три рівних по ширині смуги які  стають більше і менше відповідно наявному простору. 

+ +
+
<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;
+}
+
+ +

В останньому прикладі ми комбінуємо абсолютні одиниці ширини смуг з фракційними. Перша смуга  500 px, фіксована ширина відбирається з доступного простору. Решта простору ділиться на три і призначається двом гнучким смугам пропорційно. 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Визначення смуг зі значенням repeat()

+ +

Великі grid-сітки з багатьма стугами можуть використовувати значення repeat() для скорочення при визначенні стовпчиків: 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

Також може бути записано як:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Значення repeat може використовуватись лише для частини стовпчиків. В наступному прикладі ініційовано смугу 20 рх, секцію з 6 смуг шириною 1fr, і смугу 20 рх. 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Значення repeat визначає смуги, тобто його можливо використовувати для створення цілих шаблонів стовпчиків. В наступному прикладі grid-сітка складається з 10 смуг. Смуга 1fr , смуга 2fr і так п'ять разів.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

Неявна і явна Grid-сітка

+ +

Cтворюючи Grid-сітку нашого прикладу, ми визначили стовпчики-смуги властивістю {{cssxref("grid-template-columns")}}, але дозволимо grid-сітці створювати рядки так, як краще для контенту. Такі рядки створюються в неявній grid-сітці. Явна grid-сітка складається з рядків і стовпчиків, які визначаються властивостями  {{cssxref("grid-template-columns")}} та {{cssxref("grid-template-rows")}}.

+ +

Якщо ми розташовуємо щось поза цією grid-сіткою, або кількість вмісту потребує більше grid смуг, тоді  grid-сітка створює рядки і стовпчики в неявній  grid-сітці. Такі смуги матимуть авторозмір за замовчуванням якраз щоб вмістити свій контент.

+ +

Ви також можете визначити встановлений розмір для смуг, створених в неявній grid-сітці властивостями {{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('The_implicit_and_explicit_grid', '230', '420') }}

+ +

Розміри смуги і minmax()

+ +

Встановлюючи явну grid-сітку або визначаючи розміри для автоматично створених рядків або стовпчиків може виникнути необхідність надання смугам мінімального розміру. Але треба переконатись що розширюючись, вони відповідатимуть будь якому доданому контенту. Наприклад ми хочемо щоб рядки ніколи не були менше 100 рх, але якщо контент розширюється до 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('Track_sizing_and_minmax()', '240', '470') }}

+ +

Grid Лінії

+ +

Варто зауважити що коли ми визначаємо Grid, ми визначаємо grid-смуги (але не grid-лінії). В такому випадку Grid дає нам нумеровані лінії для позиціонування елементів. В прикладі нижче Grid має 3 стовпчика, 2 рядки і 4 вертикальних лінії.

+ +

Diagram showing numbered grid lines.

+ +

Лінії пронумеровано згідно способу нумерації документа: зліва направо і зверху вниз (якщо на мові що викоричтовується пишуть справа наліво, то і нумерація ліній справа наліво). Лінії також можуть бути поіменовані.

+ +

Позиціонування елементів по лініях

+ +

Наступний приклад демонструє просте позиціонування елементів по лініях. При розміщенні елементів ми надаємо перевагу більше лініям ніж смугам.

+ +

В наступному прикладі ми розміщуємо перші два елементи на Grid-cітці, яка складається з трьох смуг-стовпчиків, застосовуючи властивості {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} та {{cssxref("grid-row-end")}}.  Рухаючись зліва направо, перший елемент починається з вертикальної лініі 1 і простягається до вертикальної лініі 4, що праворуч нашої Grid-сітки. Він починається на горизонтальній лінії 1 і закінчується на горизонтальній лінії 3, тобто займає два рядка смуг.

+ +

Другий елемент починається з вертикальної лініі 1, і простягається на одну смугу. Це за замовчуванням, тому можна не вказувати кінцеву лінію. Також по рядках він простягається з горизонтальній лінії 3 до горизонтальній лінії 5. Інші елементи розміщуються в порожніх просторах на 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 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('Positioning_items_against_lines', '230', '420') }}

+ +

Не забуваймо, що можна використовувати Grid Inspector в Firefox Developer Tools щоб побачити як елементи позиціонуються на лініях Grid-сітки.

+ +

Grid-клітини

+ +

Grid-клітина – найменша одиниця Grid-сітки, по аналогії з чарунком таблиці. Як ми бачили в попередніх прикладах, якщо Grid-сітка визначена як батьківська, дочірні елементи лежатимуть по одному в кожній її клітині. На зображенні кольором позначено першу клітину Grid-сітки.

+ +

The first cell of the grid highlighted

+ +

Grid-ділянки

+ +

Елементи можуть розташовуватись на одній або декількох клітинках як в рядок так і в стовпчик, і це створює Grid-ділянки. Grid-ділянки завжди прямокутні, неможлива, наприклад, L-подібна Grid-ділянка. На зображенні Grid-ділянка займає два рядки і два стовпчики.

+ +

A grid area

+ +

Розриви

+ +

Розриви між Grid-клітинами створюються властивістями {{cssxref("grid-column-gap")}} та {{cssxref("grid-row-gap")}}, або скорочено {{cssxref("grid-gap")}}. В наступному прикладі створюється проміжок у 10рх між стовпчиками та проміжок 1em між рядками. 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 10px;
+  row-gap: 1em;
+}
+ +
+

Примітка: Коли гріди тільки почали використовуватись браузерами {{cssxref("column-gap")}}, {{cssxref("row-gap")}} та {{cssxref("gap")}} мали префікси grid- як от {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} та {{cssxref("grid-gap")}} відповідно.

+ +

Браузери наразі оновлюються, щоб видалити цей префікс, проте попередньо встановлені версії також будуть підтримуватися як псевдоніми, що робить їх безпечними для використання. В даний час деякі веб-переглядачі не підтримують безпрефіксний варіант, тому в прикладах цього посібника використовуюється версія з grid- префіксом.

+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+ + + +

{{ EmbedLiveSample('Gutters') }}

+ +

Будь-який простір, відведений на розриви, буде враховуватись до відведення простору для гнучких fr довжин смуг. Розриви використовуваються в розмітці, як звичайні grid-смуги, за виключенням того, що ви не зможете в них нічого помістити. З точки зору лінійного позиціонування розрив діє як товста лінія.

+ +

Вкладені Grid-сітки

+ +

Grid-елементи можуть ставати Grid-контейнерами. В попередньому прикладі ми створили Grid-сітку з трьох стовпчиків з двома позиціонованими елементами.  Перший з них має піделементи. Оскільки ці елементи не є прямими нащадками, вони не беруть участі в  Grid-розкладці і відображаються в нормальному потоці. 

+ +
+
<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

+ +

Якщо застосувати display: grid до box1, то ця Grid-смуга також стане Grid-сіткою. А елементи, що в ній містяться, надалі розташовуватимуться на цій новій 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")}}, а також лінії дочірньої сітки не вирівнюються по лініях батьківської сітки.

+ +

Під-сітка

+ +

У робочій чорнетці специфікації Grid Level 2 є функція під назвою subgrid, яка має дозволити нам створювати вкладені сітки, які б використовували визначення смуги батьківської сітки.

+ +
+

Примітка: під-сітки ще не реалізовані в жодному браузері, і їхня специфікація ще може змінюватися.

+
+ +

У поточній специфікації ми відредагуємо вищезгаданий приклад вкладеної Grid-сітки, змінивши визначення смуги з grid-template-columns: repeat(3, 1fr) , на grid-template-columns: subgrid. Вкладена сітка надалі використовуватиме батьківські Grid-смуги до елементів макета.

+ +
.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

+ +

Grid-елементи можуть займати одну і ту ж саму клітину. Якщо повернутись до нашого прикладу з елементами, що розташовані за номером рядка, ми можемо змінити його так, щоб два елементи перекривали один одного.

+ +
+
<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, то він і буде показаний нижче у стеці.

+ +
.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('Controlling_the_order', '230', '420') }}

+ +

Наступні кроки

+ +

У цій статті ми швидко переглянули специфікацію Grid Layout. Пограйте з прикладами коду, а потім переходьте до наступної частини цього посібника, де ми насправді почнемо заглиблюватись в деталі CSS Grid Layout.

+ + diff --git a/files/uk/web/css/css_grid_layout/index.html b/files/uk/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..e403f8364f --- /dev/null +++ b/files/uk/web/css/css_grid_layout/index.html @@ -0,0 +1,245 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - Layout + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS Grid layout відзначається тим, що розділяє сторінку на ділянки чи задає співвідношення між елементами, побудованими з HTML примітивів, з точки зору розміру, положення та слоїв.

+ +

Подібно до таблиць, CSS Grid дозволяє автору вирівнювати елементи у стовпчиках та рядках. Однак, CSS Grid, в порівнянні з таблицями, надає більше можливостей і полегшує створення макетів. Наприклад, дочірні елементи Grid-контейнера можуть перекривати один одного і нашаровуватись, подібно до позиційованих CSS елементів.

+ +

Базовий приклад

+ +

У наведеному нижче прикладі показана сітка з трьома стовпчиками, в якій нові рядки мають мінімальну висоту 100 пікселів, а максимальна висота вираховується автоматично. Елементи розміщені в сітці використовуючи лінійне розташування .

+ +
+ + +

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 властивості

+ +
+ +
+ +

CSS функції

+ +
+ +
+ +

Глосарій

+ +
+ +
+ +

Посібники

+ +
+ +
+ +

Зовнішні ресурси

+ + + +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..7f715c0986 --- /dev/null +++ b/files/uk/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,628 @@ +--- +title: Relationship of grid layout to other layout methods +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS Grid Layout has been designed to work alongside other parts of CSS, as part of a complete system for doing the layout. In this guide, I will explain how a grid fits together with other techniques you may already be using.

+ +

Grid and flexbox

+ +

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.

+ +

Одновимірні макети проти двовимірних

+ +

A simple example can demonstrate the difference between one- and two-dimensional layouts.

+ +

In this first example, I am using flexbox to lay out a set of boxes. I have five child items in my container, and I have given the flex properties values so that they can grow and shrink from a flex-basis of 200 pixels.

+ +

I have also set the {{cssxref("flex-wrap")}} property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row.

+ +
+ + +
<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') }}

+ +

In the image, you can see that two items have wrapped onto a new line. These items are sharing the available space and not lining up underneath the items above. This is because when you wrap flex items, each new row (or column when working by column) becomes a new flex container. Space distribution happens across the row.

+ +

A common question then is how to make those items line up. This is where you want a two-dimensional layout method: You want to control the alignment by row and column, and this is where grid comes in.

+ +

The same layout with CSS grids

+ +

In this next example, I create the same layout using Grid. This time we have three 1fr column tracks. We do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. As you can see they stay in a strict grid, lining up in rows and columns. With five items, we get a gap on the end of row two.

+ +
+ + +
<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') }}

+
+ +

A simple question to ask yourself when deciding between grid or flexbox is:

+ + + +

Content out or layout in?

+ +

In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line.

+ +

Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

+ +

If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.

+ +

Box alignment

+ +

The feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. It made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These were things we have wanted to do for a very long time, and have come up with all kinds of hacks to at least create the visual effect of.

+ +

The alignment properties from the flexbox specification have been added to a new specification called Box Alignment Level 3. This means that they can be used in other specifications, including Grid Layout. In the future, they may well apply to other layout methods as well.

+ +

In a later guide in this series, I’ll be taking a proper look at Box Alignment and how it works in Grid Layout. For now, here is a comparison between simple examples of flexbox and grid.

+ +

In the first example, which uses flexbox, I have a container with three items inside. The wrapper {{cssxref("min-height")}} is set, so it defines the height of the flex container. I have set {{cssxref("align-items")}} on the flex container to flex-end so the items will line up at the end of the flex container. I have also set the {{cssxref("align-self")}} property on box1 so it will override the default and stretch to the height of the container and on box2 so it aligns to the start of the flex container.

+ + + +
<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') }}

+ +

Alignment in CSS Grids

+ +

This second example uses a grid to create the same layout. This time we are using the box alignment properties as they apply to a grid layout. So we align to start and end rather than flex-start and flex-end. In the case of a grid layout, we are aligning the items inside their grid area. In this case that is a single grid cell, but it could be an area made up of several grid cells.

+ + + +
<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') }}

+ +

The fr unit and flex-basis

+ +

We have already seen how the fr unit works to assign a proportion of available space in the grid container to our grid tracks. The fr unit, when combined with the {{cssxref("minmax", "minmax()")}} function can give us very similar behavior to the flex properties in flexbox while still enabling the creation of a layout in two dimensions.

+ +

If we look back at the example where I demonstrated the difference between one and two-dimensional layouts, you can see there is a difference between the way of the two layouts work responsively. With the flex layout, if we drag our window wider and smaller, the flexbox does a nice job of adjusting the number of items in each row according to the available space. If we have a lot of space all five items can fit on one row. If we have a very narrow container we may only have space for one.

+ +

In comparison, the grid version always has three column tracks. The tracks themselves will grow and shrink, but there are always three since we asked for three when defining our grid.

+ +

Auto-filling grid tracks

+ +

We can create a similar effect to flexbox, while still keeping the content arranged in strict rows and columns, by creating our track listing using repeat notation and the auto-fill and auto-fit properties.

+ +

In this next example, I have used the auto-fill keyword in place of an integer in the repeat notation and set the track listing to 200 pixels. This means that grid will create as many 200 pixels column tracks as will fit in the container.

+ + + +
<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') }}

+ +

A flexible number of tracks

+ +

This isn’t quite the same as flexbox. In the flexbox example, the items are larger than the 200 pixel basis before wrapping. We can achieve the same in grid by combining auto-fill and the {{cssxref("minmax", "minmax()")}} function. In this next example, I create auto filled tracks with minmax. I want my tracks to be a minimum of 200 pixels, so I set the maximum to be 1fr. Once the browser has worked out how many times 200 pixels will fit into the container–also taking account of grid gaps–it will treat the 1fr maximum as an instruction to share out the remaining space between the items.

+ + + +
<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') }}

+ +

We now have the ability to create a grid with a flexible number of flexible tracks, but see items laid out on the grid aligned by rows and columns at the same time.

+ +

Grid and absolutely positioned elements

+ +

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

+ +

A grid container as containing block

+ +

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

+ +

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  </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') }}

+ +

You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

+ +

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

+ +

A grid container as parent

+ +

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

+ +

Image of grid container as parent

+ +

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

+ +

With a grid area as the parent

+ +

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

+ +

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    </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') }}

+ +

Grid and display: contents

+ +

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

+ +
+

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

+
+ +

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

+ +
+ + +
<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') }}

+
+ +

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

+ +
+ + +
<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') }}

+
+ +

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

+ +

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout to get the different effects you need.

+ +

See Also

+ + + + diff --git a/files/uk/web/css/css_selectors/index.html b/files/uk/web/css/css_selectors/index.html new file mode 100644 index 0000000000..20f89ab44f --- /dev/null +++ b/files/uk/web/css/css_selectors/index.html @@ -0,0 +1,116 @@ +--- +title: CSS селектори +slug: Web/CSS/CSS_Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS селектори  означують елемнти до яких застосовується набір правил CSS.

+ +

Прості селектори

+ +
+
Селектор за типом (Type selector)
+
Вибирає всі елементи, що відповідають вказаному імені вузла.
+ Syntax: eltname
+ Example: input буде відповідати будь-якому елементу {{HTMLElement("input")}} .
+
Селектор за класом (Class selector)
+
Вибирає всі елементи, що відповідають вказаному атрибуту class.
+ Syntax: .classname
+ Example: .index буде відповідати будь-якому елементу, що має клас "index".
+
Селектор за ID (ID selector)
+
Вибирає елемент, відповідно до його значення атрибуту id. В документі повинен бути тільки один елемент з вказаним ID.
+ Syntax: #idname
+ Example: #toc буде відповідати елементу, що має ID зі значенням "toc".
+
Універсальний селектор (Universal selector)
+
Вибирає усі елементи. За бажанням, він може бути обмежений певним простором імен або всім простором імен.
+ Syntax: * ns|* *|*
+ Example: * буде відповідати усім елементам документу.
+
Селектор за атрибутом (Attribute selector)
+
Вибирає елементи, відповідно до його значення вказаного атрибуту.
+ Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Example: [autoplay] буде відповідати всім елементам що мають виставлений атрибут autoplay (в будь яке значення).
+
+ +

Комбінатори

+ +
+
Комбінатор прилеглого елемента
+
Комбінатор + вибирає прилеглі  елементи, що мають спільного нащадка (рівноправні). Це означає, що наступний елемент слідує безпосередньо за попереднім, і в обидвох спільний предок (обидва класи знаходятся в одному старшому класі).
+ Синтаксис: A + B
+ Приклад:  під дію h2 + p підпадуть усі випадки, у яких елемент  {{HTMLElement("p")}} знаходиться безпосередньо після елемента  {{HTMLElement("h2")}}.
+
Загальний комбінатор прилеглих елементів
+
Комбінатор ~ обирає сусідні елементи. Це значить, що другий елемент слідує за першим (хоча і не обов'язково безпосередньо зразу після нього), і обидва елементи знаходяться в межах лдного предка.
+ Синтаксис: A ~ B
+ Приклад: p ~ span відповідатиме усім випадкам, коли елемент {{HTMLElement("span")}} слідує за елементом {{HTMLElement("p")}}.
+
Комбінатор прямого нащадка
+
Комбінатор > обирає усі вузли (теги одного класу), які є прямими нащадками елемента, вказзаного першим.
+ Синтаксис: A > B
+ Приклад: ul > li відповідатиме усім випадкам, коли елемент  {{HTMLElement("li")}} буде вкладеним прямо в елемент {{HTMLElement("ul")}} (елемент  {{HTMLElement("ul")}} складається з {{HTMLElement("li")}}, що значить, що {{HTMLElement("li")}} є його прямим нащадком.
+
Комбінатор за нащадками (Descendant combinator)
+
Комбінатор   (space) обирає всі вузли, що є нащадками першого елемента.
+ Синтаксис: A B
+ Приклад: div span обиратиме усі елементи {{HTMLElement("span")}}, що знаходяться всередині елемента {{HTMLElement("div")}}, хоча і необов'язково напряму (елемент {{HTMLElement("span")}} може бути всередині {{HTMLElement("table")}}, яка знаходиться в {{HTMLElement("div")}}).
+
Стовпчиковий комбінатор {{Experimental_Inline}}
+
Комбінатор || вибирає усі вузли, що належать стовпчику.
+ Синтаксис: A || B
+ Приклад: col || td застосовуватиметься до усіх елементів {{HTMLElement("td")}}, що потрапляють в зону застосування {{HTMLElement("col")}}.
+
+ +

Псевдо-класи

+ +
+
Псевдо-класи роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.
+
Приклад: a:visited застосовуватиметься для усіх {{HTMLElement("a")}}, що були відвідані користувачем.
+
+ +

Псевдо-елементи

+ +
+
Псевдо-елементи представляють собою об'єкти, що не включені до HTML.
+
Приклад: p::first-line застосовуватиметься лише до першої стрічки елементів {{HTMLElement("p")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Added the ~ general sibling combinator and tree-structural pseudo-classes.
+ Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}Added the > child and + adjacent sibling combinators.
+ Added the universal and attribute selectors.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

See the pseudo-class and pseudo-element specification tables for details on those.

+ +

Див також

+ + diff --git a/files/uk/web/css/filter/index.html b/files/uk/web/css/filter/index.html new file mode 100644 index 0000000000..9339974d94 --- /dev/null +++ b/files/uk/web/css/filter/index.html @@ -0,0 +1,1184 @@ +--- +title: filter +slug: Web/CSS/filter +translation_of: Web/CSS/filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Опис

+ +

Властивість filter дає можливість застосувати до елементів такі графічні ефекти, як розмиття (blurring), збільшення чіткості (sharpening), зміна кольорів (color shifting). Зазвичай фільтри викорустовуються для налаштування рендерингу зображень, фонів (backgrounds) та границь (borders).

+ +

У CSS стандарт включені декілька функцій, які досягають визначених ефектів. Ви можете також посилатися на SVG-фільтр за допомогою посилання(URL) на SVG filter element.

+ +
Примітка: Більш старі версії браузера Windows Internet Explorer (4.0 - 9.0) підтримували нестандартний "filter", який з того часу є застарілим.
+ +

{{cssinfo}}

+ +

Syntax

+ +
filter: url("filters.svg#filter-id");
+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%);
+
+/* Apply multiple filters */
+filter: contrast(175%) brightness(3%);
+
+/* Global values */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

З функцією використовуйте наступне:

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

Для посилання на SVG {{SVGElement("filter")}} елемент використовуйте наступне:

+ +
filter: url(file.svg#filter-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, необхідно вказати значення (value) для однієї з наступних функцій. Якщо значення не є валідним, функція повертає "none". За винятком зазначених випадків, функції, які приймають значення, виражені у відсотках (наприклад, 34%), також приймають і ті значення, що виражені десятковим дробом (наприклад, 0.34).

+ +

url()

+ +

Функція url() приймає місцезнаходження XML-файлу, який визначає SVG-фільтр і має містити якір(anchor) до конкретного фільтр-елемента.

+ +
filter: url(resources.svg#c1)
+
+ +

blur()

+ +

Розмиття. Застосовує гаусове (Gaussian) розмиття до вхідного зображення. Значення радіусу (‘radius’) встановлює значення стандартного відхилення до гауссової (Gaussian) функції, або на скільки пікселі екрану мають зливатися один з одним. Тому більше значення забеспечить більше розмиття. Якщо жоден параметр не вказаний, використовується значення "0". Параметр визначений, як CSS довжина, але не приймає значень у відсотках.

+ +
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()

+ +

Яскравість. Застосовує лінійний множник(мультиплікатор) до вхідного зображення, щоб зробити його більш або менш яскравим. Значення "0%" створить абсолютно чорне зображення. Значення "100%" залишить зображення без змін. Інші значення є лінійними мультиплікаторами, що застосовуються до ефекту. Значення, більші за "100%", дозволяються і дають більш яскраві результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1".

+ +
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()

+ +

Контрастність. Налаштовує контраст зображення. Значення "0%" створить абсолютно сіре зображення. Значення "100%" залишить зображення без змін. Значення, більші за "100%", дозволяються і дають більш контрастні результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1". 

+ +
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()

+ +

Відкидання тіні. Застосовує відкидання тіні до вхідного зображення. Це фактично розмита, зміщена версія альфа-маски вхідного зображення,  намальована певним кольором та створена під зображенням. Функція приймає параметр типу <shadow> (визначена у CSS3 Backgrounds), за винятком того, що ключове слово ‘inset’ не дозволене. Дана функція дуже схода на більш укорінену властивість {{cssxref("box-shadow")}}; різниця у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності. Нижче наведені параметри параметра <shadow>.

+ +
+
<offset-x> <offset-y> (required)
+
Ці два обов'язкові {{cssxref("<length>")}} значення вказують зміщення тіні. <offset-x> визначає горизонтальну відстань. Від’ємні значення розміщують тінь лівіше елемента. <offset-y> визначає вертикальну відстань. Від’ємні значення розміщують тінь вище елемента. Дивіться {{cssxref("<length>")}} можливі одиниці. Якщо обидва значення "0", тінь розміщується за елементом (і може створювати ефект ромиття, якщо вказані <blur-radius> та/або <spread-radius>).
+
<blur-radius> (optional)
+
Це необов'язкове третє {{cssxref("<length>")}} значення. Чим більше значення, тим більше розмиття, тим більшою і світлішою стає тінь. Від’ємні значення не дозволені. Якщо значення не визначене, воно буде "0" (межі тіні будуть чіткими).
+
<spread-radius> (optional)
+
Це необов'язкове четверте {{cssxref("<length>")}} значення. Додатні значення розширять тінь і зроблять її більшою, а від'ємні - зменшать. Якщо значення не визначено, воно буде "0" (тінь буде мати какий розмір, як зображення). 
+ Примітка: Webkit та, можливо, інші браузери, не підтримують цей четвертий параметр; він не виконається, якщо його додати.
+
<color> (optional)
+
Дивіться {{cssxref("<color>")}} значення, щоб дізнатися можливі ключові слова та умовні позначення. Якщо значення не вказано, колір залежить від браузера. У Gecko (Firefox), Presto (Opera) та Trident (Internet Explorer), значення {{cssxref("color")}} властивості використовується. З іншого боку, тінь WebKit є прозорою, тому вона є марою, даремною, якщо значення <color> не вказане.
+
+ +
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()

+ +

Конвертує вхідне зображення у відтінках сірого. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" повністю конвертує зображення у відтінки сірого. Значення "0%" залишає зобращення без змін. Значення між "0%" та "100%" є лінійними множниками(мультиплікаторами) ефекта. Якщо парамент ‘amount’  не вказаний, використовується значення "0".

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+ +

hue-rotate()

+ +

Зміна відтінків. Застосовує зміну відтінків до вхідного зображення. Значення ‘angle’ визначає кількість градусів на колірному крузі (color circle), які будуть застосовані до вхідного зображення. Значення (0deg) залишає зображення без змін. Якщо параметр  ‘angle’  відсутній, використовується значення "0deg". Хоча і не існує максимального значення, ефект значень, більших за "360deg", буде обертатися навколо.

+ +
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()

+ +

Інвертування. Інвертує зразки (samples) у вхідному зображенні. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" інвертує зображення повністю. Значення "0%" залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’  відсутній, використовується значення "0".

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','')}}

+ +

opacity()

+ +

Непрозорість. Застосовує прозорість до вхідного зображення. Значення ‘amount’ визначає пропорцію конвертації. Зі значенням "0%" зображення стає повністю прозорим. Значення "100%" залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Це еквівалентно множенню зразків (samples) зображення на  ‘amount’. Якщо параметр ‘amount’  відсутній, використовується значення "1". Ця функція схожа на більш укорінену властивість {{Cssxref("opacity")}}; ріниця полягає у тому,  що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності.

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','')}}

+ +

saturate()

+ +

Насичення. Робить зображення більш насиченими. Значення ‘amount’ визначає пропорцію конвертації. Зі значенням "0%" зображення стає повністю ненасиченим. Значення "100%" залишає зображення без змін. Інші значення є лінійними множниками (мультиплікаторами) ефекта. Значення, більші за "100%" дозволяються і забеспечують більш насиченими результатами. Якщо параметр ‘amount’ відсутній, використовується значення "1".

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +

sepia()

+ +

Сепія. Конвертує зображення до сепії. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" конвертує зображення повністю. Значення "0%" залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’ відсутній, використовується значення "0".

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','')}}

+ +

Combining functions

+ +

Можна комбінувати будь-яку кількість функцій для маніпулювання рендерингом. Наступні приклади посилюють контрастність та яскравість зображення.

+ +
filter: contrast(175%) brightness(103%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}[1]{{CompatGeckoDesktop(35)}}[2]{{CompatNo}}[3]{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}
On SVG Elements{{CompatNo}}[4]{{CompatGeckoDesktop(35)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop(35)}}[2]{{CompatNo}}22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}} +

6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

+
On SVG Elements{{CompatNo}}[4]{{CompatGeckoDesktop(35)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] У Chrome 18 to 19, функція saturate() приймає тільки цілі десяткові числа та відсоткові значання. Цей баг виправлений у Chrome 20 та наступних.

+ +

[2] До Firefox 34, Gecko виконував тільки {{anch("url()")}} форму властивості filter; так як формування ланцюжка (chaining) тоді не було реалізовано, було дозволено тільки одне url() (або коли layout.css.filters.enabled pref було встановлене як false).

+ +

Функціональні значення filter контролюються layout.css.filters.enabled pref і був доступним, але заборонений за замовчуванням у Firefox 34.

+ +

[3] Internet Explorer з 4.0 по 9.0 виконував нестандартну властивіст filter. Синтаксис сильно відрізняється і не був тут задокументований.

+ +

[4] У даний момент Blink не виконує дану властивість(feature). Дивіться bug 109224.

+ +

See also

+ + diff --git a/files/uk/web/css/flex-grow/index.html b/files/uk/web/css/flex-grow/index.html new file mode 100644 index 0000000000..05bf7ed70b --- /dev/null +++ b/files/uk/web/css/flex-grow/index.html @@ -0,0 +1,194 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

Опис

+ +

Властивість flex-grow CSS визначає яку частину вільного простору може зайняти дочірній flex елемент. Ця властивість встановлюється в одиницях відносних до інших контейнерів.

+ +

{{cssinfo}}

+ +

Можете більш детальніше довідатся як користуватись властивостями flex з наступної статті Using CSS flexible boxes

+ +

Синтаксис

+ +
/* <number> values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Global values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

Значення

+ +
+
<number>
+
Дивись {{cssxref("<number>")}}. Значення менші за 0 є недійсними.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Приклад

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are 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('Example', '750px', '400px', '', 'Web/CSS/flex-grow')}}

+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Підтримка браузерів

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Базова підтримка{{CompatGeckoDesktop("18.0")}}[1]21.0{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1112.106.1{{property_prefix("-webkit")}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]49.0{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Базова підтримка{{CompatGeckoMobile("18.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatNo}}12.10{{CompatNo}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox підтримує лише однострочні flexbox конструкції до версії Firefox 27. Щоб активувати підтримку flexbox властивостей, для Firefox 18 та 19, користувачу потрібно змінити параметр layout.css.flexbox.enabled на true у файлі налаштувань about:config.

+ +

В додаток до непрефіксної підтримки, Gecko 48.0 {{geckoRelease("48.0")}} додана підтримка для -webkit префіксних варіацій властивостей для підтримки веб-сумісності, для цього потрібно змінити властивість layout.css.prefixes.webkit на true, яка за замовченням встановлена - false. Але з релізу Gecko 49.0 {{geckoRelease("49.0")}} ця властивість набуває значення true за замовченням.

+ +

[2] До того як вийшла версія Firefox 32, Gecko не був в змозі анімувати знаяення які починалися чи закінчувалися на 0(Spec, Demo).

+ +

Дивись також

+ + diff --git a/files/uk/web/css/flex/index.html b/files/uk/web/css/flex/index.html new file mode 100644 index 0000000000..763924bf80 --- /dev/null +++ b/files/uk/web/css/flex/index.html @@ -0,0 +1,209 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Властивість + - flexbox +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Загальний огляд

+ +

CSS параметр flex є скороченим записом властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.

+ +

{{cssinfo}}

+ +

Перегляньте Використання гнучких CSS контейнерів для більш детальної інформації та опису властивостей.

+ +

Синтаксис

+ +
/* 0 0 auto */
+flex: none;
+
+/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */
+flex: 2;
+
+/* Одне значення, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Два значення: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */
+flex: 2 2;
+
+/* Три значення: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Глобальні значення */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Значення

+ +
+
<'flex-grow'>
+
Визначає ширину flex елемента відносно ширин всіх сусідніх елементів. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
+
<'flex-shrink'>
+
Визначає flex-shrink flex елемента. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
+
<'flex-basis'>
+
Визначає  базис flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри width і height. Значення 0 має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення 0%, коли воно не вказується явно.
+
none
+
Ключове слово, котре по значенню рівне 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('Example','100%','60')}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтанКоментар
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Загальне визначення
+ +

Сумісність із браузерами

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ПідтримкаFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базова підтримка{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}
+ {{CompatGeckoDesktop("28.0")}}[2]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}[3]
+ 11.0[3]		12.10 +

6.1{{property_prefix("-webkit")}}
+ 9.0

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ПідтримкаFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Базова підтримка{{CompatUnknown}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] В Gecko 18.0 {{geckoRelease("18.0")}} та 19.0 {{geckoRelease("19.0")}} підтримка flexbox прихована за налаштуванням about:config пунктом layout.css.flexbox.enabled, котрий по замовчуванню - false. 

+ +

[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 {{geckoRelease("28.0")}}.

+ +

В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 {{geckoRelease("48.0")}} додано підтримку -webkit префіксованої версії властивості з огляду на веб-сумісність з налаштуванням layout.css.prefixes.webkit, котре по замовчуванню дорівнює false. Починаючи з версії Gecko 49.0 {{geckoRelease("49.0")}} це налаштування дорівнює true.

+ +

[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання calc() у частині flex синтаксису, що відповідає за властивість flex-basis. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте Flexbug #8 задля більш детального опису. Визначення flex зі значенням без одиниці виміру у частині, що відповідає за flex-basis вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за flex-basis, скороченого запису flex. Перегляньте Flexbug #4 задля більш детільного опису.

+ +

Також варто переглянути

+ + diff --git a/files/uk/web/css/font-smooth/index.html b/files/uk/web/css/font-smooth/index.html new file mode 100644 index 0000000000..97344e55bf --- /dev/null +++ b/files/uk/web/css/font-smooth/index.html @@ -0,0 +1,85 @@ +--- +title: font-smooth +slug: Web/CSS/font-smooth +translation_of: Web/CSS/font-smooth +--- +
{{ CSSRef }} {{ Non-standard_header }}
+ +

font-smooth CSS властивість контролює застосування антиалайзингу коли відбувається рендеринг шрифта.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ Xref_cssinitial() }}auto
Застосовується довсіх елементів і згенерованого контенту
{{ Xref_cssinherited() }}yes
Відсоткивідносно розмірів шрифта батьківського елемента
Media{{ Xref_cssvisual() }}
{{ Xref_csscomputed() }}як зазначено в специфікації
+ +

Синтаксис

+ +
/* Keyword values */
+font-smooth: auto;
+font-smooth: never;
+font-smooth: always;
+
+/* <length> value */
+font-smooth: 2em;
+
+ +
+

WebKit реалізує подібну властивість, але з різними значеннями: -webkit-font-smoothing. Це працює тільки на Mac OS X/macOS.

+ + +
+ +
+

Firefox реалізує подібну властивість, але з різними значеннями: -moz-osx-font-smoothing. Це працює тільки на Mac OS X/macOS.

+ + +
+ +

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

+ +

В ранніх версіях згладжування (2002) шрифтів CSS3 Fonts було присутнє, але на даний момент font-smooth його було видалено і ця специфікація не відповідає стандартам.

+ +

Сумісність з браузерами

+ + + +

{{Compat("css.properties.font-smooth")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/css/font-weight/index.html b/files/uk/web/css/font-weight/index.html new file mode 100644 index 0000000000..df6e507224 --- /dev/null +++ b/files/uk/web/css/font-weight/index.html @@ -0,0 +1,271 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

The font-weight CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the {{cssxref("font-family")}} you are using. Some fonts are only available in normal and bold.

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+font-weight: normal;
+font-weight: bold;
+
+/* Keyword values relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Numeric keyword values */
+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;
+
+ +

The font-weight property is specified using a single keyword value from the list below.

+ +

Values

+ +
+
normal
+
Normal font weight. Same as 400.
+
bold
+
Bold font weight. Same as 700.
+
lighter
+
One font weight lighter than the parent element (among the available weights of the font).
+
bolder
+
One font weight heavier than the parent element (among the available weights of the font).
+
100, 200, 300, 400, 500, 600, 700, 800, 900
+
Numeric font weights for fonts that provide more than just normal and bold.
+
+ +

Fallback weights

+ +

If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

+ + + +

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

+ +

Meaning of relative weights

+ +

When lighter or bolder is specified, the following chart shows how the absolute font weight of the element is determined:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Inherited valuebolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

Common weight name mapping

+ +

The numerical values (100 to 900) roughly correspond to the following common weight names:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueCommon weight name
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
+ +

Interpolation

+ +

A font-weight value is interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

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

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps heavier than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Set span text to be one step lighter
+   than its parent. */
+span {
+  font-weight: lighter;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples","400","300")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-weight")}}

diff --git a/files/uk/web/css/grid-template-areas/index.html b/files/uk/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..4f082d3cff --- /dev/null +++ b/files/uk/web/css/grid-template-areas/index.html @@ -0,0 +1,181 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +

grid-template-areas CSS властивість, що визначає іменовані {{glossary("grid areas")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+ + + +

Ці області не відносяться до певного грід-елемента, але можуть посилатися з властивостей грід-розташування{{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, та їх скорочень {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, і {{cssxref("grid-area")}}.

+ +

Syntax

+ +
/* 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;
+
+ +

Values

+ +
+
none
+
Грід-контейнер не визначає жодні іменовані грід-області.
+
{{cssxref("<string>")}}+
+
Ряд створюється для кожного окремого рядка, а колонка для кожної клітинки рядка. Декілька іменованих клітинок у рядках та поміж ними створюють одну іменовану грід-область, що об'єднує відповідні клітинки. Оголошення непридатне, якщо ці клітинки утворюють прямокутник.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

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;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", "250px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-areas")}}

+ +

See also

+ + + + diff --git a/files/uk/web/css/index.html b/files/uk/web/css/index.html new file mode 100644 index 0000000000..50e7a47f9c --- /dev/null +++ b/files/uk/web/css/index.html @@ -0,0 +1,92 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - CSS3 + - Layout + - Reference + - Веб + - Дизайн + - Стиль + - ЦСС + - каскадна + - оформлення + - сайтів + - сторінок + - таблиця +translation_of: Web/CSS +--- +

Каскадні таблиці стилів (CSS) - це мова стилів, яка використовується для опису представлення документу, написаного на HTML чи XML (включаючи XML діалекти такі, як SVG або XHTML). CSS описує як елементи повинні відображатися на екрані, на папері, при озвученні, або на інших пристроях.

+ +

CSS є одною з основних мов відкритої мережі і має стандартизовану W3C специфікацію. Розроблена по рівнях, CSS1 в даний час застаріла, CSS2.1 є рекомендованою, і CSS3, яка тепер розділена на більш дрібні модулі та розвивається шляхом стандартизації.

+ +
+ + +
+
+

Посібники

+ +

Наша CSS сфера навчання має декілька модулів, які дозволяють вивчити CSS з нуля — знання мови не вимагається.

+ +
+
Вступ в CSS
+
Цей модуль дозволяє вам почати вивчення з базових понять як CSS працює, включаючи селектори і параметри, написання правил CSS, застосування CSS до HTML, як вказати довжину, колір та інші одиниці виміру в CSS, каскади і успадкування, основи блочної моделі та відлагоджування CSS.
+
Стилізація тексту
+
В даному модулі ми розглянемо основи стилізації тексту, включаючи налаштування шрифтів, товщини, курсиву, відстані між рядками і буквами, а також застосування тіней та інших можливостей стилізації тексту. Ми розглянемо в даному модулі використання власних шрифтів на вашій веб-сторінці, і стилізацію списків і посилань.
+
Стилізація блоків
+
Далі ми розглянемо стилізацію блоків, один з базових кроків у напрямку розбивання веб-сторінки на блоки. У данаму модулі ми підсумуємо блокову модель і тоді розглянемо методи контролю блоків, застосовуючи внутрішні відступи (padding), рамки (borders) і зовнішні відступи, застосування власних заливок фону, картинок та інших можливостей, і такої можливості, як падіння тіней і фільтрів на блоках.
+
Макети CSS
+
До цього моменту ми вже розглянули базові поняття CSS, як стилізувати текст, я як стилізувати і маніпулювати блоками, щоб ваш контент поміщався в середину даних блоків. Тепер час розглянути розташування ваших блоків у правильному місці, по відношенню до точки огляду, і відносно один одного. Ми розкрили необхідні передумови, тому тепер ми можемо заглибитися в шаблони CSS детальніше, подивитися на налаштування для різних дисплеїв, традиційні методи шаблонів, включаючи плавання елементів по сторінці (float) і позиціонування (positioning), і нові сучасні інструменти для шаблонів такі, як флексбокс (flexbox).
+
+
+ +
+

Посилання

+ + + +

Інструменти для CSS розробки

+ + +
+
+
+ +

Дивитися також

+ + diff --git a/files/uk/web/css/linear-gradient()/index.html b/files/uk/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..cf11a60ebc --- /dev/null +++ b/files/uk/web/css/linear-gradient()/index.html @@ -0,0 +1,208 @@ +--- +title: linear-gradient() +slug: Web/CSS/linear-gradient() +translation_of: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

linear-gradient() CSS функція створює зображення, що складається з прогресивного переходу між двома або більше кольорами по прямій лінії. Резултатом буде об`єкт типу {{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%);
+ +

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this midpoint to any position between two color stops by adding an unlabelled % color hint between the two colors to indicate where the middle of the color transition should be. The following example is solid red from the start to the 10% mark and solid blue from 90% to the end. Between 10% and 90% the color transitions from red to blue, however the midpoint of the transition is at the 30% mark rather than 50% as would have happened without the 30% color hint.

+ +
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%, якщо на останній зупинці не було оголошено жодної довжини.

+ +

Синтаксис

+ +
/* A gradient tilted 45 degrees,
+   starting blue and finishing red */
+linear-gradient(45deg, blue, red);
+
+/* A gradient going from the bottom right to the top left corner,
+   starting blue and finishing red */
+linear-gradient(to left top, blue, red);
+
+/* Color stop: A gradient going from the bottom to top,
+   starting blue, turning green at 40% of its length,
+   and finishing red */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Color hint: A gradient going from the left to right,
+   starting red, getting to the midpoint color
+   10% of the way across the length of the gradient,
+   taking the rest of the 90% of the length to change to blue */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Multi-position color stop: A gradient tilted 45 degrees,
+   with a red bottom-left half and a blue top-right half,
+   with a hard line where the gradient changes from red to blue */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+ +

Values

+ +
+
<side-or-corner>
+
Позиція стартової точки градієнта. Якщо її вказано починається зі слова to і до двох ключових слів: одне вказує горизонтальну сторону (left or right), а інше вертикальну сторону (top or 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>
+
The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
+
+
+

Примітка: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

+
+
+
+ +

Formal syntax

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [ left | right ] || [ top | bottom ]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+ +

Приклади

+ +

Градієнт під кутом 45 градусів

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+ +

{{EmbedLiveSample("Градієнт_під_кутом_45_градусів", 120, 120)}}

+ +

Gradient that starts at 60% of the gradient line

+ + + +
body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}

+ +

Градієнт з багатопозиційними точками зупинки

+ +

У цьому прикладі використовуються багатопозиційні кольорові зупинки, причому сусідні кольори мають однакове значення стоп кольору, створюючи смугастий ефект.

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("Градієнт_з_багатопозиційними_точками_зупинки", 120, 120)}}

+ +
+

Примітка: Please see Using CSS gradients for more examples.

+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Adds interpolation hints.
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Сумісність з браузерами

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

Дивіться також

+ + diff --git a/files/uk/web/css/mozilla_extensions/index.html b/files/uk/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..c41a46f2d7 --- /dev/null +++ b/files/uk/web/css/mozilla_extensions/index.html @@ -0,0 +1,680 @@ +--- +title: CSS-розширення для Mozilla +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS-розширення для Mozilla + - 'CSS: розширення Mozilla' + - нестандартні властивості + - нестандартні властивості CSS для Mozilla +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +
+ +

У таких додатках Mozilla, як Firefox, підтримується ряд спеціальних розширень Mozilla до CSS, включаючи властивості, значення, псевдо-елементи і псевдо-класи, at-правила і медіа-запити. Ці розширення мають префікс-moz-.

+ +

Властивості і псевдокласи тільки для Mozilla (уникайте використання на веб-сайтах)

+ +
+

Нотаток: Ці властивості і псевдокласи працюватимуть тільки в додатках Mozilla, таких як Firefox, і не працюють на стандартних технологічних схемах. Деякі з них можуть застосовуватися тільки до елементів XUL.

+
+ +
+

B

+ + + +

C–I

+ + + +

O

+ + + +

S–Z

+ + +
+ +

Колись патентовані властивості, які на даний час є стандартними

+ +
+

Нотаток: Даби максимізувати сумісність вашого CSS, ви повинні використовувати непрефіксние стандартні властивості, а не префіксні, перераховані нижче. Як тільки задану властивість стандартизовано і реалізовано без префікса, префиксная версія, як правило, через деякий час видаляється.

+
+ +
+ +
+ +

Значення властивостей

+ +

Глобальні значення

+ +
+ +
+ +

{{CSSxRef("-moz-appearance")}}

+ +
+ +
+ +

{{CSSxRef("background-image")}}

+ +
+ +
+ +

{{CSSxRef("border-color")}}

+ +
+ +
+ +

{{CSSxRef("border-style")}} and {{CSSxRef("outline-style")}}

+ +
+ +
+ +

{{CSSxRef("<color>")}} keywords

+ +
+ +
+ +

{{CSSxRef("display")}}

+ +
+ +
+ +

{{CSSxRef("empty-cells")}}

+ +
+ +
+ +

{{CSSxRef("font")}}

+ +
+ +
+ +

{{CSSxRef("font-family")}}

+ +
+ +
+ +

{{CSSxRef("image-rendering")}}

+ +
+ +
+ +

{{CSSxRef("<length>")}}

+ +
+ +
+ +

{{CSSxRef("list-style-type")}}

+ +
+ +
+ +

{{CSSxRef("overflow")}}

+ +
+ +
+ +

{{CSSxRef("text-align")}}

+ +
+ +
+ +

{{CSSxRef("text-decoration")}}

+ +
+ +
+ +

{{CSSxRef("-moz-user-select")}}

+ +
+ +
+ +

{{CSSxRef("width")}}, {{CSSxRef("min-width")}}, and {{CSSxRef("max-width")}}

+ +
+ +
+ +

Псевдоелементи та псевдокласи

+ +
+ +
+ +

At-правила

+ +
+ +
+ +

Компоненти медіа запитів

+ +
+ +
+ +

Інше

+ +
+ +
+ +

Дивіться також

+ + diff --git a/files/uk/web/css/order/index.html b/files/uk/web/css/order/index.html new file mode 100644 index 0000000000..147009e8f1 --- /dev/null +++ b/files/uk/web/css/order/index.html @@ -0,0 +1,170 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Flexible Boxes + - Порядок +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

Загальний огляд

+ +

CSS параметр order визначає порядок розташування flex елементів відносно їхнього батьківського flex контейнера. Елементи розташовуються у порядку зростання значення order. Елементи з однаковим значенням параметра order розташовуються в такому порядку, в якому вони розташовані в основному коді.

+ +
+

Примітка: параметр order лише впливає на візуальний порядок елементів і не впливає на їх логічний порядок або порядок табуляції. order не повинен використовуватися на невізуальних носіях, таких як голосові читалки.

+
+ +

{{cssinfo}}

+ +

Дивіться Використання CSS flexible boxes для більш детальної інформації, а також опису інших параметрів.

+ +

Синтаксис

+ +
/* Числові значення включаючи від'ємні числа */
+order: 5;
+order: -5;
+
+/* Глобальні значення */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

Значення

+ +
+
<integer>
+
Відображає порядковий номер групи, до якої flex елемент був присвоєний.
+
+ +

Офіційний синтаксис

+ +
{{csssyntax}}
+ +

Приклади

+ +

Тут є базовий уривок HTML:

+ +
<!DOCTYPE html>
+<header>...</header>
+<div id='main'>
+   <article>Article</article>
+   <nav>Nav</nav>
+   <aside>Aside</aside>
+</div>
+<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('Examples' ,'','','','Web/CSS/order') }}

+ +

 

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Початкове визначення
+ +

Сумісність із браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобливістьChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базова підтримка{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}
+ 29		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}[2]		 +

10.0{{property_prefix("-ms")}}[3]
+ 11

+ 		12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ОсобливістьAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базова підтримка{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("18.0")}}[1]
+ {{CompatGeckoMobile("20.0")}}[2]		{{CompatUnknown}}12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +

[1] Щоб активувати підтримку Flexbox для Firefox 18 або 19, користувач повинен змінити about:config preference layout.css.flexbox.enabled на true. Багаторядкові flexible boxes підтримуються з Firefox 28.

+ +

Firefox на даний час неправильно змінює порядок табуляції елементів. Дивитися {{bug("812687")}}.

+ +

[2] На додаток до підтримки без префікса, Gecko 48.0 {{geckoRelease("48.0")}} добавила підтримку для -webkit префіксної версії даного параметра, 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.

+ +

[3] В Internet Explorer 10, flexible контейнер декларуєтсья з використанням префікса '-ms' display:-ms-flexbox, а не display:flex. Даний параметр реалізований під нестандартним іменем -ms-flex-order.

+ +

Дивитися також

+ + diff --git a/files/uk/web/css/position/index.html b/files/uk/web/css/position/index.html new file mode 100644 index 0000000000..7a31f56b89 --- /dev/null +++ b/files/uk/web/css/position/index.html @@ -0,0 +1,461 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS-властивість + - Розміщення +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

CSS-властивість position вказує, як елемент розміщено в документі. А властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, та {{Cssxref("left")}} визначають остаточне положення елемента.

+ +
/* Keyword values */
+position: static;
+position: relative;
+position: absolute;
+position: fixed;
+position: sticky;
+
+/* Global values */
+position: inherit;
+position: initial;
+position: unset;
+
+ +
+ + + +{{EmbedLiveSample("position", 1200, 300, "", "", "example-outcome-frame")}}
+ +

{{cssinfo}}

+ +

Види розміщення

+ + + +

Most of the time, absolutely positioned elements that have {{Cssxref("height")}} and {{Cssxref("width")}} set to auto are sized so as to fit their contents. However, non-replaced absolutely positioned elements can be made to fill the available vertical space by specifying both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as auto.

+ +

Except for the case just described of absolutely positioned elements filling the available space:

+ + + +

Синтаксис

+ +

Значення властивості position може бути одним із ключових слів, що їх перелік наведено нижче.

+ +

Значення

+ +
+
static
+
The element is positioned according to the normal flow of the document. The {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} properties have no effect. This is the default value.
+
relative
+
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. The effect of relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
+
absolute
+
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to its closest positioned ancestor if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
+
fixed
+
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen's viewport and doesn't move when scrolled. Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. When an ancestor has the transform property set to something other than none, that ancestor is used as the container instead of the viewport (see CSS Transforms Spec). In printed documents, the element is placed in the same position on every page.
+
+ +
+
sticky {{experimental_inline}}
+
The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. The effect of sticky on table-related elements is the same as relative. Note that sticky, by specification, will not work inside element with overflow: hidden or auto. (ref: Github issue on W3C CSSWG)
+
+ +

Формальний синтаксис

+ +
{{csssyntax}}
+ +

Приклади

+ +

Відносне розміщення

+ +

Relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if "Two" were taking up the space of its normal location.

+ +

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') }}

+ +

Абсолютне розміщення

+ +

Elements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static). If a positioned ancestor doesn't exist, the initial container is used. In the example below, box "Two" has no positioned ancestor, so it is positioned relative to the the <body> of the document.

+ +

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: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+ +

{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}

+ +

Нерухоме розміщення

+ +

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This can be used to create a floating element that stays in the same position regardless of scrolling. In the example below, box "One" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.

+ +

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>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS

+ +
.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}

+ +

«Липке» розміщення

+ +

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed. For instance...

+ +
#one { position: sticky; top: 10px; }
+ +

...would position the element with id one relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.

+ +
A common use for sticky positioning is for the headings in an alphabetized list. The "B" heading will appear just below the items that begin with "A" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the "B" heading will then remain fixed to the top of the viewport until all the "B" items have scrolled offscreen, at which point it will be covered up by the "C" heading, and so on.
+ +
 
+ +
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
+ +
 
+ +

HTML

+ +
<dl>
+  <div>
+    <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>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo &amp; The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl > div {
+  background: #FFF;
+  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') }}

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Adds sticky property value.
+ +

Підтримка веб-переглядачами

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}1.0 (1.0) [1]4.0 [3]4.01.0 (85)
fixed value{{CompatChrome(1)}}{{CompatVersionUnknown}}1.0 (1.0) [4]7.04.01.0 (85)
sticky value{{CompatChrome(56)}}{{CompatUnknown}} [5]32 (32.0) [2]{{CompatNo}}{{CompatVersionUnknown}}6.1 {{ property_prefix("-webkit-") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatChrome(1)}}{{CompatChrome(1)}}{{CompatVersionUnknown}}1.0 (1.0) [1]{{CompatUnknown}}{{CompatVersionUnknown}}7.0 {{ property_prefix("-webkit-") }}
+
+ +

[1] Since Firefox 30, Gecko allows {{HTMLElement("tr")}}, {{HTMLElement("thead")}}, and  {{HTMLElement("tfoot")}} elements with a position: relative; style to act as absolute positioning containers. This means that a position: absolute; styled element inside the table can be positioned relative to these elements. In other browsers and in older versions of Firefox, setting position: relative; on a table row or row group has no effect. Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing a warning to the JavaScript console if you use this feature: Relative positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect.

+ +

[2] In Firefox 26 to Firefox 31 (inclusive), sticky positioning only works when the about:config preference layout.css.sticky.enabled is set to true. From Firefox 27 to 31, true is the default value for Nightly and Aurora versions of the browser. The preference has been removed in Firefox 48.

+ +

[3] In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.

+ +

[4] Prior to Firefox 44, position: fixed didn't create a stacking context in most cases. The specification, and Gecko implementation, have been modified to mimic Chrome and Safari's long-time behavior.

+ +

[5] Sticky positioning is in preview for Edge.

diff --git a/files/uk/web/css/resize/index.html b/files/uk/web/css/resize/index.html new file mode 100644 index 0000000000..de5246e7ba --- /dev/null +++ b/files/uk/web/css/resize/index.html @@ -0,0 +1,212 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - CSS Властивість + - Зміна розміру + - Розмір +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

Зведення

+ +

The resize CSS property lets you control the resizability of an element.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

Значення

+ +
+
none
+
The element offers no user-controllable method for resizing the element.
+
both
+
The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
+
horizontal
+
The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
+
vertical
+
The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
+
block {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
+
inline {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
+
+ +
Note: resize does not apply to blocks for which the {{cssxref("overflow")}} property is set to visible.
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Disabling resizability of textareas

+ +

CSS

+ +

By default, {{HTMLElement("textarea")}} elements are resizable in {{gecko("2.0")}} (Firefox 4). You may override this behavior with the CSS shown below:

+ +
textarea.example {
+  resize: none; /* disables resizability */
+}
+
+ +

HTML

+ +
<textarea class="example">Type some text here.</textarea>
+ +

Result

+ +

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+ +

Using resize with arbitrary elements

+ +

You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  </p>
+</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Adds the values block and inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{HTMLElement("textarea")}})1.0{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}{{CompatNo}}12.13.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible)4.0{{CompatGeckoDesktop("5.0")}}[1]{{CompatNo}}154.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{HTMLElement("textarea")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] resize doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})

+ +

See also

+ + diff --git a/files/uk/web/css/z-index/index.html b/files/uk/web/css/z-index/index.html new file mode 100644 index 0000000000..364b1044a2 --- /dev/null +++ b/files/uk/web/css/z-index/index.html @@ -0,0 +1,134 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +

CSS властивість z-index встановлює порядок осі Z спозицйонованого елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.

+ +
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+ + + +

В спозицйонованому елементі (такому, в якому властивість position є будь-якою окрім static) властивість z-index вказує:

+ +
    +
  1. Рівень накладання елемента в поточному контексті накладання.
    2. +
  2. Чи створює цей елемент локальний контекст накладання.
    3. +
+ +

Синтаксис

+ +
/* Властивість, зазначена ключовим словом */
+z-index: auto;
+
+/* Цифрові значення <integer> */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Цифри менше нуля зменьшують приорітет */
+
+/* Глобальні значення */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

Властивість z-index вказується або ключовим словом auto або цифрою <integer>.

+ +

Вартості

+ +
+
auto
+
Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.
+
<integer>
+
{{cssxref("<integer>")}} вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює 0. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.
+
+ +

Формальний синтаксис

+ +
auto | {{cssxref("<integer>")}}
+ +

Приклади

+ +

HTML

+ +
<div class="dashed-box">Коробка з пунктиром
+  <span class="gold-box">Золота коробка</span>
+  <span class="green-box">Зелена коробка</span>
+</div>
+
+ +

CSS

+ +
.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* розташуй .green-box над .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Результат

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName('CSS3 Transitions', '#animatable-css', 'поводження анімації z-index')}}{{Spec2('CSS3 Transitions')}}Означає z-index як такий, який можна анімувати.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Початкове визначення
+ +

{{cssinfo}}

+ +

Браузерна сумісність

+ + + +

{{Compat("css.properties.z-index")}}

+ +

Дивись також

+ + diff --git "a/files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" "b/files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" new file mode 100644 index 0000000000..1dd1b5a510 --- /dev/null +++ "b/files/uk/web/css/\320\260\320\273\321\214\321\202\320\265\321\200\320\275\320\260\321\202\320\270\320\262\320\275\321\226_\321\202\320\260\320\261\320\273\320\270\321\206\321\226_\321\201\321\202\320\270\320\273\321\226\320\262/index.html" @@ -0,0 +1,80 @@ +--- +title: Альтернативні таблиці стилів +slug: Web/CSS/Альтернативні_таблиці_стилів +tags: + - Стилі + - Теми +translation_of: Web/CSS/Alternative_style_sheets +--- +

Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.

+ +

Firefox lets the user select the stylesheet using the View > Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.

+ +

An example: specifying the alternative stylesheets

+ +

The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with rel="stylesheet alternate" and title="..." attributes, for example:

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
+<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
+<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
+
+ +

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with the Default Style pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

+ +

No matter what style is selected, the rules from the reset.css stylesheet will always be applied.

+ +

Try it out

+ +

Click here for a working example you can try out.

+ +

Details

+ +

Any stylesheet in a document falls into one of the following categories:

+ + + +

When style sheets are referenced with a title attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same title are part of the same choice. Style sheets linked without a title attribute are always applied.

+ +

Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}The CSS OM specification defines the concepts of the style sheet set name, its disabled flag, and the preferred CSS style sheet set name.
+ It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to create a CSS style sheet.
+

{{SpecName('HTML WHATWG', 'semantics.html#link-type-stylesheet', 'Link type "stylesheet"')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-style-title', 'The style element')}}
+ {{SpecName('HTML WHATWG', 'semantics.html#attr-meta-http-equiv-default-style', 'Default style state (http-equiv="default-style")')}}

+ 		{{Spec2('HTML WHATWG')}}The HTML specification defines when and how the create a CSS style sheet algorithm is invoked while handling <link> and <style> elements, and also defines the behavior of <meta http-equiv="default-style">.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.
+ +

 

diff --git "a/files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" "b/files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" new file mode 100644 index 0000000000..ba325fe7da --- /dev/null +++ "b/files/uk/web/css/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" @@ -0,0 +1,188 @@ +--- +title: CSS довідник +slug: Web/CSS/Довідник +translation_of: Web/CSS/Reference +--- +

This CSS Reference shows the basic syntax of a CSS rule; lists all standard CSS properties, pseudo-classes and pseudo-elements, @-rules, units, and selectors, all together in alphabetical order, as well as just the selectors by type; and allows you to quickly access detailed information for each of them. It not only lists the CSS 1 and CSS 2.1 properties, but also is a CSS3 reference that links to any CSS3 property and concept standardized, or already stabilized.  Also included is a brief DOM-CSS / CSSOM reference.

+ +

Note that CSS rule-definitions are entirely (ASCII) text-based, whereas DOM-CSS / CSSOM, the rule-management system, is object-based.

+ +

See also Mozilla CSS Extensions for Gecko-specific properties prefixed with -moz; and WebKit CSS Extensions for WebKit-specific properties. See Vendor-prefixed CSS Property Overview by Peter Beverloo for all prefixed properties.

+ +

Basic rule syntax

+ +

Be warned that any syntax error in a rule definition will invalidate the entire rule.

+ +

Style rules

+ +
selectorlist { property: value; [more property:value; pairs] }
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+See selector, pseudo-element, pseudo-class lists below.
+
+ +

Examples

+ +
strong { color: red;}
+div.menu-bar li:hover > ul { display: block; }
+
+ +

More about examples: #1, #2

+ +

@rules

+ +

As these have so many different structure-formats, see the desired At-rule for syntax.

+ +

Keyword index

+ +
{{CSS_Ref}}
+ +
+
+

Selectors

+ +
    +
  • Basic Selectors + +
    • +
  • Combinators    (more info) + +
    • +
  • Pseudo-elements    (more info) +
      +
    • {{ 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}}
      • +
    +
    • +
  • Standard pseudo-classes    (more info) +
    +
      +
    • {{ 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") }}
      • +
    +
    +
    • +
+ +

A complete list of selectors in the Selectors Level 3 specification.

+ +

CSS3 Tutorials

+ +

These small how-to pages describe new technologies appeared in CSS3, or in CSS2.1 but with low support until recently:

+ + + +

Concepts

+ + + +

DOM-CSS / CSSOM

+ +

Major object types:

+ + + +

Important methods:

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+
+
diff --git "a/files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" "b/files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" new file mode 100644 index 0000000000..4920b7ceb9 --- /dev/null +++ "b/files/uk/web/css/\320\272\320\276\321\200\320\276\320\261\321\207\320\260\321\201\321\202\320\260_\320\274\320\276\320\264\320\265\320\273\321\214_css/index.html" @@ -0,0 +1,161 @@ +--- +title: Коробчаста модель CSS +slug: Web/CSS/Коробчаста_модель_CSS +tags: + - CSS + - Довідка + - Коробчаста модель CSS +translation_of: Web/CSS/CSS_Box_Model +--- +
Коробчаста модель (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.
+ +

Довідка

+ +

Властивості

+ +

Властивості, що визначають потік (flow) вмісту

+ +
+ +
+ +

Властивості, що визначають розміри

+ +
+ +
+ +

Властивості, що визначають відступи

+ +
+ +
+ +

Властивості, що визначають поля

+ +
+ +
+ +

Інші властивості

+ +
+ +
+ +

Посібники

+ +
+
Вступ до коробчастої моделі CSS
+
Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.
+
Згортання відступів
+
Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.
+
Модель візуального формування
+
Описує та пояснює модель візуального формування.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Первинне визначення
+ +

Підтримка веб-переглядачами

+ +

{{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/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" new file mode 100644 index 0000000000..fb25e2d60a --- /dev/null +++ "b/files/uk/web/css/\320\274\320\276\320\264\320\265\320\273\321\214_\320\262\321\226\320\267\321\203\320\260\320\273\321\214\320\275\320\276\320\263\320\276_\321\204\320\276\321\200\320\274\321\203\320\262\320\260\320\275\320\275\321\217/index.html" @@ -0,0 +1,225 @@ +--- +title: Модель візуального формування +slug: Web/CSS/Модель_візуального_формування +tags: + - CSS + - NeedsUpdate + - Коробчаста модель CSS +translation_of: Web/CSS/Visual_formatting_model +--- +

Модель візуального форматування (visual formatting model) у CSS являє собою алгоритм, що обробляє документ та подає його на візуальному носії. Ця модель є основним поняттям CSS.

+ +

Кожен елемент в документі зазнає перетворення згідно з моделлю візуального формування і породжує нуль (жодного), один або кілька прямокутників відповідно до {{cssxref("CSS_Box_Model/Introduction_to_the_CSS_box_model", "коробчастої моделі")}} CSS. Компонування кожного такого прямокутника визначається низкою чинників:

+ + + +

Відповідно до моделі, прямокутник розміщується й малюється відносно краю блока, всередині якого він міститься. Зазвичай прямокутник утворює такий блок для своїх нащадків. Втім, розмір прямокутника не обмежено розмірами блока, що його містить; коли компонування прямокутника передбачає вихід за межі блока, це зветься {{cssxref("overflow", "переповненням")}}.

+ +

Утворення прямокутників

+ +

Генерація блоків, це частина візуального форматування CSS, що створює прямокутники з елементів документу. Сгенеровані блоки є різних типів, що вплиає на те, як виконується візуальне формування. Тип згенерованого блоку залежить від значення CSS {{ cssxref("display") }}.

+ +

Block-level elements and block boxes

+ +

Елемент  називається блочним, коли його вираховане значення  {{ cssxref("display") }} CSS property is: block, list-item, or table. Елемент рівня блоку візуально форматується, як блок (наприклад абзац), приздачений для вертикальної компановки.

+ +

Each block-level box participates in a block formatting context. Each block-level element generates at least one block-level box, called the principal block-level box. Some elements, like a list-item element, generating further boxes to handle bullets and other typographic elements introducing the list item, may generate more boxes. Most generate only the principal, block-level box.

+ +

The principal block-level box contains descendant-generated boxes and generated content. It is also the box involved in the positioning scheme.

+ +

venn_blocks.pngA block-level box may also be a block container box. A block container box is a box that contains only other block-level boxes, or creates an inline formatting context, thus containing only inline boxes.

+ +

It is important to note that the notions of a block-level box and block container box are disjoined. The first, describes how the box behaves with its parents and sibling. The second, how it interacts with its descendants. Some block-level boxes, like tables, aren't block container boxes. Reciprocally, some block container boxes, like non-replaced inline blocks and non-replaced table cells, aren't block-level boxes.

+ +

Block-level boxes that also are block container boxes are called block boxes.

+ +

Anonymous block boxes

+ +

In some cases, the visual formatting algorithm needs to add supplementary boxes. Because CSS selectors cannot style or name these boxes, they are called anonymous boxes.

+ +

Because selectors do not work with anonymous boxes, they cannot be styled via a stylesheet. This means that all inheritable CSS properties have the inherit value, and all non-inheritable CSS properties, have the initial value.

+ +

Block containing boxes contain only inline-level boxes, or only block-level boxes. But often the document contains a mix of both. In that case, anonymous block boxes are created around adjacent inline-level boxes.

+ +

Example

+ +

If we take the following HTML code (with default styling applied to it, that is {{ HTMLElement("div") }} and {{ HTMLElement("p") }} elements have display:block :

+ +
<div>Some inline text <p>followed by a paragraph</p> followed by more inline text.</div>
+ +

Two anonymous block boxes are created: one for the text before the paragraph (Some inline text), and another for the text after it (followed by more inline text). This builds the following block structure:

+ +

anonymous_block-level_boxes.png

+ +

Leading to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Unlike the {{ HTMLElement("p") }} element's box, Web developers cannot control the style of the two anonymous boxes. Inheritable properties take the value from the {{ HTMLElement("div") }}'s property value, like {{ cssxref("color") }} to define the color of the text, and set the others to the initial value. For example, they won't have a specific {{ cssxref("background-color") }}, it is always transparent, the initial value for that property, and thus the background of the <div> is visible. A specific background color can be applied to the <p> box. Similarly, the two anonymous boxes always use the same color for their text.

+ +

Another case that leads to the creation of anonymous block boxes, is an inline box that contains one or several block boxes. In that case, the box containing the block box is split into two inline boxes: one before, and one after the block box. All the inline boxes before the block box are then enclosed into an anonymous block box, so are the inline boxes following the block box. Therefore, the block box becomes the sibling of the two anonymous block boxes containing the inline elements.

+ +

If there are several block boxes, without inline content in-between, the anonymous block boxes are created before, and after the set of boxes.

+ +

Example

+ +

If we take the following HTML code, with {{ HTMLElement("p") }} have display:inline and {{ HTMLElement("span") }} have display:block :

+ +
<p>Some <em>inline</em> text <span>followed by a paragraph</span> followed by more inline text.</p>
+ +

Two anonymous block boxes are created, one for the text before the span Element (Some inline text) and one for the text after it (followed by more inline text), which gives the following block structure:

+ +

+ +

Which leads to:

+ +
Some inline text
+followed by a paragraph
+followed by more inline text.
+
+ +

Inline-level elements and inline boxes

+ +

An element is said to be inline-level when the calculated value of its {{ cssxref("display") }} CSS property is: inline, inline-block or inline-table. Visually, it doesn't constitute blocks of contents, but is distributed in lines with other inline-level content. Typically, the content of a paragraph with different formatting, like emphasis or images, is made from inline-level elements.

+ +

venn_inlines.png

+ +
+

This diagram uses outdated terminology; see note below. Besides that, it is incorrect because the yellow ellipsis on the right side is per definition either identical to the one on the left side, or bigger than that (it could be a mathematical superset), because the spec says "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context", see CSS 2.2, chapter 9.2.2

+
+ +

Inline-level elements generate inline-level boxes that are defined as boxes participating to an inline formatting context. Inline boxes are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with display:inline. Inline-level boxes, whose contents do not participate in an inline formatting context, are called atomic inline-level boxes. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of inline-block or inline-table, are never split into several boxes, as is possible with inline boxes.

+ +
Note: Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are not inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.
+ +
Atomic inline boxes cannot be split into several lines in an inline formatting context. +
+
<style>
+  span {
+    display:inline; /* default value*/
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>can be split in several
+   lines as it</span> is an inline box.
+</div>
+
+ +

which leads to:

+ +
The text in the span can be split into several lines as it is an inline box.
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   The text in the span <span>cannot be split in several
+   lines as it</span> is an inline-block box.
+</div>
+
+ +

which leads to:

+ +
The text in the span cannot be split into several lines as it is an inline-block box.
+
+
+ +

Anonymous inline boxes

+ +

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to initial for all others.

+ +

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the {{ cssxref("white-space") }} CSS property, does not generate anonymous inline boxes because they would end empty.

+ +
Example TBD
+ +

Other types of boxes

+ +

Line boxes

+ +

Line boxes are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

+ +

These boxes are technical, and Web authors do not usually have to bother with them.

+ +

Run-in boxes

+ +

Run-in boxes, defined using display:run-in, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

+ +
Note: Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered experimental. They should not be used in production.
+ +

Model-induced boxes

+ +

Besides the inline and block formatting contexts, CSS specifies several additional content models that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

+ + + +

Positioning schemes

+ +

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

+ + + +

Normal flow

+ +

In the normal flow, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS {{ cssxref("position") }} is set to the value static or relative, and if the CSS {{ cssxref("float") }} is set to the value none.

+ +

Example

+ +
When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out:
+
+[image]
+
+When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out:
+
+[image]
+ +

There are two sub-cases of the normal flow: static positioning and relative positioning:

+ + + +

Floats

+ +

In the float positioning scheme, specific boxes (called floating boxes or simply floats) are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the {{ cssxref("clear") }} CSS property.

+ +

The float positioning scheme for a box is selected, by setting the {{ cssxref("float") }} CSS property on that box to a value different than none and {{ cssxref("position") }} to static or relative. If {{ cssxref("float") }} is set to left, the float is positioned at the beginning of the line box. If set to right, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

+ +

[image]

+ +

Absolute positioning

+ +

In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the {{ cssxref("top") }}, {{ cssxref("bottom") }}, {{ cssxref("left") }} and {{ cssxref("right") }} CSS properties.

+ +

An element is absolutely positioned if the {{ cssxref("position") }} is set to absolute or fixed.

+ +

With a fixed positioned element, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.

+ +

Див. також

+ + diff --git "a/files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" "b/files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" new file mode 100644 index 0000000000..e6d7f61135 --- /dev/null +++ "b/files/uk/web/css/\321\200\320\276\320\267\320\274\321\226\321\202\320\272\320\260_\320\272\321\203\320\273\321\226\320\275\320\260\321\200\320\275\320\260-\320\272\320\275\320\270\320\263\320\260/index.html" @@ -0,0 +1,80 @@ +--- +title: Кулінарна книга з CSS розмітки +slug: Web/CSS/Розмітка_кулінарна-книга +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

+ +
+

Note: If you are new to CSS layout then you might first like to take a look at our CSS layout learning module, as this will give you the basic grounding you need to make use of the recipes here.

+
+ +

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 columns.CSS Grid, Multicol, Flexbox
Center an elementHow to center an item horizontally and vertically.Flexbox, 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
List group with badgesA list of items with a badge to display a count.Flexbox, Box Alignment
PaginationLinks to pages of content (such as search results).Flexbox, Box Alignment
CardA card component, which displays in a grid of cards.Grid Layout
Grid wrapperFor aligning grid content within a central wrapper, while also allowing items to break out.CSS Grid
+ +

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/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" "b/files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" new file mode 100644 index 0000000000..5794b4c397 --- /dev/null +++ "b/files/uk/web/css/\321\201\321\205\320\265\320\274\320\260_\320\272\320\276\320\274\320\277\320\276\320\275\321\203\320\262\320\260\320\275\320\275\321\217/index.html" @@ -0,0 +1,30 @@ +--- +title: Схема компонування +slug: Web/CSS/Схема_компонування +tags: + - CSS + - Компонування + - Розмітка + - Розташування +translation_of: Web/CSS/Layout_mode +--- +
Схема компонування (layout mode) в CSS являє собою алгоритм, який визначає розташування та розміри елементів залежно від того, як вони взаємодіють із сусідніми та батьківськими елементами. Існує декілька таких схем:
+ + + +
+

Зауваження: Не всі властивості CSS застосовні до всіх схем компонування. Більшість із них вживаються разом з однією-двома схемами і жодним чином не діють, якщо відповідний елемент компонується за іншою схемою.

+
+ +

Див. також

+ + diff --git a/files/uk/web/events/abort/index.html b/files/uk/web/events/abort/index.html new file mode 100644 index 0000000000..65e2d7e046 --- /dev/null +++ b/files/uk/web/events/abort/index.html @@ -0,0 +1,67 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +--- +

Подія abort спрацьовує коли завантаження ресурсу було перервано.

+ +

Загальна інформація

+ +
+
Специфікація
+
DOM L3
+
Interface
+
UIEvent if generated from a user interface, Event otherwise.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Властивості

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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.
diff --git a/files/uk/web/events/domcontentloaded/index.html b/files/uk/web/events/domcontentloaded/index.html new file mode 100644 index 0000000000..96ca54cfb0 --- /dev/null +++ b/files/uk/web/events/domcontentloaded/index.html @@ -0,0 +1,152 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

Подія DOMContentLoaded викликається, коли вихідний HTML документ повністю завантажився та був розібраний (parse), без очікування повного завантаження стилів, зображень, сабфреймів (subframes). Зовсім інша подія - load - має використовуватися лише для того, щоб визначити повне завантаження сторінки. Використання load там, де застосування DOMContentLoaded є більш доречним, є дуже поширеною помилкою, тому будьте уважними.

+ +

{{Note("Синхронний Javascript затримує парсинг DOM.")}}

+ +

{{Note("Існує безліч універсальних та автономних бібліотек, які  попонують кроссбраузерні методи для визначення готовності DOM.")}}

+ +

Прискорення

+ +

Якщо ви хочете, щоб DOM був розібраним (got parsed) якомога швидше після того, як користувач зробив запит сторінки, ви можете зробити ваш JavaScript асинхронним та оптимізувати завантаження стилів. Якщо цього не зробити, це сповільнить завантаження сторінки через те, що воно буде відбуватися паралельно і марнувати трафік у головного html документа.

+ +

Основна інформація

+ +
+
Специфікація
+
HTML5
+
Інтерфейс
+
Подія
+
Спливання
+
Так
+
Можливість скасування
+
Так (однак скасування як простої події скасувати не можна)
+
 
+
 
+
 
+
 
+
Ціль
+
Документ
+
Типова дія
+
Немає.
+
+ +

Властивості

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВластивістьТипОпис
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.
+ +

Приклад

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+</script>
+
+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

Сумісність з браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Bubbling для цієї події підтримується принаймні Gecko 1.9.2, Chrome 6, and Safari 4.

+ +

[2] Internet Explorer 8 підтримує подію readystatechange , яка може використовуватися для того, щоб визначити чи готовий DOM. У більш ранніх версіях Internet Explorer цей стан може бути визначений повторними спробами виконання document.documentElement.doScroll("left");,  так як цей фрагмент коду буде генерувати помилку, поки DOM не буде готовий.

+ +

Подібні події

+ + diff --git a/files/uk/web/events/index.html b/files/uk/web/events/index.html new file mode 100644 index 0000000000..ff23bb9e4c --- /dev/null +++ b/files/uk/web/events/index.html @@ -0,0 +1,2310 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

+ +

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

+ +

Standard events

+ +

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5  
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDB 
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}} 
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being succesfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }} 
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("message_(ServiceWorker)","message")}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transfered from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved onto the interactive area of an element.
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved off the interactive area of an element.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+ +

Non-standard events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
+

{{event("ussdreceived")}}

+ 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
+ +

Mozilla-specific events

+ +
+

Note: those events are never exposed to web content and can only be used in chrome content context.

+
+ +

XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+ +

Add-on-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
tabviewsearchenabled Addons specificThe search feature of Panorama has been activated
tabviewsearchdisabled Addons specificThe search feature of Panorama has been deactivated
tabviewframeinitialized Addons specificThe frame container of Panorama has been initialized
tabviewshown Addons specificThe Panorama tab has been shown
tabviewhidden Addons specificThe Panorama tab has been hidden
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
+ +

Developer tool-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+ +

Categories

+ +

Animation events

+ +

{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}

+ +

Battery events

+ +

{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}

+ +

Call events

+ +

{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}

+ +

CSS events

+ +

CssRuleViewRefreshed, CssRuleViewChanged, CssRuleViewCSSLinkClicked, {{event("transitionend")}}

+ +

Database events

+ +

abort, blocked, complete, {{event("error")}} (link), success, upgradeneeded, versionchange

+ +

Document events

+ +

DOMLinkAdded, DOMLinkRemoved, DOMMetaAdded, DOMMetaRemoved, DOMWillOpenModalDialog, DOMModalDialogClosed, {{event("unload")}}

+ +

DOM mutation events

+ +

DOMAttributeNameChanged, DOMAttrModified, DOMCharacterDataModified, {{event("DOMContentLoaded")}}, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+ +

Drag events

+ +

{{event("drag")}}, dragdrop, {{event("dragend")}}, {{event("dragenter")}}, dragexit, draggesture, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}

+ +

Element events

+ +

{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, DOMAutoComplete, {{event("command")}}, {{event("commandupdate")}}

+ +

Focus events

+ +

{{event("blur")}}, {{event("change")}}, DOMFocusIn, DOMFocusOut, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}

+ +

Form events

+ +

{{event("reset")}}, {{event("submit")}}

+ +

Frame events

+ +

{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (link), {{event("mozbrowsertitlechange")}}, DOMFrameContentLoaded

+ +

Input device events

+ +

{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}

+ +

Media events

+ +

{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}

+ + + +

{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}

+ +

Network events

+ +

{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},

+ +

Notification events

+ +

AlertActive, AlertClose

+ +

Pointer events

+ +

{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}

+ + + +

{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, DOMPopupBlocked

+ +

Printing events

+ +

{{event("afterprint")}}, {{event("beforeprint")}}

+ +

Progress events

+ +

abort, {{event("error")}}, load, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, progress, {{event("timeout")}}, uploadprogress

+ +

Resource events

+ +

{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}

+ +

Session history events

+ +

{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}

+ +

Smartcard events

+ +

{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}

+ +

SMS and USSD events

+ +

{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}

+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}

+ +

SVG events

+ +

{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}

+ +

Tab events

+ +

tabviewsearchenabled, tabviewsearchdisabled, tabviewframeinitialized, tabviewshown, tabviewhidden, TabOpen, TabClose, TabSelect, TabShow, TabHide, TabPinned, TabUnpinned, SSTabClosing, SSTabRestoring, SSTabRestored, {{event("visibilitychange")}}

+ +

Text events

+ +

{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, text

+ +

Touch events

+ +

MozEdgeUIGesture, MozMagnifyGesture, MozMagnifyGestureStart, MozMagnifyGestureUpdate, MozPressTapGesture, MozRotateGesture, MozRotateGestureStart, MozRotateGestureUpdate, MozSwipeGesture, MozTapGesture, MozTouchDown, MozTouchMove, MozTouchUp, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}

+ +

Update events

+ +

{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}

+ +

Value change events

+ +

{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}

+ +

View events

+ +

fullscreen, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, MozEnteredDomFullscreen, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, sizemodechange

+ +

Websocket events

+ +

close, {{event("error")}}, message, open

+ +

Window events

+ +

DOMWindowCreated, DOMWindowClose, DOMTitleChanged, MozBeforeResize {{obsolete_inline}}, SSWindowClosing, SSWindowStateReady, SSWindowStateBusy, close

+ +

Uncategorized events

+ +

{{event("beforeunload")}}, {{event("localized")}}, message, message, message, MozAfterPaint, {{event("moztimechange")}}, open, {{event("show")}}

+ +

See also

+ + diff --git a/files/uk/web/guide/css/getting_started/index.html b/files/uk/web/guide/css/getting_started/index.html new file mode 100644 index 0000000000..d273ec9d69 --- /dev/null +++ b/files/uk/web/guide/css/getting_started/index.html @@ -0,0 +1,46 @@ +--- +title: Getting started with CSS +slug: Web/Guide/CSS/Getting_started +translation_of: Learn/CSS/First_steps +--- +

Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (Cascading Style Sheets - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.

+ +

Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить списки більш просуненого рівня.

+ + + +

Що потрібно для початку роботи

+ + + +

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

+ +

На замітку: Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором.  

+ +

Як використовувати це керівництво

+ +

В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. 

+ +

Частина І: основи CSS

+ +

На кожній сторінці переглянь відділ Інформація, щоб зрозуміти як працює CSS. Спробуй  секцію Дія, щоб випробувати CSS на власному комп’ютері.

+ +

To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.

+ +

Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком Детальніше. Використай лінки у них, щоб знайти довідникову інформацію про CSS.

+ +

Частина II: Сфера CSS

+ +

Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.

+ +
    +
  1. JavaScript
    2. +
  2. SVG-графіка
    3. +
  3. XML дані
    4. +
  4. XBL сполучення
    5. +
  5. Користувацбкі інтерфейси ХUL
    6. +
diff --git a/files/uk/web/guide/css/getting_started/what_is_css/index.html b/files/uk/web/guide/css/getting_started/what_is_css/index.html new file mode 100644 index 0000000000..dfaba8a76d --- /dev/null +++ b/files/uk/web/guide/css/getting_started/what_is_css/index.html @@ -0,0 +1,113 @@ +--- +title: What is CSS? +slug: Web/Guide/CSS/Getting_started/What_is_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} This first section of the CSS Getting Started tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.

+ +

Інформація: Що таке CSS?

+ +

Каскадні таблиці стилів (англ. - Cascading Style Sheets  CSS) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок HTML.

+ +

Документ являє собою інформацію, структуровану для подання з використанням мови розмітки.

+ +

Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.

+ +
+

Приклади

+ + +
+ +

In this tutorial, boxes captioned Детальніше like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.

+ +
+
Детальніше
+ +

Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.

+ +

Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з  документами, збереженими у файлах.

+ +

Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:

+ + + + + + + + + + + + + + + + + + + + +
HTMLдля веб-сторінок
XMLдля структурованих документів в загальному
SVGдля графіки
XULдля інтерфейсів користувачів у браузері Mozilla
+ +

У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.

+
+ +
+
Детальніше
+ +

In formal CSS terminology, the program that presents a document to a user is called a user agent (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.

+ +

For formal definitions of terminology relating to CSS, see Definitions in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.

+
+ +

До роботи: Створення документу

+ +
    +
  1. Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.
    2. +
  2. Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.
    3. +
  3. Copy and paste the HTML shown below. Save the file using the name doc1.html + 
    <!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
    + +

    {{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}

    +
    4. +
  4. Open a new tab or a new window in your browser, then open the file you just created. +

    You should see the text with the initial letters bold, like this:

    + + + + + + + +
    Cascading Style Sheets
    + +

    What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.

    +
    5. +
+ +

Що далі?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the next section you'll use CSS to style your document.

diff --git a/files/uk/web/guide/html/content_categories/index.html b/files/uk/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..4ec3c5ecbc --- /dev/null +++ b/files/uk/web/guide/html/content_categories/index.html @@ -0,0 +1,168 @@ +--- +title: Категорії вмісту +slug: Web/Guide/HTML/Content_categories +tags: + - Веб + - Навчальний + - ПотребуєОновлення + - Просунутий +translation_of: Web/Guide/HTML/Content_categories +--- +

Кожен елемент HTML має дотримуватись правил, що визначають який тип вмісту він може мати. Такі правила згруповано у моделі вмісту, котрі є такими самими по відношенню до кількох елементів. Кожен елемент HTML належить до жодного, одного, або кількох моделей вмісту, кожна з котрих визначає правила, котрих має дотримуватись вміст елемента у документі, написаного за допомогою HTML.

+ +

Існує три типи категорій вмісту:

+ + + +
+

Примітка: Більш докладне обговорення цих категорій вмісту та їх порівняльних функцій виходить за межі цієї статті; для цього ви можете прочитати відповідні частини специфікації HTML.

+
+ +
Content_categories_venn.png
+ +

Основні категорії вмісту

+ +

Вміст метаданих

+ +

Елементи, що належать до категорії вмісту метаданих, змінюють презентацію або поведінку цілого документу, налаштовують посилання на інші документи, або ж передають несуть, незалежну інформацію.

+ +

Елементи, що належать до цієї категорії {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} і {{HTMLElement("title")}}.

+ +

Потоковий вміст

+ +

До елементів, що належать до потокового вмісту, типовим є текстовий або ж вбудований вміст. Такими елементами є: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} і текст.

+ +

Є іще кілька елементів, що належать до цієї категорії, та лише за певних умов:

+ + + +

Секційний вміст

+ +

Елементи, що належать до секційної моделі вмісту, створюють секцію в заданому документі, котра визначає межі елементів у {{HTMLElement("header")}}, {{HTMLElement("footer")}} і вмісту заголовків.

+ +

Елементами, котрі належать цій категорії є: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} та {{HTMLElement("section")}}. 

+ +
+

Примітка:  Не сплутайте цю модель вмісту з кореневою секційною категорією, котра ізолює свій вміст від загального обрису документу.

+
+ +

Вміст заголовку

+ +

Контент заголовку визначає назву секції, котра явно визначена елементом секційного вмісту або ж неявно визначена самим елементом вмісту заголовку.

+ +

Елементами, що належать до заданої категорії є: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} та {{HTMLElement("hgroup")}}.

+ +
+

Примітка: попри те, що {{HTMLElement("header")}} елемент швидше за все матиме "вміст заголовку", сам він не відноситься до елементів вмісту заголовку.

+
+ +

Фразовий вміст

+ +

Фразовий вміст визначає текст та розмітку, котру він вміщує. Фразовий вміст формує абзаци.

+ +

Елементами, що належать до цієї категорії є {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} також чистий текст (в тому числі котрий складається з пробілів).

+ +

Іще кілька елементів, що належать до цієї категорії, та лише за певних умов:

+ + + +

Вбудований вміст

+ +

Вбудований вміст імпортує інші ресурси, або ж вставляє вміст з інших мов розмітки або простору імен у документ. Елементи, що належать до цієї категорії включають: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

+ +

Інтерактивний вміст

+ +

Інтерактивний вміст включає елементи, котрі спроектовано виключно для взаємодії з користувачем. Елементи, котрі належать до цієї категорії: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.

+ +

Декотрі елементи належать до цієї категорії лише за певних обставин:

+ + + +

Видимий вміст

+ +

Вміст є видимим коли він не пустий і не прихований. Елементи чиєю моделлю є потоковий міст або фразовий вміст, повинні мати принаймні один вузол видимого вмісту.

+ +

Вміст форм

+ +

Вміст форм вміщує елементи, котрі мають власника форми, визначеного атрибутом form. Власником форми є елемент {{HTMLElement("form")}}, або ж елемент, чий ідентифікатор (id), вказано у атрибуті form.

+ + + +

  Ця категорія містить кілька підкатегорій:

+ +
+
listed
+
Елементи, перелічені в form.elements та fieldset.elements IDL колекціях. Містять {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.
+
labelable
+
Елементи, що можна пов'язати з {{HTMLElement("label")}} елементами. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.
+
submittable
+
Елементи, які можуть бути використані для побудови набору даних форми, коли відправляється форма. Містять {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.
+
resettable
+
Елементи, які можуть бути скинуті при зміні форми. Містять {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, та {{HTMLElement("textarea")}}.
+
+ +

Додаткові категорії

+ +

Є деякі вторинні класифікації елементів, які можуть бути корисними та про які вам треба знати.

+ +

Елементи підтримки скрипту

+ +

Елементи підтримки скрипту є елементами, які безпосередньо не беруть участі у виводі документа. Замість цього вони виконують роль підтримки скриптів, або безпосередньо містять код, або вказувають на нього, або шляхом визначення даних, які будуть використовуватися скриптом.

+ +

Елементами підтримки скрипту є:

+ +

{{HTMLElement("script")}} {{HTMLElement("template")}}

+ +

Прозора модель вмісту

+ +

Якщо елемент має прозору модель вмісту, його вміст має бути структурований таким чином, щоб він був дійсним HTML5 кодом, навіть якщо прозорий елемент було вилучено і замінено дочірними елементами.

+ +

Наприклад, {{HTMLElement("del")}} і {{HTMLELement("ins")}} елементи є прозорими:

+ +
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
+
+ +

Навіть якщо ці елементи було вилучено, цей фрагмент як і раніше буде дійсним HTML.

+ +
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
+
+ +

Інші моделі вмісту

+ +

Секціонування кореню.

diff --git a/files/uk/web/guide/html/html5/index.html b/files/uk/web/guide/html/html5/index.html new file mode 100644 index 0000000000..8ae6ab8dcf --- /dev/null +++ b/files/uk/web/guide/html/html5/index.html @@ -0,0 +1,164 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 є найновішим стандартом,що описує HTML. Цей термін представляє дві різні концепції:

+ + + +

Спроектована, для використання всіма розробниками Відкритого Вебу (Open Web), ця сторінка надає посилання до численних ресурсів про HTML5 технологї, розсортованні в декілька груп, в залежності від їх функцій.

+ + + +
+
+

сЕМАНТиКА

+ +
+
Sections and outlines in HTML5
+
Огляд нових елементів HTML5 для структуризації контенту: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} and {{HTMLElement("aside")}}.
+
Використання відео та аудіо в HTML5
+
Елементи {{HTMLElement("audio")}} та {{HTMLElement("video")}}  вбудовують та дозволяють керування новим мультимедійним контентом.
+
Форми в HTML5
+
Огляд вдосконалень для веб-форм в HTML5: перевірка обмежень API, декілька нових атрибутів, нові значення для атрибуту {{HTMLElement("input")}}  {{htmlattrxref("type", "input")}} а також новий елемент {{HTMLElement("output")}} .
+
Нові семантичні елементи
+
Поруч із розділами, носіями(медіа) та елементами форм, в HTML5 є численні нові елементи: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, або {{HTMLElement("meter")}} та {{HTMLElement("main")}}, що збільшують кількість чинних елементів HTML5.
+
Вдосконалення в {{HTMLElement("iframe")}}
+
Використовуючи атрибути {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, та {{htmlattrxref("srcdoc", "iframe")}}, автори зараз можуть бути певними щодо рівня безпеки та бажаної візуалізації елементу {{HTMLElement("iframe")}}.
+
MathML
+
Дозволяє безпосередньо вставлені математичні формули.
+
Знайомство з HTML5
+
У цьому розділі показано, як вказати браузеру, що ви використовуєте HTML5 у своєму веб-дизайні чи веб-програмі.
+
HTML5-сумісний парсер
+
The parser, which turns the bytes of an HTML document into a DOM, has been extended and now precisely defines the behavior to use in all cases, even when faced with invalid HTML. This leads to far greater predictability and interoperability between HTML5-compliant browsers.
+
+ +

Зв'язок

+ +
+
Web Sockets
+
Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.
+
Server-sent events
+
Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client's request.
+
WebRTC
+
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
+
+ +

Оффлайн та сховище

+ +
+
Offline resources: The application cache
+
Firefox fully supports the HTML5 offline resource specification. Most others have offline resource support at some level.
+
Online and offline events
+
Firefox 3 supports WHATWG online and offline events, which let applications and extensions detect whether or not there's an active Internet connection, as well as to detect when the connection goes up and down.
+
WHATWG client-side session and persistent storage (aka DOM storage)
+
Client-side session and persistent storage allows web applications to store structured data on the client side.
+
IndexedDB
+
IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.
+
Using files from web applications
+
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the {{HTMLElement("input")}} of type file HTML element's new multiple attribute. There also is FileReader.
+
+ +

Мультимедіа

+ +
+
Using HTML5 audio and video
+
The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements embed and allow the manipulation of new multimedia content.
+
WebRTC
+
This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.
+
Using the Camera API
+
Allows using, manipulating, and storing an image from the computer's camera.
+
Track and WebVTT
+
The {{HTMLElement("track")}} element allows subtitles and chapters. WebVTT is a text track format.
+
+ +

3D Графіка та ефекти 

+ +
+
Canvas tutorial
+
Learn about the new {{HTMLElement("canvas")}} element and how to draw graphs and other objects in Firefox.
+
HTML5 Text API for <canvas> elements
+
The HTML5 text API is now supported by {{HTMLElement("canvas")}} elements.
+
WebGL
+
WebGL brings 3D graphics to the Web by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements.
+
SVG
+
An XML-based format of vectorial images that can directly be embedded in the HTML.
+
+
+ +
+

Ефективність та Інтеграція

+ +
+
Web Workers
+
Allows delegation of JavaScript evaluation to background threads, allowing these activities to prevent slowing down interactive events.
+
XMLHttpRequest level 2
+
Allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions. This is the technology behind Ajax.
+
JIT-compiling JavaScript engines
+
The new generation of JavaScript engines is much more powerful, leading to greater performance.
+
History API
+
Allows the manipulation of the browser history. This is especially useful for pages loading interactively new information.
+
The contentEditable Attribute: Transform your website to a wiki!
+
HTML5 has standardized the contentEditable attribute. Learn more about this feature.
+
Drag and drop
+
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
+
Focus management in HTML
+
The new HTML5 activeElement and hasFocus attributes are supported.
+
Web-based protocol handlers
+
You can now register web applications as protocol handlers using the navigator.registerProtocolHandler() method.
+
requestAnimationFrame
+
Allows control of animations rendering to obtain optimal performance.
+
Fullscreen API
+
Controls the usage of the whole screen for a Web page or application, without the browser UI displayed.
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit.
+
Online and offline events
+
In order to build a good offline-capable web application, you need to know when your application is actually offline. Incidentally, you also need to know when your application has returned to an online status again.
+
+ +

Доступ до пристрою

+ +
+
Using the Camera API
+
Allows using, manipulating, and storing an image from the computer's camera.
+
Touch events
+
Handlers to react to events created by a user pressing touch screens.
+
Using geolocation
+
Let browsers locate the position of the user using geolocation.
+
Detecting device orientation
+
Get the information when the device on which the browser runs changes orientation. This can be used as an input device (e.g., to make games that react to the position of the device) or to adapt the layout of a page to the orientation of the screen (portrait or landscape).
+
Pointer Lock API
+
Allows locking the pointer to the content, so games and similar application don't lose focus when the pointer reaches the window limit.
+
+ +

Стилі

+ +

CSS has been extended to be able to style elements in a much more complex way. This is often referred as CSS3, though CSS is not a monolithic specification any more and the different modules are not all at level 3: some are at level 1 and others at level 4, with all the intermediate levels covered.

+ +
+
New background styling features
+
It is now possible to put a shadow to a box, using {{cssxref("box-shadow")}} and multiple backgrounds can be set.
+
More fancy borders
+
Not only it is now possible to use images to style borders, using {{cssxref("border-image")}} and its associated longhand properties, but rounded borders are supported via the {{cssxref("border-radius")}} property.
+
Animating your style
+
Using CSS Transitions to animate between different states or using CSS Animations to animate parts of the page without a triggering event, you can now control mobile elements on your page.
+
Typography improvement
+
Authors have better control to reach better typography. They can control {{cssxref("text-overflow")}} and hyphenation, but also can add a shadow to it or control more precisely its decorations. Custom typefaces can be downloaded and applied thanks to the new {{cssxref("@font-face")}} at-rule.
+
New presentational layouts
+
In order to improve the flexibility of designs, two new layouts have been added: the CSS multi-column layouts and CSS flexible box layout.
+
+
+
diff --git "a/files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" "b/files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" new file mode 100644 index 0000000000..84db2e6a76 --- /dev/null +++ "b/files/uk/web/guide/html/\320\262\320\270\320\272\320\276\321\200\320\270\321\201\321\202\320\260\320\275\320\275\321\217_html-\321\201\320\265\320\272\321\206\321\226\320\271_\321\202\320\260_\321\201\321\202\321\200\321\203\320\272\321\202\321\203\321\200\320\260_\320\264\320\276\320\272\321\203\320\274\320\265\320\275\321\202\321\203/index.html" @@ -0,0 +1,337 @@ +--- +title: Використання HTML-секцій та структура документу +slug: Web/Guide/HTML/Використання_HTML-секцій_та_структура_документу +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
+

 В перекладі наводяться терміни схема документу та алгоритм схематизації у відповідності до англійських outline та outline algorithm, оскільки на думку перекладача найбільш точно відповідають змісту, вкладеному в поняття на мові оригінлу.

+ +

Також у відповідності до section та subsection використано розділ та підрозділ, так як в змісті даного документу йдеться більше про великі веб-сторінки, порівнювані із книжками.

+
+ +
+

Зверніть увагу: На даний момент немає відомих реалізацій алгоритму побудови схеми документа в браузерах чи інших агентах користувачів (assistive technology user agents), проте алгоритм реалізований в  ішому програмному забезпеченні, наприклад, в засобах перевірки стандартів (conformance checkers). Therefore the outline algorithm cannot be relied upon to convey document structure to users. Автори рекомендують використовувати ранг заголовку (h1-h6) для опису структури документу.

+
+ +

Специфікація HTML 5 вводить ряд нових елементів, що дозволяють веб-розробникам краще описувати структуру веб-документу використовуючи стандартну семантику. Даний документ описує ці елементи та способи їх використання для створення бажаної схеми документу.

+ +

Структура документу в HTML 4

+ +

Структура документу, тобто семантична структура, що знаходиться між <body> і </body>, — основа представлення сторінки. В HTML4 для опису структури документу використовується форма запису із розділів та підрозділів. Розділ визначається за допомогою елемента ({{HTMLElement("div")}}), в який включаються елементи заголовків ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, або {{HTMLElement("h6")}}), які, власне, і слугують заголовками секцій чи підсекцій. Взаєморозміщення даних елементів утворює структуру документу та будує його схему.

+ +

Таким чином наступна розмітка:

+ +
+
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div>
+
+
+ +

зводиться до наступної схеми:

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Елемент {{HTMLElement("div")}} не оголошує нову секцію. Для цього достатньо наявності тегу заголовка. Таким чином фрамент:

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

зумовлює наступну схему:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Проблеми, розв'зані за допомогою HTML5

+ +

Спосіб визначення структури документу в HTML 4 та обробка її алгоритмом схематизації є досить складнм та зумовлює наступні проблеми:

+ +
    +
  1. Використання елементу {{HTMLElement("div")}}  для оголошення секцій (розділів) без використання спеціальних класів (значень атрибуту class) робить неможливим застосування алгоритму схематизації ("Цей {{HTMLElement("div")}} — частина схеми сторінки, що визначає секцію чи підсекцію?" Чи "це звичайний {{HTMLElement("div")}}-елемент, використаний для стилізації?"). Іншими словами, специфікація HTML 4 дуже неточно визначає межі початку та закінчення розділів. Автоматична генерація схеми документу досить важлива, зокрема для реабілітаційних технологій, які адаптують та доносять інформацію до людей (від перекл.: як правило, з обмеженими можливостями) базуючись на структурі документу. HTML 5 усуває труднощі обробки елементу {{HTMLElement("div")}} алгоритмом схематизації, оскільки вводить новий елемент для розділів, {{HTMLElement("section")}}, HTML Section Element.
    2. +
  2. Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} and {{HTMLElement("aside")}}) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.
    3. +
  3. In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the {{HTMLElement("aside")}} element allowing such sections to not be part of the main outline.
    4. +
  4. Again, in HTML4, because every section is part of the document outline, there is no way to have sections containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three new elements: {{HTMLElement("nav")}} for collections of links, such as a table of contents, {{HTMLElement("footer")}} and {{HTMLElement("header")}} for site-related information. Note that {{HTMLElement("header")}} and {{HTMLElement("footer")}} are not sectioning content like {{HTMLElement("section")}}, rather, they exist to semantically mark up parts of a section.
    5. +
+ +

More generally, HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.

+ +

Алгоритм схематизації HTML 5

+ +

Let's consider the algorithms  underlying the way HTML handles sections and outlines.

+ +

Defining sections

+ +

All content lying inside the {{HTMLElement("body")}} element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the {{HTMLElement("body")}} element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} tags. 

+ +
Each section can have its own heading hierarchy. Therefore, even a nested section can have an {{HTMLElement("h1")}}. See {{anch("Defining headings")}}
+ +

Let's look at an example — here we have a document with a top level section and a footer defined. Inside the top level section we have three subsections, defined by two {{htmlelement("section")}} elements and an {{htmlelement("aside")}} element:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

This leads to the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Defining headings

+ +

While the HTML Sectioning elements define the structure of the document, an outline also needs headings to be useful. The basic rule is simple: the first HTML heading element (one of {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) defines the heading of the current section.

+ +

The heading elements have a rank given by the number in the element name, where {{HTMLElement("h1")}} has the highest rank, and {{HTMLElement("h6")}} has the lowest rank. Relative ranking matters only within a section; the structure of the sections determines the outline, not the heading rank of the sections. For example, consider this code:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

This creates the following outline:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Note that the rank of the heading element (in the example {{HTMLElement("h1")}} for the first top-level section, {{HTMLElement("h2")}} for the subsection and {{HTMLElement("h3")}} for the second top-level section) is not important. (Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.)

+ +

Implicit sectioning

+ +

Because the HTML5 Sectioning Elements aren't mandatory to define an outline, to keep compatibility with the existing web dominated by HTML4, there is a way to define sections without them. This is called implicit sectioning.

+ +

The heading elements ({{HTMLElement("h1")}} to {{HTMLElement("h6")}}) define a new, implicit, section when they aren't the first heading of their parent, explicit, sections. The way this implicit section is positioned in the outline is defined by its relative rank with the previous heading in their parent section. If it is of a lower rank than the previous heading, it opens an implicit sub-section of the section. This code:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

leading to the following outline:

+ +
1. Forest elephants
+   1.1 Habitat (implicitly defined by the h3 element)
+
+ +

If it is of the same rank as the previous heading, it closes the previous section (which may have been explicit!) and opens a new implicit one at the same level: 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

leading to the following outline: 

+ +
1. Forest elephants
+2. Mongolian gerbils (implicitly defined by the h1 element, which closed the previous section at the same time)
+
+ +

If it is of a higher rank than the previous heading, it closes the previous section and opens a new implicit one at the higher level:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

leading to the following outline:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

+ +

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

+ +

Sectioning roots

+ +

 A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it does not contribute to the outline of its ancestor. Beside {{HTMLElement("body")}} which is the logical sectioning root of a document, these are often elements that introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} and {{HTMLElement("td")}}.

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

This example results in the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

+ +

Sections outside the outline

+ +

 HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

+ +
    +
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. +
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. +
+ +

Headers and Footers

+ +

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

+ +
    +
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. +
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. +
+ +

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

+ +

Addresses in sectioning elements

+ +

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

+ +

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

+ +

Using HTML5 elements in non-HTML5 browsers

+ +

Sections and headings elements should work in most non-HTML5 browsers. Though unsupported, they don't need a special DOM interface and they only need a specific CSS styling as unknown elements are styled as display:inline by default:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

+ +

This method has its limitation though, as some browsers do not allow styling of unsupported elements. That is the case of the Internet Explorer (version 8 and earlier), which need a specific script to allow this:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

This script means that, in the case of Internet Explorer (8 and earlier), scripting should be enabled in order to display HTML5 sectioning and headings elements properly. If not, they won't be displayed, which may be problematic as these elements are likely defining the structure of the whole page. That's why an explicit {{HTMLElement("noscript")}} element should be added for this case:

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are created using JavaScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Підсумок

+ +

Нові семантичні елементи, що були введені стандартом HTML5 забезпечили можливість описувати структуру документу єдиним стандартеризованим способом. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/uk/web/guide/index.html b/files/uk/web/guide/index.html new file mode 100644 index 0000000000..c11dfa4089 --- /dev/null +++ b/files/uk/web/guide/index.html @@ -0,0 +1,66 @@ +--- +title: Довідник веб-розробника +slug: Web/Guide +tags: + - Guide + - Landing + - TopicStub + - Web +translation_of: Web/Guide +--- +

Ці статті нададуть Вам практичні рекомендації, що допоможуть з ефективністю використовувати специфічні технології та АРІ. 

+ +
+
+
+
+
+
Довідник розробника HTML
+
Мова розмітки гіпертексту (англ. HyperText Markup Language - HTML) - основна мова майже всього веб-контенту. Більша частина того, що ти бачиш на екрані, описано, в основному, з використанням HTML.
+
Довідник розробника CSS
+
Каскадні таблиці стилів (англ. Cascading Style Sheets - CSS) - мова таблиць стилів, що використовується для опису відображення документу, написанного мовою HTML.
+
Довідник розробника з подій
+
Події відносяться як до шаблонів дизайну, які застосовують для асинхронного регулювання різних інцидентів, що виникають протягом терміну експлуатації веб-сторінки, так і для означення імен, характеристик та застосування великої кількості інцидентів різних типів.
+
Графіка в Мережі
+
Сучасні веб-сайти та додатки часто потребують відобразити графіку різної складності.
+
Путівник до Веб API
+
Список усіх Веб АРІ та що вони роблять.
+
JavaScript
+
JavaScript є потужною скриптовою мовою для створення веб-додатків.
+
Локалізація та кодування символів
+
Браузери внутрішньо обробляють текст як Unicode. Однак, спосіб представлення символів в бітовому значенні (кодування символів) використовується для передачі тексту через мережу до браузера. HTML специфікація рекомендує використання кодування UTF-8 (яке здатне відображати Unicode цілком) і не залежно від того, яке кодування було використано, вимагає від Веб-контенту оголошення цього кодування.
+
Розробка мобільного інтернету
+
Ця сторінка представляє огляд деяких з основних технік, необхідних для оформлення веб-сайтів, що будуть добре працювати на мобільних пристроях. Якщо ви шукаєте інформацію про проект Mozilla's Firefox OS, відвідайте сторінку Firefox OS.  Або ж вас може зацікавити Firefox для Android.
+
+ +
+
+
+ +
+
+
Оптимізація та продуктивність
+
Розробляючи сучасні веб-додатки та сайти, важливо забезпечити їх високу продуктивність. Тобто, зробити так, щоб все у них працювало швидко та ефективно. Це дозволяє їм оптимально працювати як у користувачів потужних десктопних систем та і на менш потужних мобільних пристроях. 
+
Парсування та серіалізація XML
+
Веб-платформи надають наступні об’єкти для парсування та серіалізації XML:
+
SVG-in-OpenType
+
Формат SVG-in-OpenType на даний момент працює в руках MPEG group. Як тільки ми будемо готові для ширшого затвердження, інформація з wiki.mozilla.org буде переміщена сюди, оновлена і розширена.
+
The Web Open Font Format (WOFF)
+
Відкритий формат шрифту для Веб (англ. the Web Open Font Format - WOFF) відкритий формат шрифтів, розроблений Mozilla спільно з Type Supply, LettError, та іншими організаціями.
+
Користувацький досвід
+
Якщо ви хочете, щоб користувачі повертались і використовували ваш додаток чи веб-сайт знову і знову, для вас важливо зробити досвід користування ним приємним. Тут ви зможете знайти статті, що зможуть допомогти в цьому.  
+
Використання об’єктів форм даних
+
Об’єкти FormData дозволяють вам поєднувати набір ключ/значення для відправки з використанням XMLHttpRequest (запитів). Спершу призначені для використання в надсиланні форм даних, але можуть бути використані незалежно від форм для передачі зашифрованих даних. Дані, що передаються, мають такий же формат, як і у методі форми submit(), яка була б використана для відправки даних якби кодування форми було визначено як "multipart/form-data".
+
Глоссарій
+
Дає визначення численним технічним термінам, пов’язаним з Мережею та інтернетом.
+
+
+
+
+
+ +

Дивись також

+ + diff --git "a/files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" "b/files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" new file mode 100644 index 0000000000..57af0fdbc3 --- /dev/null +++ "b/files/uk/web/guide/\320\263\321\200\320\260\321\204\321\226\320\272\320\260/index.html" @@ -0,0 +1,49 @@ +--- +title: Графіка для Web +slug: Web/Guide/Графіка +tags: + - 2D + - 3D + - Canvas + - HTML5 + - SVG + - WebGL + - WebRTC + - Веб + - Графіка +translation_of: Web/Guide/Graphics +--- +

Сучасним сайтам і веб-додаткам потрібне відображення графіки. Статичні зображення легко зобразити використовуючи елемент {{HTMLElement("img")}}, чи налаштувати фон HTML елементів використовуючи властивість {{cssxref("background-image")}}. Ви також можете конструювати графіку на льоту, або модифікувати її після. В статтях далі сказано як це можна зробити.

+ +
+
+

2D Графіка

+ +
+
Canvas
+
Елемент {{HTMLElement("canvas")}} надає зручні API для малювання 2D графіки використовуючи JavaScript.
+
SVG
+
Scalable Vector Graphics (SVG) дозволяє використовувати лінії, криві, та інші геометричні фігури для рендерингу графіки. З векторів, ви можете створювати зображення які не втрачають якості при маштабуванні.
+
+ +

Переглянути все...

+
+ +
+

3D Графіка

+ +
+
WebGL
+
Посібник для початку роботи з WebGL, API для роботи з 3D графікою в веб. Ця технологія дає вам можливість використовувати стандартний OpenGL ES в Web контенті.
+
+ +

Відео

+ +
+
Використання HTML5 аудіо і відео
+
Вбудовування відео і/або аудіо в веб-сторінки і керування відтворенням.
+
WebRTC
+
RTC в WebRTC означає Real-Time Communications (комунікація в реальному часі), технологія яка дозволяє передавати потокове аудіо/відео і дані між кліентами браузера (пірами).
+
+
+
diff --git a/files/uk/web/html/attributes/index.html b/files/uk/web/html/attributes/index.html new file mode 100644 index 0000000000..f7499d1bf4 --- /dev/null +++ b/files/uk/web/html/attributes/index.html @@ -0,0 +1,654 @@ +--- +title: HTML attribute reference +slug: Web/HTML/Attributes +translation_of: Web/HTML/Attributes +--- +

Елементи в HTML можуть мати атрибути; це додаткові величини, які певним чином змінюють безпосередньо елементи або їх поведінку для отримання необхідного користувачеві ефекту.

+ +

Список атрибутів

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Назва атрибутуЕлементиОпис
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Список типів даних, що приймає сервер, зазвичай, типів файлів.
accept-charset{{ HTMLElement("form") }}Список кодувань, які підтримуються.
accesskeyГлобальний атрибутВизначає комбінацію клавіш швидкого доступу для активації або фокусування на елементі.
action{{ HTMLElement("form") }}URI програми, яка обробляє інформацію, передану формою.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Визначає вирівнювання елементу по горизогталі
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}Показує альтарнативний текст у разі неможливості відобразити зображення.
async{{ HTMLElement("script") }}Вказуєна те, що скрипт повинен виконуватися асинхронно.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Вказує чи дозволено автозаповнення полів браузером.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Після завантаження сторінки, відбуватиметься автоматичне фокусування на цьому елементі.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Відтворює аудіо чи відео одразу, коли це стає можливим.
autosave{{ HTMLElement("input") }}Попередні значення повинні зберігатися у випадному списку, щоб можна було обрати значення з різних завантажень сторніки.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Визначає колір заднього фону елементу.

+ +
+

Примітка: Це застарілий атрибут. Натомість краще використовувати CSS-властивість {{ Cssxref("background-color") }}.

+
+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

Ширина границі.

+ +
+

Примітка: Це застарілий атрибут. Натомість краще використовувати CSS-властивість {{ Cssxref("border") }}.

+
+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Містить тривалість часу буферованого медіафайлу.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Оголошує кодування символів сторінки або скрипту.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Вказує чи слід перевіряти елемент при завантаженні сторінки.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Містить URI, що вказує на джерело цитати або зміни.
classГлобальний атрибутЧасто використовують з CSS для задання стилю елементів зі спільними властивостями.
code{{ HTMLElement("applet") }}Вказує URL файла класу аплету для завантаження та виконання.
codebase{{ HTMLElement("applet") }}Цей атрибут надає абсолютну чи відносну URL директорії, де зберігаються файли .class аплету.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Цей атрибут задає колір тексту за назвою кольору або його кодом у шістнадцятковому форматі RRGGBB.

+ +
+

Примітка: Це застарілий атрибут. Натомість краще використовувати CSS-власивість {{ Cssxref("color") }}

+
+
cols{{ HTMLElement("textarea") }}Задає кількість колонок в текстовому полі.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Цей атрибут задає кількість стовпців, яку займає одна комірка таблиці вширину.
content{{ HTMLElement("meta") }}Знаення, пов'язане з http-equiv або name залежно від контексту.
contenteditableГлобальний атрибутВказує чи можна змінювати вміст елементу.
contextmenuГлобальний атрибутВизначає ID елементу {{ HTMLElement("menu") }}, який слугуватиме контекстним меню елемента.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Вказує чи браузер відображатиме панель управління медіа користувачеві.
coords{{ HTMLElement("area") }}Набір значень, що задають координати активної області.
crossorigin{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}Визначає як елемент поводиться з запитами до різних джерел.
data{{ HTMLElement("object") }}Задає URL джерела.
data-*Глобальний атрибутДозволяє вам застосовувати до HTML-елемента користувацькі атрибути.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Вказує час та дату, пов'язані з елементтом.
default{{ HTMLElement("track") }}Indicates that the track should be enabled unless the user's preferences indicate something different.
defer{{ HTMLElement("script") }}Indicates that the script should be executed after the page has been parsed.
dirГлобальний атрибутDefines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Вказує на можливість взаємодії користувача з елементом.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Вказує на те, що посилання використовується для завантаження.
draggableГлобальний атрибутВизначає чи можна перетягувати елемент.
dropzoneГлобальний атрибутВказує чи може елемент приймати перетягування на нього контенту.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Описує елементи, які належать до цього елементу.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Визначає форму, яка є батьківською для цього елементу.
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}Indicates the action of the element, overriding the action defined in the {{ HTMLElement("form") }}.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs of the <th> elements which applies to this element.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Задає висоту перелічених елементів. Для інших елементів краще використовувати CSS-властивість {{cssxref("height")}}.

+ +
+

Примітка: У деяких випадках, зокрема для {{ HTMLElement("div") }}, це застарілий атрибут. Натомість для нього краще застосовувати CSS-властивість {{ Cssxref("height") }}.

+
+
hiddenГлобальний атрибутНе дозволяє рендеринг певного елемента, але не скасовує рендеринг дочірніх елементів, наприклад, скриптових і активних.
high{{ HTMLElement("meter") }}Вказує нижню межу верхнього діапазону.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} URL посилання на певне джерело.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Вказує на мову сторінки, на яку буде перейдено за посиланням.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Задає картинку, яка відображає команду.
idГлобальний атрибутЧасто використовується з CSS для задання стилю конкретному елементу. Значення цього атрибути повинно бути унікальним.
integrity{{ HTMLElement("link") }}, {{ HTMLElement("script") }}  +

Додатковий рівень захисту, дає змогу браузеру ідентифікувати, чи він стягує потрібний файл.

+ +

Посилання MDN

+
ismap{{ HTMLElement("img") }}Вказує на те, що зображення є частиною заображення серверної карти.
itempropГлобальний атрибут 
keytype{{ HTMLElement("keygen") }}Визначає тип генерованого ключа.
kind{{ HTMLElement("track") }}Specifies the kind of text track.
label{{ HTMLElement("track") }}Specifies a user-readable title of the text track.
langГлобальний атрибутDefines the language used in the element.
language{{ HTMLElement("script") }}Defines the script language used in the element.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indicates whether the media should start playing from the start when it's finished.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
manifest{{ HTMLElement("html") }}Specifies the URL of the document's cache manifest.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifies a hint of the media for which the linked resource was designed.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
muted{{ HTMLElement("video") }}Indicates whether the audio will be initially silenced on page load.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
open{{ HTMLElement("details") }}Indicates whether the details will be shown on page load.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Дає підказку користувачу про те, які дані треба вводити в поле.
poster{{ HTMLElement("video") }}URL, що відображає рамку постера під час програвання або пошуку.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Вказує, чи потребує попереднього завантаження контент або його частина.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Вказує чи можна редагувати цей елемент.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Визнчає взаємозв'язок даного об'єкту та об'єкту посилання.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Вказує чи заповнення цього елементу є обов'язковим.
reversed{{ HTMLElement("ol") }}Вказує як відображати елементи списку: у порядку зростання чи спадання.
rows{{ HTMLElement("textarea") }}Визначає кількість рядків у текстовому полі.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Визначає кількість рядків, які займає одна комірка таблиці.
sandbox{{ HTMLElement("iframe") }} 
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Задає значення, яке буде обрано при звантаженні сторінки.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Задає ширину елементу (у пікселях). Якщо елемент є стрічкою або текстом чи паролем, то цей атрибут задає кількість символів в ширину.
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }} 
slotГлобальний атрибутВідводить елементу місце у тіньовій моделі документу.
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
spellcheckГлобальний атрибутВказує чи дозволена для цього елемента перевірка правопису.
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}URL вбудованого контенту.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
srcset{{ HTMLElement("img") }} 
start{{ HTMLElement("ol") }}Задає значення початку відліку, якщо воно повинно бутит відмінним від "1".
step{{ HTMLElement("input") }} 
styleГлобальний атрибутВизначає CSS-стилі, які переписуюють попередньо задані властивості.
summary{{ HTMLElement("table") }} 
tabindexГлобальний атрибутПереписує порядок шарів сторінки за замовчуванням та встановлює свій.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleГлобальний атрибутТекст, який показується при наведенні курсору на елемент.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Визначає тип даних елементу.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Задає величину, що буде відображатись за замовчуванням після завантаження сторінки.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Задає ширину для всіх зазначених у списку елементів.

+ +
+

Примітка: У інших випадках, наприклад для елементу  {{ HTMLElement("div") }}, цей атрибут застарілий, і краще використовувати CSS-властивість {{ Cssxref("width") }}.

+
+
wrap{{ HTMLElement("textarea") }}Вказує, чи потрібно додавати нові рядки до тексту.
+ +

Content versus IDL attributes

+ +

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

+ +

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's maxlength to 42 using the content attribute, you have to call setAttribute("maxlength", "42") on that element.

+ +

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

+ +

Most of the time, IDL attributes will return their values as they are really used. For example, the default type for {{HTMLElement("input")}} elements is "text", so if you set input.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, the type IDL attribute will return the string "text".

+ +

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

+ +

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

+ +

Також читай

+ + diff --git a/files/uk/web/html/block-level_elements/index.html b/files/uk/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..2e1b9eef0f --- /dev/null +++ b/files/uk/web/html/block-level_elements/index.html @@ -0,0 +1,133 @@ +--- +title: Блокові елементи +slug: Web/HTML/Block-level_elements +tags: + - HTML + - HTML5 +translation_of: Web/HTML/Block-level_elements +--- +

В HTML (Hypertext Markup Language — мові гіпертекстової розмітки) елементи зазвичай бувають або блокові, або рядкові. Блокові елементи, або блок-елементи, займають всю ширину батьківського блока (контейнера), утворюючи таким чином блок. У цій статті пояснюється, як це працює. 

+ +

Браузери зазвичай відображають кожний блоковий елемент з нового рядка. Це можна уявити як стопку блоків, у якій всі блоки розміщуються над або один під одним. 

+ +
+

Блокові елементи завжди починаються з нового рядка та займають всю доступну ширину (розтягуються ліворуч та праворуч настільки, наскільки це дозволяє ширина вікна браузера).

+
+ +

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

+ +

Блокові елементи

+ +

HTML

+ +
<p>Цей параграф є блоковим елементом; колір його бекграунду змінений, щоб показати батьківський елемент параграфа.</p>
+ +

CSS

+ +
p { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Block-level_Example') }}

+ +

Застосування

+ + + +

Блокові проти рядкових

+ +

Є кілька ключових відмінностей між блоковими і рядковими елементами:

+ +
+
Форматування
+
Типово, блоковий елемент починається з нового рядка, тоді як рядковий елемент може починатися будь-де в рядку. 
+
Модель контенту
+
Зазвичай блокові елементи можуть містити в собі рядкові елементи, а також інші блокові елементи. Ця структурна відмінність відображає ідею, що блокові елементи утворюють "більші" структури, ніж рядкові елементи.
+
+ +

Розрізнення "блокові елементи vs. рядкові елементи" вживається в специфікаціях HTML до версії 4.01. В HTML5 це протиставлення заміщене більш складними поняттями категорій контенту. Блокові елементи здебільшого відповідають категорії flow content (розміщення контенту) в HTML5, тоді як рядкові — категорії phrasing content (текст і його розмітка), з декількома додатковими категоріями.

+ +

Елементи

+ +

Нижче подається повний перелік усіх блокових елементів HTML (технічно, у нових елементів, представлених у HTML5, "блоковість" вже не визначається). 

+ +
+
+
{{ HTMLElement("address") }}
+
Контактна інформація.
+
{{ HTMLElement("article") }} {{ HTMLVersionInline(5) }}
+
Вміст статті.
+
{{ HTMLElement("aside") }} {{ HTMLVersionInline(5) }}
+
Бічний контент.
+
{{ HTMLElement("blockquote") }}
+
Довга блок-цитата.
+
{{ HTMLElement("canvas") }} {{ HTMLVersionInline(5) }}
+
Канва для малюнків.
+
{{ HTMLElement("dd") }}
+
Описує термін в переліку визначень.
+
{{ HTMLElement("div") }}
+
Поділ документа.
+
{{ HTMLElement("dl") }}
+
Перелік визначень.
+
{{ HTMLElement("dt") }}
+
Термін в переліку визначень.
+
{{ HTMLElement("fieldset") }}
+
Лейбл (назва) для набору полів.
+
+ +
+
{{ HTMLElement("figcaption") }} {{ HTMLVersionInline(5) }}
+
Підпис зображення.
+
{{ HTMLElement("figure") }} {{ HTMLVersionInline(5) }}
+
Групує медіаконтент з підписом (див. {{ HTMLElement("figcaption") }}).
+
{{ HTMLElement("footer") }} {{ HTMLVersionInline(5) }}
+
Секція або футер сторінки. 
+
{{ HTMLElement("form") }}
+
Форма введення.
+
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
+
Заголовки рівнів 1-6.
+
{{ HTMLElement("header") }} {{ HTMLVersionInline(5) }}
+
Секція або хедер сторінки.
+
{{ HTMLElement("hgroup") }} {{ HTMLVersionInline(5) }}
+
Групує контент хедера.
+
{{ HTMLElement("hr") }}
+
Горизонтальна роздільна лінія.
+
{{ HTMLElement("li") }}
+
Пункт переліку.
+
{{ HTMLElement("main") }}
+
Містить основний контент, унікальний для цього документу.
+
{{ HTMLElement("nav") }}
+
Містить навігацію посилань. 
+
+ +
+
{{ HTMLElement("noscript") }}
+
Контент, який буде відображатися, якщо скрипт не підтримується або вимкнений. 
+
{{ HTMLElement("ol") }}
+
Нумерований список (перелік).
+
{{ HTMLElement("output") }} {{ HTMLVersionInline(5) }}
+
Вихідні дані форми.
+
{{ HTMLElement("p") }}
+
Параграф.
+
{{ HTMLElement("pre") }}
+
Попередньо відформатований текст.
+
{{ HTMLElement("section") }} {{ HTMLVersionInline(5) }}
+
Секція веб-сторінки.
+
{{ HTMLElement("table") }}
+
Таблиця.
+
{{ HTMLElement("tfoot") }}
+
Футер таблиці.
+
{{ HTMLElement("ul") }}
+
Ненумерований список (перелік).
+
{{ HTMLElement("video") }} {{ HTMLVersionInline(5) }}
+
Відеоплеєр.
+
+
+ +


+ Також дивися:

+ + diff --git a/files/uk/web/html/element/input/date/index.html b/files/uk/web/html/element/input/date/index.html new file mode 100644 index 0000000000..1737d7786a --- /dev/null +++ b/files/uk/web/html/element/input/date/index.html @@ -0,0 +1,510 @@ +--- +title: +slug: Web/HTML/Element/input/date +translation_of: Web/HTML/Element/input/date +--- +
{{HTMLRef}}
+ +

{{HTMLElement("input")}} елементи типу date створюють поле вводу дати з вбудованим інтерфейсом вибору. Результатом вибору будуть рік, місяць та день, без часу. time та datetime-local поля підтримують вибір часу та дати і часу.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}
+ + + +

UI віджет змінюється від оглядача к оглядачу; для перегляду сумісності дивіться {{anch("Browser compatibility")}}. Якщо оглядач не підтримує такий віджет, він буде відображений просто як <input type="text">.

+ +

Серед оглядачів які підтримуюсь кастомний інтерфейс вибору дати є Chrome/Opera, який виглядає наступним чином:

+ +

+ +

Edge вибор дати виглядає так:

+ +

+ +

У Firefox вибір дати буде таким:

+ +

Datepicker UI in firefox

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}{{domxref("DOMString")}} представляє дату у YYYY-MM-DD форматі, або пустим
Події{{event("change")}} та {{event("input")}}
Підримка атрибутів{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, та {{htmlattrxref("step", "input")}}
IDL атрибутиlist, value, valueAsDate, valueAsNumber.
Методи{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+ +

Значення

+ +

{{domxref("DOMString")}} представляє значення дати введенної у input. Формат дати описаний у {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}.

+ +

Ви можете встановити значення за замовчуванням встановивши дату в атрибут {{htmlattrxref("value", "input")}} , наприклад:

+ +
<input id="date" type="date" value="2017-06-01">
+ +

{{EmbedLiveSample('Value', 600, 40)}}

+ +

Треба пам'ятати що відображений формат відрізняється від актуального value — відображення формату дати буде вибрано на основі вибраної локалі користувальницького оглядача, тоді як value дати завжди є у форматі yyyy-mm-dd.

+ +

Ви також можете взяти чи встановити значення дати у JavaScript використовуючи властивість елементу {{domxref("HTMLInputElement.value", "value")}} , наприклад:

+ +
var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+ +

Цей код знаходить перший {{HTMLElement("input")}} елемент type якого є date і встановлює його значення 2017-06-01 (June 1, 2017).

+ +

Додаткові атрибути

+ +

Додатково з загальними атрибутами {{HTMLElement("input")}} "date" надає наступні додаткові атрибути:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
АтрибутОпис
{{anch("max")}}Максимальна дата яка може бути введена
{{anch("min")}}Мінімальна дата
{{anch("readonly")}}Чи є у інпута контент чи нема, він лише для считування
{{anch("step")}}Інтервал 
+ +

{{htmlattrdef("max")}}

+ +

Остання дата. Якщо встановлена дата {{htmlattrxref("value", "input")}} більше ніж ця дата, елемент не пройде constraint validation. Якщо значення max не валідна строка формату yyyy-MM-dd, тоді елемент не буде мати максимальне обмеження.

+ +

Це значення має вказувати дату пізнішу або поточну вказанному атрибуту min.

+ +

{{htmlattrdef("min")}}

+ +

Мінімальна дата; дати раніші за вказану не пройдуть constraint validation. Якщо значення  min атрибуту має неавлідний формат yyyy-MM-dd, тоді елемент не матиме мінімального обмеження.

+ +

Це значення вказує меньшу або еквівалентну значенню атрибута max.

+ +

{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}

+ +

{{htmlattrdef("step")}}

+ +

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+ +

Для date інпутів, значення step вказується в днях, скалярні до 86,400,000 (мілісекунди). За замовчуванная step має 1, означаюче 1 день.

+ +
+

Вказання any для step атрибуту робить той самий ефект як і 1.

+
+ +

Використання date інпутів

+ +

Поле введення дати зручні на перший погляд — вони надають легкий UI(користувальницький інтерфейс) для вибору дати, і нормалізують формат даних для відправки на сервер, незважаючи на локаль користувача. Однак, існують проблеми підтримки деякими оглядачами <input type="date">.

+ +

Подивимось на базові та комлексні використання <input type="date">, щодо сумісності оглядачів ви можете порадитись за посиланням (see {{anch("Handling browser support")}}). Звичайно, з часом підтримка в оглядачах розповсюдиться. і усі проблеми будуть вирішені.

+ +

Базові використання date

+ +

Найпростіше використання <input type="date"> передбачає базову <input> і {{htmlelement("label")}} комбінацію елементів, як бачимо нижче:

+ +
<form>
+  <div>
+    <label for="bday">Enter your birthday:</label>
+    <input type="date" id="bday" name="bday">
+  </div>
+</form>
+ +

{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}

+ +

Встановлення мінімальной і максимальної дати

+ +

Ви можете використовувати {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} атрибути щоб обмежити дати які будуть вибрані користувачем. В наступному прикладі ми встановлюємо мінімальну дату 2017-04-01 і максимальну дату 2017-04-30:

+ +
<form>
+  <div>
+    <label for="party">Choose your preferred party date:</label>
+    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30">
+  </div>
+</form>
+ +

{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}

+ +

Результатом будуть лише дні в Квітні 2017го які можно буде вибрати — тільки "дні", частина текстового значення будуть можливі для зміни, дати поза Квітнем не будуть проскролюватись у віджеті.

+ +
+

Примітка: Ви можете використати {{htmlattrxref("step", "input")}} атрибут для того щоб вказати інтервал зміни днів (наприклад ви хотіли б щоб можно були вибрати лише Неділю). Однак, це не завжди ефективно в тих чи іншіх реалізаціях.

+
+ +

Контроль розміру input

+ +

<input type="date"> не підтримує розмір форми атрибутами наприклад {{htmlattrxref("size", "input")}}. Зверніться до CSS для контролю розміру елементу.

+ +

Валідація

+ +

За замовчуванням, <input type="date"> не додає жодної валідації на введення значення. UI реалізація загалом не дозволяє уведення будь чого що не є датою — що є добре — але ви всеодно можете лишати поле пустим чи (в оглядачах де інпут відображається простим типом text) ввести неправильну дату (наприклад 32ге Квітня).

+ +

Якщо ви використовуєте {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} для обмеження введення дат (дивіться {{anch("Setting maximum and minimum dates")}}), підтримуючі оглядачі відобразять помилку якщо ви спробуєте відправити дату поза меж вказаних в атрибутах. Однак, перевірте результат щоб запевнитись що значення всередені цих дат, тому що вони можуть не підтримуватись пристрієм користувача.

+ +

В додаток, ви можете використовувати {{htmlattrxref("required", "input")}} атрибут щоб зробити заповнення дати обьв'язковим — знову ж, буде відображена помилка якщо користувач захоче відправити пусте поле. Принаймні, це буде працювати у більшості оглядачів.

+ +

Давайте розглянемо приклад — ми встановили мінімальну і максимальну дату, і також зробили його обов'язковим:

+ +
<form>
+  <div>
+    <label for="party">Choose your preferred party date (required, April 1st to 20th):</label>
+    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+ +

Якщо ви спробуєте відправити форму з незаповненою датою(або з датою поза межами), оглядач відобразить помилку. Спробуйте це самі зробити для перевірки:

+ +

{{EmbedLiveSample('Validation', 600, 100)}}

+ +

Це скріншот приклади оглядача без підтримки віджету дати:

+ +

+ +

CSS використаний нижче в прикладі. Ми використовуєм правила {{cssxref(":valid")}} та {{cssxref(":invalid")}} CSS щоб стилізувати відображення валідного чи невалідного введенного значення поля. Ми встановлюємо іконку на {{htmlelement("span")}} біля інпуту, не на самий інпут, тому що у Chrome створений контент розміщений всередені контролю форми, і не може бути застилізований чи відображений коректно.

+ +
div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}
+ +
+

Важливо: HTML валідація форми не замінює скрипти які перевіряють чи буле введена інформація у коректному форматі. Це достатньо простий метод щоб додати корекцію до HTML, їх можливо обійти , чи видалити зовсім. Якщо ваша серверна сторона не перевірить відправлені данні, це може бути катастрофа (данні можуть бути дуже великого розміру, або неправильного типу, вам можуть завантажити скрипт взлому і так далі).

+
+ +

Обробка підтримки оглядачів

+ +

Як згадано раніше, більша частина проблем з використанням інпуту дати описани  у {{anch("Browser compatibility", "browser support")}}. Як приклад, дата пікер у Firefox для Android виглядає так:

+ +

+ +

Непідтримуючи оглядачі точно деградують інпут, це створює проблеми у якості інтерфейсу користувача (представлеий віджет буде іншим), і обробкою даних.

+ +

Наступна проблема це більш серьозна; як згадували раніше, за інпутом дати, данні завжди нормалізуються у формат yyyy-mm-dd. З текстовим інпутом оглядач не підтримує формат введених даних, і є багато прикладів як люди вводять дати, наприклад:

+ + + +

Єдиний спосіб стосовно цього є лише введення атрибуту {{htmlattrxref("pattern", "input")}}. Якщо інпут дати не використовує цей атрибут, то текстовий буде. Наприклад, розгляньте код у непідтримуючих оглядачах:

+ +
<form>
+  <div>
+    <label for="bday">Enter your birthday:</label>
+    <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+ +

{{EmbedLiveSample('Handling_browser_support', 600, 100)}}

+ +

Якщо ви спробуєте відправити це, ви побачете помилку (інпут підсвітеться як невалідний) якщо ви ввели данні які не збігаються з шаблоном nnnn-nn-nn, де n номер від 0 до 9. Звичайно, це не зупинить людей від введення неправильної дати, чи введення у неправильному форматі, як yyyy-dd-mm (де ми очикуємо yyyy-mm-dd). Тож всеж таки маємо проблему.

+ + + +

Найкращий шлях опрацьовувати дати в формах в крос-браузерному форматі на даний момент є введення користувачем дня, місяця, і року в окремих елементах ({{htmlelement("select")}}; (дивіться далі реалізацію), або використовуючи JavaScript бібліотеку jQuery date picker.

+ +

Приклади

+ +

В цьому прикладі ми створюємо два набори UI елементів для вибору дат: рідний <input type="date"> і набір із трьох {{htmlelement("select")}} елементів для вибору дати в тих оглядачах які не підтримують рідний date інпут.

+ +

{{EmbedLiveSample('Examples', 600, 100)}}

+ +

HTML

+ +

HTML виглядає так:

+ +
<form>
+    <div class="nativeDatePicker">
+      <label for="bday">Enter your birthday:</label>
+      <input type="date" id="bday" name="bday">
+      <span class="validity"></span>
+    </div>
+    <p class="fallbackLabel">Enter your birthday:</p>
+    <div class="fallbackDatePicker">
+      <span>
+        <label for="day">Day:</label>
+        <select id="day" name="day">
+        </select>
+      </span>
+      <span>
+        <label for="month">Month:</label>
+        <select id="month" name="month">
+          <option selected>January</option>
+          <option>February</option>
+          <option>March</option>
+          <option>April</option>
+          <option>May</option>
+          <option>June</option>
+          <option>July</option>
+          <option>August</option>
+          <option>September</option>
+          <option>October</option>
+          <option>November</option>
+          <option>December</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Year:</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+</form>
+ +

Назви місяців жорстко закодовані (тому що вони завжди однакові), коли дні і роки динамічно згенеровані залежно від того який місяць і рік вибраний, і поточний рік (дивіться коментарі коду нижче для детального пояснення як ці функції працюють).

+ + + +

JavaScript

+ +

Друга частина коду розраховує чи підтримує оглядач <input type="date">, ми створюєм {{htmlelement("input")}} елемент, із type date, потім одразу перевіряємо який тип було встановлено — непідтримуючі оглядачі автоматично повернуть тип text, тому що date тип автоматично перетворюється на text. Якщо <input type="date"> не підтримується, ми приховуємо рідний інпут і показуєм UI ({{htmlelement("select")}}) замість нього.

+ +
// define variables
+var nativePicker = document.querySelector('.nativeDatePicker');
+var fallbackPicker = document.querySelector('.fallbackDatePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new date input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'date';
+
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+}
+
+function populateDays(month) {
+  // delete the current set of <option> elements out of the
+  // day <select>, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    var isLeap = new Date(year, 1, 29).getMonth() == 1;
+    isLeap ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new <option> elements into the day <select>
+  for(i = 1; i <= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year <select>
+  for(var i = 0; i <= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year <select> values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}
+ +
+

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}{{Spec2('HTML5 W3C')}}
+ +

Сумісність з оглядачами

+ + + +

{{Compat("html.elements.input.input-date")}}

+ +

Дивіться також

+ + diff --git a/files/uk/web/html/element/input/datetime-local/index.html b/files/uk/web/html/element/input/datetime-local/index.html new file mode 100644 index 0000000000..b8e88ea62e --- /dev/null +++ b/files/uk/web/html/element/input/datetime-local/index.html @@ -0,0 +1,543 @@ +--- +title: +slug: Web/HTML/Element/input/datetime-local +translation_of: Web/HTML/Element/input/datetime-local +--- +
{{HTMLRef}}
+ +

{{htmlelement("input")}} типу datetime-local створює елемент керування, який дозволяє користувачу легко вводити і дату, і час, включаючи рік, місяць, день і час у годинах і хвилинах. Застосовується часовий пояс користувача. Вигляд елемента змінюється в загальному залежно від браузера; на даний час його підтримка є непостійною, для настільних пристроїв тільки Chrome/Opera й Edge, а для мобільних тільки найновіші браузери мають дієві його розробки. В інших браузерах вони занепали до простих елементів типу <input type="text">.

+ +

Про підтримку секунд нема й мови.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-standard")}}
+ + + +
+

Примітка: Через обмежену підтримку браузерами формату datetime-local, і відмінності в роботі елементів введення "input", на даний час, можливо, краще було би вживати якийсь фреймворк чи бібліотеку для їх відображення або використовувати ваш власний елемент введення. Іншим підходом може бути вживання окремих елементів date і time, кожен з яких підтримується ширше, ніж datetime-local.

+
+ +

Також деякі браузери для введення часу можуть вдаватися тільки до елемента текстового типу, що перевіряє, чи введені символи становлять правильні значення дати/часу перед відправленням їх на сервер, але небажано покладатися на цей підхід, оскільки його поведінку важко передбачити.

+ +

Для тих із вас, хто не користується браузером із підтримкою datetime-local, елементи керування у Chrome/Opera виглядатимуть як на наступному знімку. Клацнувши справа значок стрілочки вниз, ви отримаєте вибирач дати, а час маєте ввести вручну.

+ +

+ +

The Edge datetime-local control looks like the below; clicking the date and the time parts of the value bring up two separate pickers for you, so you can easily set both the date and the time. This is somewhat like having date and time widgets both created for you and merged into one.

+ +

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value")}}A {{domxref("DOMString")}} representing a date and time (in the local time zone), or empty.
Events{{event("change")}} and {{event("input")}}.
Supported Common Attributes{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}.
IDL attributeslist, value, valueAsNumber.
Methods{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+ +

Value

+ +

A {{domxref("DOMString")}} representing the value of the date entered into the input. You can set a default value for the input by including a date and time inside the {{htmlattrxref("value", "input")}} attribute, like so:

+ +
<label for="party">Enter a date and time for your party booking:</label>
+<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">
+ +

{{ EmbedLiveSample('Value', 600, 60) }}

+ +

One thing to note is that the displayed date and time formats differ from the actual value; the displayed date and time are formatted according to the user's locale as reported by their operating system, whereas the date/time value is always formatted yyyy-MM-ddThh:mm. When the above value submitted to the server, for example, it will look like "partydate=2017-06-01T08:30".

+ +
+

Note: Also bear in mind that if such data is submitted via HTTP GET, the colon character will need to be escaped for inclusion in the URL parameters, e.g. partydate=2017-06-01T08%3A30. See {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} for one way to do this.

+
+ +

You can also get and set the date value in JavaScript using the {{domxref("HTMLInputElement.value")}} property, for example:

+ +
var dateControl = document.querySelector('input[type="datetime-local"]');
+dateControl.value = '2017-06-01T08:30';
+ +

There are several methods provided by JavaScript's {{jsxref("Date")}} that can be used to convert numeric date information into a properly-formatted string, or you can do it manually. For example, the {{jsxref("Date.toISOString()")}} method can be used for this purpose.

+ +

Using datetime-local inputs

+ +

Date/time inputs sound convenient at first glance; they provide an easy UI for choosing dates and times, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <input type="datetime-local"> because of the limited browser support.

+ +

We'll look at basic and more complex uses of <input type="datetime-local">, then offer advice on mitigating the browser support issue later on (see {{anch("Handling browser support")}}).

+ +

Basic uses of datetime-local

+ +

The simplest use of <input type="datetime-local"> involves a basic <input> and {{htmlelement("label")}} element combination, as seen below:

+ +
<form>
+    <label for="party">Enter a date and time for your party booking:</label>
+    <input id="party" type="datetime-local" name="partydate">
+</form>
+ +

{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }}

+ +

Setting maximum and minimum dates and times

+ +

You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to restrict the dates/times that can be chosen by the user. In the following example we are setting a minimum datetime of 2017-06-01T08:30 and a maximum datetime of 2017-06-30T16:30:

+ +
  <form>
+    <label for="party">Enter a date and time for your party booking:</label>
+    <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30">
+  </form>
+ +

{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }}

+ +

The result here is that:

+ + + +
+

Note: You should be able to use the {{htmlattrxref("step", "input")}} attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make Saturdays selectable). However, this does not seem to work effectively in any implementation at the time of writing.

+
+ +

Controlling input size

+ +

<input type="datetime-local"> doesn't support form control sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to CSS for customizing the sizes of these elements.

+ +

Setting timezones

+ +

One thing the datetime-local input type doesn't provide is a way to set the time zone and/or locale of the date/time control. This was available in the datetime input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.

+ +

For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a hidden input type. For example:

+ +
<input type="hidden" id="timezone" name="timezone" value="-08:00">
+ +

On the other hand, if you were required to allow the user to enter a timezone along with a date/time input, you could provide a means of inputting a timezone, such as a {{htmlelement("select")}} element:

+ +
<select name="timezone_offset" id="timezone-offset" class="span5">
+    <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
+    <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
+    <option value="-10:00">(GMT -10:00) Hawaii</option>
+    <option value="-09:50">(GMT -9:30) Taiohae</option>
+    <option value="-09:00">(GMT -9:00) Alaska</option>
+    <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
+
+  ...
+
+</select>
+ +

In either case, the date/time and time zone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.

+ +
+

Note: The above code snippet is taken from All world timezones in an HTML select element.

+
+ +

Validation

+ +

By default, <input type="datetime-local"> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date/time — which is helpful — but a user might still fill in no value and submit, or enter an invalid date and/or time (e.g. the 32nd of April).

+ +

You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and you can use the {{htmlattrxref("required", "input")}} attribute to make filling in the date/time mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

+ +

Let's look at an example; here we've set minimum and maximum date/time values, and also made the field required:

+ +
<form>
+    <div>
+        <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label>
+        <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required>
+        <span class="validity"></span>
+    </div>
+    <div>
+        <input type="submit" value="Book party!">
+    </div>
+</form>
+ +

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

+ +

{{ EmbedLiveSample('Validation', 600, 120) }}

+ +

Here's a screenshot for those of you who aren't using a supporting browser:

+ +

+ +

Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

+ +
div {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+label {
+  display: inline-block;
+  width: 300px;
+}
+
+input:invalid+span:after {
+    content: '✖';
+    padding-left: 5px;
+}
+
+input:valid+span:after {
+    content: '✓';
+    padding-left: 5px;
+}
+ +
+

Important: HTML form validation is not a substitute for scripts that ensure that the entered data is in the proper format.  It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

+
+ +

Handling browser support

+ +

As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the datetime-local picker on Firefox for Android looks like this:

+ +

+ +

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

+ +

The second problem is the most serious; as we mentioned earlier, with a datetime-local input, the actual value is always normalized to the format yyyy-mm-ddThh:mm. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example:

+ + + +

One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your datetime-local input. Even though the datetime-local input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

+ +
<form>
+  <div>
+    <label for="party">Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):</label>
+    <input id="party" type="datetime-local" name="partydate"
+           min="2017-06-01T08:30" max="2017-06-30T16:30"
+           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Book party!">
+  </div>
+  <input type="hidden" id="timezone" name="timezone" value="-08:00">
+</form>
+ +

{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}

+ +

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn-nnTnn:nn, where n is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.

+ +

And what user is going to understand the pattern they need to enter the time and date in?

+ +

We still have a problem.

+ + + +

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

+ +

Examples

+ +

In this example we create two sets of UI elements for choosing datetimes — a native <input type="datetime-local"> picker, and a set of five {{htmlelement("select")}} elements for choosing dates and times in older browsers that don't support the native input.

+ +

{{ EmbedLiveSample('Examples', 600, 140) }}

+ +

The HTML looks like so:

+ +
<form>
+  <div class="nativeDateTimePicker">
+    <label for="party">Choose a date and time for your party:</label>
+    <input type="datetime-local" id="party" name="bday">
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">Choose a date and time for your party:</p>
+  <div class="fallbackDateTimePicker">
+    <div>
+      <span>
+        <label for="day">Day:</label>
+        <select id="day" name="day">
+        </select>
+      </span>
+      <span>
+        <label for="month">Month:</label>
+        <select id="month" name="month">
+          <option selected>January</option>
+          <option>February</option>
+          <option>March</option>
+          <option>April</option>
+          <option>May</option>
+          <option>June</option>
+          <option>July</option>
+          <option>August</option>
+          <option>September</option>
+          <option>October</option>
+          <option>November</option>
+          <option>December</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Year:</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+    <div>
+      <span>
+        <label for="hour">Hour:</label>
+        <select id="hour" name="hour">
+        </select>
+      </span>
+      <span>
+        <label for="minute">Minute:</label>
+        <select id="minute" name="minute">
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+ +

The months are hard-coded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and minutes, as there are so many of them!

+ + + +

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="datetime-local">, we create a new {{htmlelement("input")}} element, set its type to datetime-local, then immediately check what its type is set to. Browsers that don't support datetime-local return text, since that's what datetime-local falls back to. If <input type="datetime-local"> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.

+ +
// define variables
+var nativePicker = document.querySelector('.nativeDateTimePicker');
+var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
+var fallbackLabel = document.querySelector('.fallbackLabel');
+
+var yearSelect = document.querySelector('#year');
+var monthSelect = document.querySelector('#month');
+var daySelect = document.querySelector('#day');
+var hourSelect = document.querySelector('#hour');
+var minuteSelect = document.querySelector('#minute');
+
+// hide fallback initially
+fallbackPicker.style.display = 'none';
+fallbackLabel.style.display = 'none';
+
+// test whether a new datetime-local input falls back to a text input or not
+var test = document.createElement('input');
+test.type = 'datetime-local';
+// if it does, run the code inside the if() {} block
+if(test.type === 'text') {
+  // hide the native picker and show the fallback
+  nativePicker.style.display = 'none';
+  fallbackPicker.style.display = 'block';
+  fallbackLabel.style.display = 'block';
+
+  // populate the days and years dynamically
+  // (the months are always the same, therefore hardcoded)
+  populateDays(monthSelect.value);
+  populateYears();
+  populateHours();
+  populateMinutes();
+}
+
+function populateDays(month) {
+  // delete the current set of <option> elements out of the
+  // day <select>, ready for the next set to be injected
+  while(daySelect.firstChild){
+    daySelect.removeChild(daySelect.firstChild);
+  }
+
+  // Create variable to hold new number of days to inject
+  var dayNum;
+
+  // 31 or 30 days?
+  if(month === 'January' | month === 'March' | month === 'May' | month === 'July' | month === 'August' | month === 'October' | month === 'December') {
+    dayNum = 31;
+  } else if(month === 'April' | month === 'June' | month === 'September' | month === 'November') {
+    dayNum = 30;
+  } else {
+  // If month is February, calculate whether it is a leap year or not
+    var year = yearSelect.value;
+    (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28;
+  }
+
+  // inject the right number of new <option> elements into the day <select>
+  for(i = 1; i <= dayNum; i++) {
+    var option = document.createElement('option');
+    option.textContent = i;
+    daySelect.appendChild(option);
+  }
+
+  // if previous day has already been set, set daySelect's value
+  // to that day, to avoid the day jumping back to 1 when you
+  // change the year
+  if(previousDay) {
+    daySelect.value = previousDay;
+
+    // If the previous day was set to a high number, say 31, and then
+    // you chose a month with less total days in it (e.g. February),
+    // this part of the code ensures that the highest day available
+    // is selected, rather than showing a blank daySelect
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 1;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 2;
+    }
+
+    if(daySelect.value === "") {
+      daySelect.value = previousDay - 3;
+    }
+  }
+}
+
+function populateYears() {
+  // get this year as a number
+  var date = new Date();
+  var year = date.getFullYear();
+
+  // Make this year, and the 100 years before it available in the year <select>
+  for(var i = 0; i <= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+function populateHours() {
+  // populate the hours <select> with the 24 hours of the day
+  for(var i = 0; i <= 23; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i < 10) ? ("0" + i) : i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // populate the minutes <select> with the 60 hours of each minute
+  for(var i = 0; i <= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i < 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// when the month or year <select> values are changed, rerun populateDays()
+// in case the change affected the number of available days
+yearSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+monthSelect.onchange = function() {
+  populateDays(monthSelect.value);
+}
+
+//preserve day selection
+var previousDay;
+
+// update what day has been set to previously
+// see end of populateDays() for usage
+daySelect.onchange = function() {
+  previousDay = daySelect.value;
+}
+ +
+

Note: Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}{{Spec2('HTML5 W3C')}} 
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.input.input-datetime-local")}}

+ +

See also

+ + diff --git a/files/uk/web/html/element/input/index.html b/files/uk/web/html/element/input/index.html new file mode 100644 index 0000000000..3c0f2289b3 --- /dev/null +++ b/files/uk/web/html/element/input/index.html @@ -0,0 +1,753 @@ +--- +title: ': The Input (Form Input) element' +slug: Web/HTML/Element/input +tags: + - Data entry + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - Input + - MakeBrowserAgnostic + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Element/input +--- +
{{HTMLRef}}
+ +

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and {{Glossary("user agent")}}.

+ +
{{EmbedInteractiveExample("pages/tabbed/input-input.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, listed, submittable, resettable, form-associated element, phrasing content. If the {{htmlattrxref("type", "input")}} is not hidden, then labelable element, palpable content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parentsAny element that accepts phrasing content.
Permitted ARIA roles +
    +
  • type=button: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}
    • +
  • type=checkbox: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}
    • +
  • type=image: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}
    • +
  • type=radio: {{ARIARole("menuitemradio")}}
    • +
  • type=color|date|datetime|datetime-local|email|file: None
    • +
  • type=hidden|month|number|password|range|reset: None
    • +
  • type=search|submit|tel|text|url|week: None
    • +
+
DOM interface{{domxref("HTMLInputElement")}}
+ +

Form <input> types

+ +

How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted is text.

+ +

The available types are as follows:

+ + + +

Some input types are now obsolete:

+ + + +

Attributes

+ +

Global <input> attributes

+ +

This section lists the attributes available to all form <input> types. Non-global attributes — and global attributes that behave differently when specified on different <input> types — are listed on those types' individual pages.

+ +
+

Note: This includes the global HTML attributes.

+
+ +
+
{{htmlattrdef("type")}}
+
The type of control to render. See {{anch("Form <input> types")}} for the individual types, with links to more information about each.
+
{{htmlattrdef("accept")}}
+
If the value of the type attribute is file, this attribute indicates the types of files that the server accepts — otherwise it's ignored. The value must be comma-separated unique “content type specifiers”: +
    +
  • A case-insensitive file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
    • +
  • A valid MIME type with no extensions.
    • +
  • audio/* representing sound files. {{HTMLVersionInline("5")}}
    • +
  • video/* representing video files. {{HTMLVersionInline("5")}}
    • +
  • image/* representing image files. {{HTMLVersionInline("5")}}
    • +
+
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}
+
Sets a keyboard key that the user can press to focus the control. This attribute is global in HTML5 — see the accesskey page for more info.
+
{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}
+
This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered. {{page("/en-US/docs/Web/HTML/Attributes/autocomplete", "Values")}}
+
See The HTML autocomplete attribute for additional information.
+
{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}
+
This Boolean attribute specifies that the input should have focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one element in a document can have the autofocus attribute. It cannot be applied if the type attribute is hidden, because hidden inputs cannot be focused. Note that the input may be focused before the DOMContentLoaded event fires. +
Warning: Automatically focusing a form control can confuse visually-impaired people who using screen-reading technology. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.
+
+
{{htmlattrdef("capture")}}
+
+

If the value of the type attribute is file, this Boolean attribute indicates that capture of media directly from the device's sensors using a media capture mechanism is preferred, such as a webcam or microphone.

+
+
{{htmlattrdef("checked")}}
+
+

If the value of the type attribute is radio or checkbox, this Boolean attribute pre-checks the control before the user interacts with it.

+ +

Unlike other browsers, Firefox by default persists the dynamic checked state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

+
+
{{htmlattrdef("disabled")}}
+
+

This Boolean attribute prevents the user from interacting with the input. In particular, the click event is not dispatched on disabled controls, and disabled controls aren't submitted with their form.

+ +

Unlike other browsers, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

+
+
{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}
+
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute isn't used, the <input> element is associated with its nearest ancestor {{HTMLElement("form")}} element, if any. This attribute lets you to place <input> elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form.
+
{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}
+
The URL that processes the data submitted by the input element, if it is a submit button or image. This attribute overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.
+
{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}
+
If the input element is a submit button or image, this attribute specifies the content encoding that is used to submit the form data to the server. Possible values: +
    +
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • +
  • multipart/form-data: Use this value if you are using an <input> element with the {{htmlattrxref("type","input")}} attribute set to file.
    • +
  • text/plain: This encoding is mostly for debugging.
    • +
+ +

This attribute overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}
+
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values: +
    +
  • post: The data from the form is included in the body of the form and is sent to the server.
    • +
  • get: The data from the form are appended to the form attribute URL, with a '?' as a separator, and the resulting URL is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • +
+ +

This attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

+
+
{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}
+
If the input element is a submit button or image, this Boolean attribute specifies that the form shouldn't be validated before submission. This attribute overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.
+
{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}
+
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received by submitting the form. This is a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame). This attribute overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: +
    +
  • _self: Load the response into the same browsing context as the current one. This is the default if the attribute is not specified.
    • +
  • _blank: Load the response into a new unnamed browsing context.
    • +
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • +
  • _top: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • +
+
+
{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}
+
If the value of the type attribute is image, defines the height of the image displayed for the button in pixels.
+
{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}
+
A hint to browsers for which virtual keyboard to display. This attribute applies when the the type attribute is text, password, email, or url. Possible values: +
    +
  • none: No virtual keyboard should be displayed.
    • +
  • text: Text input in the user's locale.
    • +
  • decimal: Fractional numeric input.
    • +
  • numeric: Numeric input.
    • +
  • tel: Telephone input, including asterisk and pound key. Prefer <input type="tel">.
    • +
  • search: A virtual keyboard optimized for search input.
    • +
  • email: Email input. Prefer <input type="email">.
    • +
  • url: URL input. Prefer <input type="url">.
    • +
+ +
+
Spec conflict: The WHATWG spec lists inputmode, and modern browsers are working towards supporting it. The W3C HTML 5.2 spec however no longer lists it (i.e. marks it as obsolete). You should consider the WHATWG definition as correct, until a consensus is reached.
+
+
+
{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}
+
Points to a {{HTMLElement("datalist")}} of predefined options to suggest to the user. The value must be the id of a <datalist> element in the same document. Browsers display only valid options for the input. This attribute is ignored when the type attribute is hidden, checkbox, radio, file, or a button type.
+
{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}
+
The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value.
+
{{htmlattrdef("maxlength")}}
+
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored.
+
{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}
+
The minimum (numeric or date-time) value for this input, which must not be greater than its maximum (max attribute) value.
+
{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}
+
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored.
+
{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}
+
This Boolean attribute indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file.
+
{{htmlattrdef("name")}}
+
The name of the control, which is submitted with the control's value as part of the form data. If no name is specified or it is empty, the control's value is not submitted with the form.
+
{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}
+
A regular expression that the control's value is checked against. The pattern must match the entire value. Use the title attribute to describe the pattern to help the user. This attribute only applies when the value of the type attribute is text, search, tel, url, email, or password. The regular expression language is the same as the JavaScript {{jsxref("RegExp")}} algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
+
{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}
+
A hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text must not contain carriage returns or line-feeds. +
Note: Before using placeholder, please see the section {{anch("Labels and placeholders")}} to ensure that you use them correctly if at all. Placeholders can be confusing and can disrupt certain operations in unexpected ways.
+
+
{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}
+
This Boolean attribute prevents the user from modifying the value of the input. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
+
{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}
+
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
+
{{htmlattrdef("size")}}
+
The initial size of the control. Starting in HTML5, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. The size must be an integer greater than zero. The default value is 20.
+
HTML5 states "the user agent should ensure that at least that many characters are visible", but different characters have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined as x.
+
{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}
+
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
+
{{htmlattrdef("src")}}
+
If the value of the type attribute is image, this attribute specifies the URL of the image file to display on the graphical submit button.
+
{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}
+
Works with the min and max attributes 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 attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
+
{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}
+
The position of the element in the tabbing navigation order for the current document.
+
{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}
+
The name of a {{HTMLElement("map")}} element to be used as an image map.
+
{{htmlattrdef("value")}}
+
The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.
+
When reloading the page, Firefox and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
+
{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}
+
If the value of the type attribute is image, this attribute defines the width of the image displayed for the button in pixels.
+
+ +

Non-standard <input> attributes

+ +
+
{{htmlattrdef("autocorrect")}} {{non-standard_inline}}
+
This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <input>. Possible attribute values are: +
    +
  • on: Enable autocorrection.
    • +
  • off: Disable autocorrection.
    • +
+ autocorrect documentation in the Safari HTML Reference.
+
{{htmlattrdef("incremental")}} {{non-standard_inline}}
+
This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the type is search. If the attribute is present, regardless of what its value is, the <input> fires search events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the search event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). incremental documentation in the Safari HTML Reference
+
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send. These automatically get mapped to the appropriate string and are case-insensitive.
+
{{htmlattrdef("results")}} {{non-standard_inline}}
+
This is a nonstandard attribute supported by Safari that only applies when the type is search. It is used to control the maximum number of entries that should be displayed in the <input>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.
+
{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
+
This Boolean attribute indicates if the selector used when the type attribute is file has to allow for the selection of directories only.
+
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
+
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
+
+ +

Styling input elements

+ +

You can style <input> elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:

+ +

HTML

+ +
<label for="textInput">Note the red caret:</label>
+<input id="textInput" class="custom" size="32"/>
+
+ +

CSS

+ +
input.custom {
+  caret-color: red;
+  font: 16px "Helvetica", "Arial", "sans-serif"
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Styling_input_elements', 500, 80)}}

+ +

For more information about adding color to elements in HTML, see Applying color to HTML elements using CSS.

+ +

Labels and placeholders

+ +
+

TL;DR: To save you time, here's the key point: don't use the {{htmlattrxref("placeholder", "input")}} attribute if you can avoid it. If you need to label an <input> element, use the {{HTMLElement("label")}} element.

+
+ +

There are three seemingly similar ways to associate assistive text with an <input>. However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.

+ +

The <label> element

+ +

The {{HTMLElement("label")}} element is the only way to provide explanatory information about a form field that is always appropriate (aside from any layout concerns you have). It's never a bad idea to use a <label> to explain what should be entered into an <input> or {{HTMLElement("textarea")}}.

+ +

The placeholder attribute

+ +

The {{htmlattrxref("placeholder", "input")}} attribute lets you specify a prompt that appears within the <input> element's content area itself when empty. It's intended to be used to show an example input, rather than an explanation or prompt, but tends to be badly misused.

+ +

Here are two inputs that take a password, each with a placeholder:

+ +

Example of correct and incorrect placeholder usage

+ +

The first one uses a placeholder string "MyGr8P@sswrd", demonstrating what a password might look like. And no, that's not really a great password.

+ +

The second one uses a prompt string, "Enter your password" as a placeholder. The first, and most obvious, problem with doing this is that as soon as the user types their first character, they no longer have a prompt explaining what that field is for.

+ +

That's why, instead, you should use the {{HTMLElement("label")}} element. The placeholder should never be required in order to understand your forms. While some people are able to remember what a given empty box is meant for after its only identifying text vanishes, others cannot.

+ +

If the user can't understand your form if the placeholders are missing (say, in a browser that doesn't support placeholder, or in the case above where the user starts typing then gets confused), you're not using placeholders properly.

+ +

In addition, browsers with automatic page translation features may skip over attributes when translating. That means the placeholder may not get translated, resulting in important information not being translated.

+ +

If you feel like you need to use a placeholder, it's possible to use both a placeholder and a label:

+ +

+ + + +

Unadorned text adjacent to the <input> element

+ +

You can also just have plain text adjacent to the <input> element, like this:

+ +
<p>Enter your name: <input id="name" type="text" size="30"></p>
+ +

Please don't do this. This doesn't create a relationship between the prompt and the <input> element, which is important for reasons we'll get into in the next section.

+ +

Why you should use labels

+ +

In addition to the information provided above, there are a number of other reasons why <label> is the best way to explain <input>s:

+ + + +

Examples

+ +

You can find multiple examples of <input> element usage on the pages covering each individual type — see {{anch("Form <input> types")}}, and also see the {{anch("Live example")}} at the top of the article.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}{{Spec2('HTML Media Capture')}}Adds the capture element
{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}{{Spec2('HTML4.01')}} 
+ +

Browser compatibility

+ + + +

{{Compat("html.elements.input")}}

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}{{CompatVersionUnknown}}1.01.0
type="time"20{{CompatVersionUnknown}}{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatNo}}[1]
accept{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}10{{CompatUnknown}}{{CompatNo}}
mozactionhint{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
autocapitalize43{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} [3]
autofocus, max, min, pattern, placeholder, required, step, list, multiple5.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}109.65.0
captureChrome for Android (0.16){{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
fakepath added to file input values{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
form10{{CompatVersionUnknown}}4{{CompatNo}}[7]9.55.0
formaction, formenctype, formmethod, formnovalidate, formtarget9.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}1010.625.1
incremental{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
inputmode{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
minlength40.0{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
readonly1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}6[2] 1.01.0
spellcheck10.0{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}1011.04.0
webkitdirectory{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("49.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
type="time"{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(57)}}{{CompatNo}}10.62{{CompatVersionUnknown}}[1]
accept{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocapitalize{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]
autofocus, max, min, pattern, placeholder, required, step, list, multiple{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[5]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
capture3.0{{CompatNo}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}6.0
fakepath added to file input values{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile("53")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
form, formaction, formenctype, formmethod, formnovalidate, formtarget{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
minlength{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}27.0{{CompatUnknown}}
spellcheck{{CompatUnknown}}{{CompatNo}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}11.0{{CompatUnknown}}
webkitdirectory{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("49.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] It is recognized but there is no UI.

+ +

[2] Missing for type="checkbox" and type="radio".

+ +

[3] In Safari autocapitalize="words" capitalizes every word's second character.

+ +

[4] datetime has been removed from the spec and browsers in favour of datetime-local.

+ +

[5] see {{bug(1355389)}}

+ +

[6] Not yet implemented. For progress, see {{bug("888320")}} and TPE DOM/Date time input types.

+ +

Notes

+ +

File inputs

+ +
    +
  1. +

    Starting in {{Gecko("2.0")}}, calling the click() method on an <input> element of type file opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

    +
    2. +
  2. +

    You cannot set the value of a file picker from a script — doing something like the following has no effect:

    + + 
    var e = getElementById("someFileInputElement");
+e.value = "foo";
+
    +
    3. +
  3. +

    When a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is defined in the spec.

    +
    4. +
+ +

Error messages

+ +

If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:

+ +
<input type="email"
+ x-moz-errormessage="Please specify a valid email address.">
+
+ +

Note, however, that this is not standard and will not have an effect on other browsers.

+ +

Localization

+ +

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

+ +

Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):

+ + + +

Using mozactionhint on Firefox mobile

+ +

You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:

+ +
<input type="text" mozactionhint="next">
+
+ +

The result is:

+ +

+ +

Note the "Next" key in the lower-right corner of the keyboard.

+ +

See also

+ + diff --git a/files/uk/web/html/index.html b/files/uk/web/html/index.html new file mode 100644 index 0000000000..3f865c915a --- /dev/null +++ b/files/uk/web/html/index.html @@ -0,0 +1,91 @@ +--- +title: HTML +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - WWW + - Гіпертекст + - Довідка +translation_of: Web/HTML +--- +
{{HTMLSidebar()}}
+ +

Мова гіпертекстової розмітки (HyperText Markup Language — HTML) використовується для створення і візуального відображення веб-сторінок.

+ +

Основу кожної веб-сторінки в мережі Інтернет становить HTML. Під терміном «гіпертекст» мається на увазі текст, сформований за допомогою мови розмітки і який містить гіперпосилання, якими зв'язані веб-сторінки одна з одною, роблячи Всесвітню павутину тим, чим вона є сьогодні. Створюючи і публікуючи веб-сторінки в мережі Інтернет, ви стаєте активними учасниками Всесвітньої павутини. HTML підтримує як візуальні зображення, так і інший медіаконтент. HTML є мовою, що описує структуру і семантику вмісту веб-документу. Контент веб-сторінки розмічений за допомогою тегів, що представляють HTML-елементи. Прикладами таких елементів є {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("picture")}}, і т.д. Ці елементи формують будівельні блоки для будь-якого веб-сайта.

+ +

Статті, представлені тут, містять довідкові матеріали з веб-розробки.

+ +
+ + +
+

Бажаєте стати веб-розробником фронтенду?

+ +

Ми уклали повний курс, що включає в себе всю необхідну інформацію задля досягнення вашої мети.

+ +

Розпочати

+
+ +

Довідники

+ +
+
Блокові елементи
+
В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають блокові або рядкові. Блокові елементи займають всю ширину батьківського елемента (контейнера), таким чином утворюючи блок. У цій статті пояснюється, як це працює. 
+
CORS: включені зображення
+
Специфікації HTML вводять атрибут crossorigin, що разом з відповідним заголовком CORS дозволяють використовувати зображення через елемент <img> і завантаженому з інших джерел зображенням бути використаним в canvas так, як наче вони завантажуються з поточного джерела.
+
CORS: налаштування атрибутів
+
В HTML5, деякі HTML-елементи, що підтримують CORS, такі як <img> або <video>, мають crossorigin атрибут (crossOrigin властивості), який дозволяє налаштувати запити CORS для отриманих даних елемента.
+
Контроль правопису в формах HTML
+
Firefox 2 вводить підтримку перевірки правопису в текстових полях та полях веб-форм. Користувач може вказати використання інтерфейсу about:config незалежно від того, чи ввімкнено перевірку правопису, і чи потрібно перевіряти обидва текстові поля, чи лише текстові області.
+
DASH Адаптивний потік для HTML 5 відео
+
Dynamic Adaptive Streaming over HTTP (DASH) - це адаптивний потоковий (трансляційний) протокол. Це означає, що він дозволяє потоку відеозв'язку (трансляції) переключатися між швидкістю передачі даних (бітрейтом) на основі пропускної здатності мережі, щоб продовжувати відтворення відео.
+
Управління фокусом в HTML
+
В робочому проекті HTML5 activeElement DOM атрибут та hasFocus() DOM метод дають програмісту можливість кращого контролю інтерактивності сторінки в результаті дій користувача. Наприклад, обидва вони можуть бути використані для складання статистики, відстеження кількості кліків на певних посиланнях сторінки, вимірювання часу, протягом якого активний елемент тощо. Крім того, у поєднанні з технологією AJAX, вони допомагають мінімізувати кількість запитів на сервер в залежності від активності користувача та розмітки сторінки.
+
Глобальні атрибути
+
Глобальні атрибути можуть бути вказані на всіх елементах HTML, навіть тих, які не вказані в стандарті . Це означає, що будь-які нестандартні елементи, як і раніше, повинні дозволити ці атрибути, навіть якщо використання цих елементів означає, що документ більше не відповідає стандарту HTML5. Наприклад, HTML5-сумісні браузери приховують вміст, позначений як <foo hidden>...<foo>, хоча <foo> не є дійсним елементом HTML.
+
Довідка по HTML атрибутам
+
Елементи в HTML мають атрибути; це додаткові значення, які налаштовують елементи або регулюють їх поведінку різними способами для задоволення критеріїв, які хочуть користувачі.
+
Довідка по HTML елементам
+
Ця сторінка містить усі HTML елементи.
+
Довідка по HTML
+
HTML - це мова, яка описує структуру та семантичний вміст веб-документа; він складається з елементів, кожен з яких може бути змінений деякою кількістю атрибутів.
+
Рядкові елементи
+
В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають блокові або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.
+
Типи посилань
+
У HTML наступні типи посилань вказують на зв'язок між двома документами, в яких одне посилання на інше використовується за допомогою елемента <a>, <area>, або <link>.
+
Медіа формати, що підтримуються аудіо та відео елементами HTML
+
Елементи <audio> та <video> надають підтримку для відтворення аудіо та відео матеріалів, не вимагаючи плагінів.
+
Мікроформати
+
Мікроформати (іноді використовується абревіатура μF) - це невеликі шаблони HTML для позначення таких об'єктів, як люди, організації, події, місця розташування, публікації в блозі, продукти, огляди, резюме, рецепти тощо.
+ Вони є простими для вставки семантики в HTML і швидко надають API, який буде використовуватися пошуковими системами, агрегаторами та іншими інструментами.
+
Оптимізація ваших сторінок для спекулятивного парсингу (аналізу)
+
Традиційно в браузерах HTML-парсер (аналізатор) працює на головній гілці і блокується після тега </script> доки сценарій не буде завантажено з мережі і не виконано. HTML парсер в Firefox 4 і новіших підтримує спекулятивний синтаксичний аналіз поза головної гілки. Він продовжує парсити, доки скрипти завантажуються і виконуються. Як і в Firefox 3.5 та 3.6, HTML парсер починає спекулятивні завантаження скриптів, стилів і зображень, коли він знаходить їх у початку потоку. Проте в Firefox 4 і новіше HTML-парсер також спекулятивно виконує алгоритм побудови дерева HTML . Та коли спекуляція (відстежування) вдається, немає необхідності переробляти частину вхідного файлу, який вже був сканований на скрипти, стилі та зображення. Недоліком є те, що більше роботи втрачається, коли спекуляція (відстежування) зазнала невдачі.
+
Використання кешу додатків
+
HTML5 забезпечує механізм кешування додатків, який дозволяє веб-додаткам працювати в автономному режимі. Розробники можуть використовувати інтерфейс Application Cache (AppCache) щоб вказати ресурси, які браузер повинен кешувати та зробити доступними для офлайн-користувачів. Додатки, які кешують завантаження, працюють коректно, навіть якщо користувачі клікають кнопку оновлення, коли вони знаходяться офлайн.
+
+ +

Переглянути все...

+ +
+

Інструкції та посібники

+ +
+
Інструкція з HTML для розробників
+
Статті MDN, що демонструють конкретні методи, які ви можете використовувати при створенні веб-контенту за допомогою HTML, а також навчальні посібники та інші матеріали, які можуть бути вам корисними. Довідник може містити редакційні уроки, поради та інформацію щодо розробки HTML.
+
+
+
diff --git a/files/uk/web/html/inline_elements/index.html b/files/uk/web/html/inline_elements/index.html new file mode 100644 index 0000000000..908a9b6263 --- /dev/null +++ b/files/uk/web/html/inline_elements/index.html @@ -0,0 +1,79 @@ +--- +title: Рядкові елементи +slug: Web/HTML/Inline_elements +tags: + - HTML +translation_of: Web/HTML/Inline_elements +--- +

Вступ

+ +

В HTML (мові гіпертекстової розмітки — Hypertext Markup Language) елементи бувають блокові або рядкові. Рядковий елемент займає стільки місця в рядку, скільки вимагає розмір самого елемента, і його вплив обмежується тегами, які цей елемент визначають. Приклади у цій статті пояснюють, як працюють рядкові елементи.

+ +

Приклад рядкового елемента

+ +

HTML

+ +
<p>Цей <span>span</span> є рядковим елементом; колір його бекграунда змінений, щоб показати початок і кінець елемента.</p>
+ +

CSS

+ +
span { background-color: #8ABB55; }
+
+ +

{{ EmbedLiveSample('Inline_example') }}

+ +

Рядкові vs. блокові

+ +
+
Модель контенту
+
Зазвичай рядкові елементи можуть містити лише дані та інші рядкові елементи.
+
Форматування
+
За замовчуванням, рядкові елементи не починаються з нового рядка.
+
+ +

Елементи

+ +

Ці елементи є рядковими:

+ +
+
+
{{ HTMLElement("a") }}
+
{{ HTMLElement("b") }}
+
{{ HTMLElement("big") }}
+
{{ HTMLElement("i") }}
+
{{ HTMLElement("small") }}
+
{{ HTMLElement("tt") }}
+
{{ HTMLElement("abbr") }}
+
{{ HTMLElement("acronym") }}
+
{{ HTMLElement("cite") }}
+
{{ HTMLElement("code") }}
+
{{ HTMLElement("dfn") }}
+
{{ HTMLElement("em") }}
+
{{ HTMLElement("kbd") }}
+
{{ HTMLElement("strong") }}
+
{{ HTMLElement("samp") }}
+
{{ HTMLElement("time") }}
+
{{ HTMLElement("var") }}
+
{{ HTMLElement("bdo") }}
+
{{ HTMLElement("br") }}
+
{{ HTMLElement("img") }}
+
{{ HTMLElement("map") }}
+
{{ HTMLElement("object") }}
+
{{ HTMLElement("q") }}
+
{{ HTMLElement("script") }}
+
{{ HTMLElement("span") }}
+
{{ HTMLElement("sub") }}
+
{{ HTMLElement("sup") }}
+
{{ HTMLElement("button") }}
+
{{ HTMLElement("input") }}
+
{{ HTMLElement("label") }}
+
{{ HTMLElement("select") }}
+
{{ HTMLElement("textarea") }}
+
+
+ +

Також дивися

+ + diff --git "a/files/uk/web/html/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" "b/files/uk/web/html/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" new file mode 100644 index 0000000000..2e4425a878 --- /dev/null +++ "b/files/uk/web/html/\320\264\320\276\320\262\321\226\320\264\320\275\320\270\320\272/index.html" @@ -0,0 +1,27 @@ +--- +title: HTML довідник +slug: Web/HTML/Довідник +tags: + - HTML + - Landing + - WWW + - Довідка +translation_of: Web/HTML/Reference +--- +
{{HTMLSidebar}}
+ +

Цей HTML-довідник описує всі елементи і атрибути HTML, включаючи глобальні атрибути, які застосовуються до всіх елементів.

+ +
+
+
Довідник HTML елементів
+
This page lists all the HTML elements.
+
Довідник HTML атрибутів
+
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
+
Глобальні атрибути
+
Global attributes may be specified on all HTML elements, even those not specified in the standard. That means that any non-standard elements must still permit these attributes, even though using those elements means that the document is no longer HTML5-compliant. For example, HTML5-compliant browsers hide content marked as <foo hidden>...<foo>, even though <foo> is not a valid HTML element.
+
Типи посиланнь
+
In HTML, the following link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, or <link> element.
+
+ +

Переглянути всі сторінки помічені "HTML"...

diff --git "a/files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/html/index.html" "b/files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/html/index.html" new file mode 100644 index 0000000000..22489d772f --- /dev/null +++ "b/files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/html/index.html" @@ -0,0 +1,169 @@ +--- +title: +slug: Web/HTML/Елемент/html +tags: + - Корінь + - Структура +translation_of: Web/HTML/Element/html +--- +

{{HTMLRef}}

+ +

HTML-елемент <html> являє собою корінь HTML-документа. Решта елементів мають бути його нащадками.

+ +

Оскільки <html> є першим (за винятком коментарів) елементом документа, він зветься кореневим елементом. І хоча цей тег може бути відсутнім для {{glossary("HTML")}}, в {{glossary("XHTML")}} він має бути відкритий і закритий явно.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Категорії вмістуВідсутні.
Дозволений вмістОдин елемент {{HTMLElement("head")}} та один (наступний за ним) елемент {{HTMLElement("body")}}.
Обов'язковість тегів +

Початковий тег можна опустити, якщо перша річ всередині елементу <html> — не коментар. Кінцевий тег можна опустити тоді, коли одразу після елементу <html> немає коментаря, і він містить елемент {{HTMLElement("body")}}, що має або вміст (непустий), або початковий тег.

+
Дозволені пращуриЯк кореневий елемент документа, або як піддокумент складного документа там, де це дозволено.
Інтерфейс DOM{{domxref("HTMLHtmlElement")}}
+ +

Атрибути

+ +

Цей елемент має глобальні атрибути.

+ +
+
{{htmlattrdef("manifest")}} {{obsolete_inline}}
+
Вказує URI manifest-файлу, що позначає ресурси, які підлягають локальному кешуванню. Детальніше див. Using the application cache.
+
{{htmlattrdef("version")}} {{obsolete_inline}}
+
Вказує версію HTML {{glossary("DTD", "Document Type Definition")}}  цього документа. Цей атрибут визнано застарілим, вживайте !DOCTYPE замість нього.
+
{{htmlattrdef("xmlns")}} 
+
Вказує простір імен (XML) документа. Типове значення "http://www.w3.org/1999/xhtml". Для XHTML то обов'язковий атрибут, а для HTML може бути відсутнім.
+
+ +

Приклад

+ +
+

Використаний в прикладі  {{glossary("DOCTYPE")}} вказує на {{glossary("HTML5")}}.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>...</head>
+  <body>...</body>
+</html>
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML5 W3C')}}Додано підтримку атрибута manifest (згодом визнаний застарілим).
+ Атрибут version визнано застарілим.
{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}{{Spec2('HTML4.01')}}Атрибут version визнано застарілим.
+ +

Підтримка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Див. також

+ + diff --git "a/files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/iframe/index.html" "b/files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/iframe/index.html" new file mode 100644 index 0000000000..fc5b06a037 --- /dev/null +++ "b/files/uk/web/html/\320\265\320\273\320\265\320\274\320\265\320\275\321\202/iframe/index.html" @@ -0,0 +1,260 @@ +--- +title: '