From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../analysernode/getbytefrequencydata/index.html | 4 +- files/ru/web/api/analysernode/index.html | 2 +- files/ru/web/api/audioparam/index.html | 4 +- .../web/api/audioparam/setvalueattime/index.html | 4 +- .../ru/web/api/beforeinstallpromptevent/index.html | 2 +- .../api/beforeinstallpromptevent/prompt/index.html | 4 +- .../web/api/bluetoothremotegattserver/index.html | 2 +- .../api/broadcastchannel/postmessage/index.html | 2 +- files/ru/web/api/caches/index.html | 4 +- .../tutorial/advanced_animations/index.html | 30 ++-- .../tutorial/applying_styles_and_colors/index.html | 92 ++++++------ .../api/canvas_api/tutorial/basic_usage/index.html | 12 +- .../canvas_api/tutorial/drawing_shapes/index.html | 40 +++--- .../canvas_api/tutorial/drawing_text/index.html | 20 +-- .../canvas_api/tutorial/transformations/index.html | 40 +++--- .../createlineargradient/index.html | 6 +- .../canvasrenderingcontext2d/ellipse/index.html | 10 +- .../canvasrenderingcontext2d/filltext/index.html | 10 +- files/ru/web/api/cleartimeout/index.html | 4 +- files/ru/web/api/clients/openwindow/index.html | 4 +- files/ru/web/api/clipboard_api/index.html | 2 +- files/ru/web/api/console/clear/index.html | 2 +- files/ru/web/api/console/debug/index.html | 2 +- .../managing_screen_orientation/index.html | 12 +- files/ru/web/api/document/cookie/index.html | 42 +++--- files/ru/web/api/document/evaluate/index.html | 6 +- files/ru/web/api/document/execcommand/index.html | 4 +- files/ru/web/api/document/head/index.html | 4 +- files/ru/web/api/document/queryselector/index.html | 8 +- files/ru/web/api/document/readystate/index.html | 8 +- files/ru/web/api/document/scroll_event/index.html | 2 +- .../createhtmldocument/index.html | 8 +- files/ru/web/api/domtokenlist/replace/index.html | 8 +- files/ru/web/api/element/closest/index.html | 10 +- files/ru/web/api/element/innerhtml/index.html | 20 +-- .../ru/web/api/element/mouseenter_event/index.html | 6 +- .../ru/web/api/element/queryselectorall/index.html | 8 +- files/ru/web/api/element/scrollheight/index.html | 10 +- files/ru/web/api/element/setattribute/index.html | 6 +- files/ru/web/api/event/bubbles/index.html | 6 +- files/ru/web/api/event/currenttarget/index.html | 2 +- files/ru/web/api/event/event/index.html | 4 +- files/ru/web/api/event/target/index.html | 6 +- files/ru/web/api/eventlistener/index.html | 6 +- .../api/eventtarget/addeventlistener/index.html | 36 ++--- files/ru/web/api/extendableevent/index.html | 2 +- .../web/api/extendableevent/waituntil/index.html | 4 +- .../using_files_from_web_applications/index.html | 50 +++---- files/ru/web/api/filereader/index.html | 2 +- files/ru/web/api/formdata/entries/index.html | 6 +- files/ru/web/api/formdata/getall/index.html | 8 +- files/ru/web/api/gamepad/axes/index.html | 4 +- files/ru/web/api/gamepad/buttons/index.html | 4 +- files/ru/web/api/gamepad/mapping/index.html | 4 +- .../gamepad_api/using_the_gamepad_api/index.html | 20 +-- files/ru/web/api/gamepadbutton/index.html | 2 +- files/ru/web/api/gamepadbutton/pressed/index.html | 4 +- files/ru/web/api/gamepadbutton/value/index.html | 4 +- .../api/globaleventhandlers/onkeydown/index.html | 6 +- files/ru/web/api/history/go/index.html | 12 +- files/ru/web/api/history/pushstate/index.html | 4 +- files/ru/web/api/history/replacestate/index.html | 6 +- files/ru/web/api/history/state/index.html | 4 +- files/ru/web/api/history_api/index.html | 14 +- .../working_with_the_history_api/index.html | 8 +- files/ru/web/api/htmlaudioelement/audio/index.html | 4 +- .../api/htmlcanvaselement/capturestream/index.html | 4 +- files/ru/web/api/htmlelement/offsetleft/index.html | 6 +- .../ru/web/api/htmlformelement/elements/index.html | 10 +- .../api/htmlmediaelement/abort_event/index.html | 2 +- .../timing_element_visibility/index.html | 36 ++--- files/ru/web/api/keyboardevent/altkey/index.html | 4 +- files/ru/web/api/location/reload/index.html | 4 +- files/ru/web/api/location/replace/index.html | 4 +- files/ru/web/api/media_session_api/index.html | 6 +- .../web/api/mediadevices/getusermedia/index.html | 38 ++--- .../echocancellation/index.html | 2 +- files/ru/web/api/mouseevent/button/index.html | 4 +- files/ru/web/api/mouseevent/ctrlkey/index.html | 4 +- files/ru/web/api/navigator/getusermedia/index.html | 8 +- files/ru/web/api/navigator/mediadevices/index.html | 2 +- .../ru/web/api/network_information_api/index.html | 4 +- files/ru/web/api/node/appendchild/index.html | 6 +- files/ru/web/api/page_visibility_api/index.html | 4 +- files/ru/web/api/pointer_events/index.html | 14 +- files/ru/web/api/request/index.html | 8 +- files/ru/web/api/response/index.html | 6 +- files/ru/web/api/response/response/index.html | 4 +- .../cantrickleicecandidates/index.html | 4 +- .../rtcpeerconnection/connectionstate/index.html | 4 +- .../currentlocaldescription/index.html | 4 +- .../currentremotedescription/index.html | 4 +- .../icecandidate_event/index.html | 8 +- .../rtcpeerconnection/rtcpeerconnection/index.html | 2 +- .../using_service_workers/index.html | 36 ++--- .../api/serviceworkercontainer/register/index.html | 6 +- files/ru/web/api/setinterval/index.html | 26 ++-- files/ru/web/api/settimeout/index.html | 24 ++-- files/ru/web/api/storage/index.html | 2 +- files/ru/web/api/storage/removeitem/index.html | 4 +- files/ru/web/api/storage_access_api/index.html | 2 +- files/ru/web/api/touch_events/index.html | 24 ++-- .../index.html | 2 +- .../api/touch_events/using_touch_events/index.html | 8 +- files/ru/web/api/touchevent/touches/index.html | 4 +- files/ru/web/api/usb/getdevices/index.html | 4 +- files/ru/web/api/usb/onconnect/index.html | 2 +- files/ru/web/api/usb/ondisconnect/index.html | 2 +- files/ru/web/api/usb/requestdevice/index.html | 4 +- .../using_the_web_animations_api/index.html | 46 +++--- files/ru/web/api/web_audio_api/index.html | 2 +- .../visualizations_with_web_audio_api/index.html | 40 +++--- files/ru/web/api/web_authentication_api/index.html | 2 +- files/ru/web/api/web_speech_api/index.html | 4 +- .../using_the_web_storage_api/index.html | 14 +- .../web_workers_api/using_web_workers/index.html | 58 ++++---- .../signaling_and_video_calling/index.html | 38 ++--- files/ru/web/api/webvtt_api/index.html | 68 ++++----- .../web/api/window/beforeunload_event/index.html | 2 +- .../web/api/window/cancelanimationframe/index.html | 4 +- .../web/api/window/ongamepadconnected/index.html | 4 +- .../api/window/ongamepaddisconnected/index.html | 4 +- .../api/window/requestanimationframe/index.html | 4 +- files/ru/web/api/windowclient/index.html | 2 +- .../api/windoweventhandlers/onpopstate/index.html | 4 +- .../api/workerglobalscope/importscripts/index.html | 4 +- .../sending_and_receiving_binary_data/index.html | 20 +-- .../xmlhttprequest/using_xmlhttprequest/index.html | 40 +++--- .../api/xmlhttprequest/withcredentials/index.html | 2 +- files/ru/web/css/_colon_any-link/index.html | 6 +- files/ru/web/css/_colon_empty/index.html | 6 +- files/ru/web/css/_colon_first/index.html | 8 +- files/ru/web/css/_colon_focus-visible/index.html | 8 +- files/ru/web/css/_colon_focus-within/index.html | 6 +- files/ru/web/css/_colon_host()/index.html | 6 +- files/ru/web/css/_colon_is/index.html | 20 +-- files/ru/web/css/_colon_left/index.html | 4 +- files/ru/web/css/_colon_where/index.html | 12 +- files/ru/web/css/_doublecolon_cue/index.html | 4 +- .../web/css/_doublecolon_grammar-error/index.html | 6 +- files/ru/web/css/_doublecolon_marker/index.html | 6 +- .../ru/web/css/_doublecolon_placeholder/index.html | 12 +- files/ru/web/css/_doublecolon_slotted/index.html | 8 +- files/ru/web/css/align-content/index.html | 8 +- files/ru/web/css/animation/index.html | 6 +- files/ru/web/css/attr()/index.html | 6 +- files/ru/web/css/background-attachment/index.html | 10 +- files/ru/web/css/background-image/index.html | 6 +- files/ru/web/css/border-bottom/index.html | 10 +- files/ru/web/css/box-sizing/index.html | 4 +- files/ru/web/css/calc()/index.html | 12 +- files/ru/web/css/clamp()/index.html | 8 +- files/ru/web/css/color_value/index.html | 6 +- .../mastering_margin_collapsing/index.html | 4 +- files/ru/web/css/css_fonts/index.html | 4 +- .../basic_concepts_of_grid_layout/index.html | 74 +++++----- .../box_alignment_in_css_grid_layout/index.html | 54 ++++---- .../line-based_placement_with_css_grid/index.html | 64 ++++----- .../relationship_of_grid_layout/index.html | 60 ++++---- files/ru/web/css/custom-ident/index.html | 4 +- files/ru/web/css/direction/index.html | 4 +- files/ru/web/css/flex-wrap/index.html | 6 +- files/ru/web/css/font-variant-ligatures/index.html | 4 +- files/ru/web/css/font/index.html | 8 +- files/ru/web/css/gap/index.html | 16 +-- files/ru/web/css/grid-auto-flow/index.html | 8 +- files/ru/web/css/grid-template-columns/index.html | 6 +- files/ru/web/css/hyphens/index.html | 6 +- files/ru/web/css/inline-size/index.html | 6 +- files/ru/web/css/justify-content/index.html | 8 +- files/ru/web/css/justify-items/index.html | 2 +- .../breadcrumb_navigation/index.html | 2 +- files/ru/web/css/minmax()/index.html | 6 +- files/ru/web/css/object-position/index.html | 6 +- files/ru/web/css/overflow-wrap/index.html | 6 +- files/ru/web/css/text-size-adjust/index.html | 2 +- files/ru/web/css/touch-action/index.html | 8 +- .../web/css/transform-function/rotate()/index.html | 10 +- .../css/transform-function/rotate3d()/index.html | 10 +- .../web/css/transform-function/skew()/index.html | 10 +- files/ru/web/css/url()/index.html | 16 +-- files/ru/web/css/vertical-align/index.html | 14 +- files/ru/web/css/white-space/index.html | 6 +- files/ru/web/css/z-index/index.html | 6 +- .../guide/audio_and_video_manipulation/index.html | 26 ++-- .../guide/parsing_and_serializing_xml/index.html | 10 +- files/ru/web/guide/user_input_methods/index.html | 12 +- files/ru/web/html/attributes/pattern/index.html | 8 +- files/ru/web/html/element/address/index.html | 2 +- files/ru/web/html/element/b/index.html | 4 +- files/ru/web/html/element/base/index.html | 2 +- files/ru/web/html/element/button/index.html | 2 +- files/ru/web/html/element/canvas/index.html | 4 +- files/ru/web/html/element/code/index.html | 2 +- files/ru/web/html/element/dialog/index.html | 6 +- .../web/html/element/heading_elements/index.html | 10 +- files/ru/web/html/element/hr/index.html | 2 +- files/ru/web/html/element/input/color/index.html | 16 +-- files/ru/web/html/element/input/date/index.html | 22 +-- files/ru/web/html/element/input/number/index.html | 28 ++-- files/ru/web/html/element/input/radio/index.html | 14 +- files/ru/web/html/element/input/range/index.html | 28 ++-- files/ru/web/html/element/label/index.html | 4 +- files/ru/web/html/element/li/index.html | 6 +- files/ru/web/html/element/link/index.html | 20 +-- files/ru/web/html/element/marquee/index.html | 2 +- files/ru/web/html/element/nav/index.html | 2 +- files/ru/web/html/element/output/index.html | 2 +- files/ru/web/html/element/strong/index.html | 4 +- files/ru/web/html/element/track/index.html | 2 +- files/ru/web/html/element/wbr/index.html | 2 +- files/ru/web/http/caching/index.html | 14 +- .../corsalloworiginnotmatchingorigin/index.html | 6 +- files/ru/web/http/cors/index.html | 38 ++--- files/ru/web/http/csp/index.html | 22 +-- .../ru/web/http/headers/accept-language/index.html | 4 +- files/ru/web/http/headers/accept-patch/index.html | 4 +- files/ru/web/http/headers/accept-ranges/index.html | 4 +- files/ru/web/http/headers/accept/index.html | 4 +- .../headers/access-control-allow-origin/index.html | 8 +- files/ru/web/http/headers/authorization/index.html | 4 +- files/ru/web/http/headers/connection/index.html | 2 +- .../ru/web/http/headers/content-length/index.html | 2 +- files/ru/web/http/headers/content-type/index.html | 6 +- files/ru/web/http/headers/date/index.html | 4 +- files/ru/web/http/headers/expires/index.html | 4 +- files/ru/web/http/headers/set-cookie/index.html | 10 +- .../headers/strict-transport-security/index.html | 4 +- files/ru/web/http/methods/connect/index.html | 4 +- files/ru/web/http/methods/patch/index.html | 6 +- files/ru/web/http/overview/index.html | 4 +- files/ru/web/http/status/301/index.html | 6 +- files/ru/web/http/status/307/index.html | 6 +- files/ru/web/http/status/400/index.html | 2 +- files/ru/web/http/status/401/index.html | 4 +- files/ru/web/http/status/403/index.html | 4 +- files/ru/web/http/status/404/index.html | 4 +- files/ru/web/http/status/405/index.html | 2 +- files/ru/web/http/status/408/index.html | 2 +- files/ru/web/http/status/425/index.html | 2 +- files/ru/web/http/status/429/index.html | 4 +- files/ru/web/http/status/500/index.html | 2 +- files/ru/web/http/status/502/index.html | 2 +- files/ru/web/http/status/503/index.html | 2 +- .../a_re-introduction_to_javascript/index.html | 154 ++++++++++----------- files/ru/web/javascript/closures/index.html | 32 ++--- files/ru/web/javascript/data_structures/index.html | 6 +- .../control_flow_and_error_handling/index.html | 38 ++--- files/ru/web/javascript/guide/modules/index.html | 76 +++++----- .../character_classes/index.html | 6 +- .../guide/regular_expressions/index.html | 38 ++--- .../inheritance_and_the_prototype_chain/index.html | 20 +-- .../ru/web/javascript/memory_management/index.html | 12 +- .../reference/classes/constructor/index.html | 20 +-- .../ru/web/javascript/reference/classes/index.html | 36 ++--- .../classes/private_class_fields/index.html | 16 +-- .../classes/public_class_fields/index.html | 26 ++-- .../reference/errors/bad_radix/index.html | 10 +- .../errors/cant_assign_to_property/index.html | 6 +- .../errors/cyclic_object_value/index.html | 8 +- .../missing_curly_after_property_list/index.html | 10 +- .../reference/functions/rest_parameters/index.html | 22 +-- .../reference/global_objects/array/flat/index.html | 14 +- .../reference/global_objects/array/map/index.html | 16 +-- .../global_objects/array/slice/index.html | 14 +- .../reference/global_objects/array/sort/index.html | 20 +-- .../global_objects/array/splice/index.html | 16 +-- .../global_objects/bigint/asuintn/index.html | 4 +- .../global_objects/date/getdate/index.html | 4 +- .../global_objects/date/getday/index.html | 6 +- .../global_objects/date/getfullyear/index.html | 4 +- .../global_objects/date/gethours/index.html | 4 +- .../global_objects/date/getmilliseconds/index.html | 4 +- .../global_objects/date/getminutes/index.html | 4 +- .../global_objects/date/getmonth/index.html | 4 +- .../global_objects/date/getseconds/index.html | 4 +- .../global_objects/date/gettime/index.html | 6 +- .../reference/global_objects/date/index.html | 14 +- .../reference/global_objects/eval/index.html | 22 +-- .../reference/global_objects/generator/index.html | 4 +- .../global_objects/intl/datetimeformat/index.html | 8 +- .../global_objects/number/issafeinteger/index.html | 6 +- .../global_objects/number/toexponential/index.html | 4 +- .../global_objects/number/tofixed/index.html | 4 +- .../global_objects/number/toprecision/index.html | 4 +- .../global_objects/number/tostring/index.html | 4 +- .../global_objects/object/create/index.html | 10 +- .../global_objects/object/entries/index.html | 10 +- .../global_objects/promise/then/index.html | 10 +- .../reference/global_objects/proxy/index.html | 18 +-- .../global_objects/proxy/proxy/apply/index.html | 4 +- .../global_objects/proxy/proxy/get/index.html | 6 +- .../global_objects/proxy/proxy/index.html | 4 +- .../global_objects/proxy/proxy/set/index.html | 4 +- .../reference/global_objects/reflect/index.html | 6 +- .../reference/global_objects/regexp/index.html | 22 +-- .../global_objects/regexp/lastmatch/index.html | 4 +- .../reference/global_objects/set/set/index.html | 4 +- .../global_objects/string/@@iterator/index.html | 6 +- .../global_objects/string/endswith/index.html | 6 +- .../reference/global_objects/string/index.html | 22 +-- .../global_objects/string/matchall/index.html | 10 +- .../global_objects/string/replaceall/index.html | 8 +- .../global_objects/string/slice/index.html | 12 +- .../global_objects/string/split/index.html | 20 +-- .../global_objects/string/startswith/index.html | 6 +- .../reference/global_objects/weakmap/index.html | 6 +- .../reference/lexical_grammar/index.html | 50 +++---- .../reference/operators/addition/index.html | 6 +- .../operators/addition_assignment/index.html | 4 +- .../reference/operators/assignment/index.html | 4 +- .../reference/operators/bitwise_and/index.html | 8 +- .../reference/operators/class/index.html | 8 +- .../operators/conditional_operator/index.html | 14 +- .../reference/operators/decrement/index.html | 6 +- .../nullish_coalescing_operator/index.html | 18 +-- .../operators/operator_precedence/index.html | 6 +- .../operators/property_accessors/index.html | 24 ++-- .../reference/operators/spread_syntax/index.html | 36 ++--- .../reference/operators/yield/index.html | 6 +- .../reference/operators/yield_star_/index.html | 10 +- .../reference/statements/async_function/index.html | 10 +- .../reference/statements/class/index.html | 8 +- .../reference/statements/for...of/index.html | 36 ++--- files/ru/web/mathml/element/math/index.html | 78 +++++------ files/ru/web/mathml/element/mn/index.html | 2 +- files/ru/web/mathml/element/mover/index.html | 2 +- files/ru/web/mathml/element/mstyle/index.html | 2 +- .../ru/web/media/formats/webrtc_codecs/index.html | 8 +- files/ru/web/performance/dns-prefetch/index.html | 8 +- .../web/performance/how_browsers_work/index.html | 4 +- .../ru/web/security/same-origin_policy/index.html | 2 +- files/ru/web/svg/attribute/id/index.html | 2 +- files/ru/web/svg/attribute/lang/index.html | 2 +- files/ru/web/svg/attribute/viewbox/index.html | 4 +- files/ru/web/svg/element/g/index.html | 2 +- files/ru/web/svg/element/image/index.html | 2 +- files/ru/web/svg/element/svg/index.html | 4 +- .../svg/tutorial/basic_transformations/index.html | 10 +- files/ru/web/svg/tutorial/gradients/index.html | 16 +-- 340 files changed, 1905 insertions(+), 1905 deletions(-) (limited to 'files/ru/web') diff --git a/files/ru/web/api/analysernode/getbytefrequencydata/index.html b/files/ru/web/api/analysernode/getbytefrequencydata/index.html index 86ca8846e1..d0f4d76dca 100644 --- a/files/ru/web/api/analysernode/getbytefrequencydata/index.html +++ b/files/ru/web/api/analysernode/getbytefrequencydata/index.html @@ -15,7 +15,7 @@ translation_of: Web/API/AnalyserNode/getByteFrequencyData

Синтаксис

-
var audioCtx = new AudioContext();
+
var audioCtx = new AudioContext();
 var analyser = audioCtx.createAnalyser();
 var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array должен иметь такой же размер, что и frequencyBinCount
 
@@ -38,7 +38,7 @@ void analyser.getByteFrequencyData(dataArray); // заполняет Ui
 
 
Следующий пример показывает базовое использование {{domxref ("AudioContext")}} для создания AnalyserNode, затем {{domxref ("window.requestAnimationFrame ()", "requestAnimationFrame")}} и {{htmlelement ("canvas" )}} для повторения сбора частотных данных и вывода в стиле гистограммы winamp для текущего аудиовхода. Для получения дополнительных примеров / информации ознакомьтесь с нашей демонстрацией Voice-change-O-matic (см. соответствующий код в строках app.js lines 128–205 ).

 
-
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 
   ...
diff --git a/files/ru/web/api/analysernode/index.html b/files/ru/web/api/analysernode/index.html
index 3eba1fb760..c319515a2a 100644
--- a/files/ru/web/api/analysernode/index.html
+++ b/files/ru/web/api/analysernode/index.html
@@ -97,7 +97,7 @@ translation_of: Web/API/AnalyserNode
 
 
The following example shows basic usage of an {{domxref("AudioContext")}} to create an AnalyserNode, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).

 
-
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 
 // ...
diff --git a/files/ru/web/api/audioparam/index.html b/files/ru/web/api/audioparam/index.html
index bbe425dcb6..9ce41633ff 100644
--- a/files/ru/web/api/audioparam/index.html
+++ b/files/ru/web/api/audioparam/index.html
@@ -65,7 +65,7 @@ translation_of: Web/API/AudioParam
 
 
First, a basic example showing a {{domxref("GainNode")}} having its gain value set. gain is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.

 
-
var AudioContext = window.AudioContext || window.webkitAudioContext;
+
var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var gainNode = audioCtx.createGain();
@@ -73,7 +73,7 @@ gainNode.gain.value = 0;

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

 
-
var compressor = audioCtx.createDynamicsCompressor();
+
var compressor = audioCtx.createDynamicsCompressor();
 compressor.threshold.setValueAtTime(-50, audioCtx.currentTime);
 compressor.knee.setValueAtTime(40, audioCtx.currentTime);
 compressor.ratio.setValueAtTime(12, audioCtx.currentTime);
diff --git a/files/ru/web/api/audioparam/setvalueattime/index.html b/files/ru/web/api/audioparam/setvalueattime/index.html
index 202e13d971..9a6485b694 100644
--- a/files/ru/web/api/audioparam/setvalueattime/index.html
+++ b/files/ru/web/api/audioparam/setvalueattime/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/AudioParam/setValueAtTime
 
 
Синтаксис

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

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

 
 
Параметры

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

 
-
// create audio context
+
// create audio context
 var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
diff --git a/files/ru/web/api/beforeinstallpromptevent/index.html b/files/ru/web/api/beforeinstallpromptevent/index.html
index ab241f8f1d..d572446540 100644
--- a/files/ru/web/api/beforeinstallpromptevent/index.html
+++ b/files/ru/web/api/beforeinstallpromptevent/index.html
@@ -45,7 +45,7 @@ translation_of: Web/API/BeforeInstallPromptEvent
 
 
Пример

 
-
window.addEventListener("beforeinstallprompt", function(e) {
+
window.addEventListener("beforeinstallprompt", function(e) {
   // Зарегистрируйте платформы, указанные в качестве параметров, в запросе на установку
   console.log(e.platforms); // e.g., ["web", "android", "windows"]
   e.userChoice.then(function(choiceResult) {
diff --git a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
index f8c623a1c1..ad2177d693 100644
--- a/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
+++ b/files/ru/web/api/beforeinstallpromptevent/prompt/index.html
@@ -14,7 +14,7 @@ translation_of: Web/API/BeforeInstallPromptEvent/prompt
 
 
Синтаксис

 
-
BeforeInstallPromptEvent.prompt()

+
BeforeInstallPromptEvent.prompt()

 
 
Параметры

 
@@ -26,7 +26,7 @@ translation_of: Web/API/BeforeInstallPromptEvent/prompt
 
 
Пример

 
-
var isTooSoon = true;
+
var isTooSoon = true;
 window.addEventListener("beforeinstallprompt", function(e) {
   if (isTooSoon) {
     e.preventDefault(); // Предотвращает быстрое отображение
diff --git a/files/ru/web/api/bluetoothremotegattserver/index.html b/files/ru/web/api/bluetoothremotegattserver/index.html
index 6f4c9d5c2f..61a84cb2b6 100644
--- a/files/ru/web/api/bluetoothremotegattserver/index.html
+++ b/files/ru/web/api/bluetoothremotegattserver/index.html
@@ -21,7 +21,7 @@ translation_of: Web/API/BluetoothRemoteGATTServer
 
 
Интерфейс

 
-
interface BluetoothRemoteGATTServer {
+
interface BluetoothRemoteGATTServer {
   readonly attribute BluetoothDevice device;
   readonly attribute boolean connected;
 
diff --git a/files/ru/web/api/broadcastchannel/postmessage/index.html b/files/ru/web/api/broadcastchannel/postmessage/index.html
index 12932d5046..6a0dedcd7b 100644
--- a/files/ru/web/api/broadcastchannel/postmessage/index.html
+++ b/files/ru/web/api/broadcastchannel/postmessage/index.html
@@ -19,7 +19,7 @@ translation_of: Web/API/BroadcastChannel/postMessage
 
 
Синтаксис

 
-
var str = channel.postMessage(object);
+
var str = channel.postMessage(object);
 

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

diff --git a/files/ru/web/api/caches/index.html b/files/ru/web/api/caches/index.html
index a6a19b6b1c..d67b99be17 100644
--- a/files/ru/web/api/caches/index.html
+++ b/files/ru/web/api/caches/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches
 
 
Синтаксис

 
-
var myCacheStorage = self.caches; // or just caches
+
var myCacheStorage = self.caches; // or just caches
 

 
 
Значение

@@ -23,7 +23,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches
 
 
Данный пример показывает как надо использовать кеш в контексте service worker для хранения в автономном режиме

 
-
this.addEventListener('install', function(event) {
+
this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
diff --git a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
index 44f0185bad..8c1a771764 100644
--- a/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/advanced_animations/index.html
@@ -6,17 +6,17 @@ translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
 
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

 
 

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

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

 

 
-
Рисование мяча

+
Рисование мяча

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

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

 
 
<canvas id="canvas" width="600" height="300"></canvas>
 

 
-
Как обычно, нам нужен контекст рисования. Чтобы нарисовать шар, мы создадим объект ball, который содержит свойства и метод draw() , чтобы нарисовать его на canvas.

+
Как обычно, нам нужен контекст рисования. Чтобы нарисовать шар, мы создадим объект ball, который содержит свойства и метод draw() , чтобы нарисовать его на canvas.

 
 
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -37,11 +37,11 @@ var ball = {
 
 ball.draw();

 
-
Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+
Здесь нет ничего особенного, шар на самом деле представляет собой простой круг и рисуется с помощью метода {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

 
-
Добавление скорости

+
Добавление скорости

 
-
Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней главы этого урока. Опять же, {{domxref("window.requestAnimationFrame()")}} помогает нам контролировать анимацию. Мяч перемещается, добавляя вектор скорости в положение. Для каждого кадра мы также {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}}  холст, чтобы удалить старые круги из предыдущих кадров.

+
Теперь, когда у нас есть шар, мы готовы добавить базовую анимацию, как мы узнали из последней главы этого урока. Опять же, {{domxref("window.requestAnimationFrame()")}} помогает нам контролировать анимацию. Мяч перемещается, добавляя вектор скорости в положение. Для каждого кадра мы также {{domxref("CanvasRenderingContext2D.clearRect", "очищаем", "", 1)}}  холст, чтобы удалить старые круги из предыдущих кадров.

 
 
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -82,9 +82,9 @@ canvas.addEventListener('mouseout', function(e) {
 ball.draw();
 

 
-
Границы

+
Границы

 
-
Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.  Нам нужно проверить, не находятся ли x и y положения шара вне размеров холста и не инвертируют направление векторов скорости.  Для этого мы добавим следующие проверки в метод draw :

+
Без какого-либо граничного коллизионного тестирования наш мяч быстро выбегает из холста.  Нам нужно проверить, не находятся ли x и y положения шара вне размеров холста и не инвертируют направление векторов скорости.  Для этого мы добавим следующие проверки в метод draw :

 
 
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
   ball.vy = -ball.vy;
@@ -93,9 +93,9 @@ if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
   ball.vx = -ball.vx;
 }

 
-
Первое демо

+
Первое демо

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

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

 
 

 
ball.vy *= .99;
 ball.vy += .25;

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

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

 
 

 
 
{{EmbedLiveSample("Third_demo", "610", "310")}}

 
-
Добавление управления мышью

+
Добавление управления мышью

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

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

 
 

 
-
Переместите шар с помощью мыши и отпустите его одним щелчком.

+
Переместите шар с помощью мыши и отпустите его одним щелчком.

 
 
{{EmbedLiveSample("Добавление_управления_мышью", "610", "310")}}

 
diff --git a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
index c17cdbedca..e82a99b84c 100644
--- a/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html
@@ -29,7 +29,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Применение_стилей_и_
 
 
Чтобы строка color считалась валидной, она должна соответствовать CSS {{cssxref("<color>")}}. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. 

 
-
// these all set the fillStyle to 'orange'
+
// these all set the fillStyle to 'orange'
 
 ctx.fillStyle = "orange";
 ctx.fillStyle = "#FFA500";
@@ -41,7 +41,7 @@ ctx.fillStyle = "rgba(255,165,0,1)";
 
 
В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   for (var i=0;i<6;i++){
     for (var j=0;j<6;j++){
@@ -53,9 +53,9 @@ ctx.fillStyle = "rgba(255,165,0,1)";
 }

 
 
 
 
Результат выглядит так:

@@ -66,7 +66,7 @@ ctx.fillStyle = "rgba(255,165,0,1)";
 
 
Этот пример похож на предыдущий, но мы используем свойство strokeStyle чтобы изменить цвета очертаний фигур. Так же мы используем метод arc() для рисования окружностей вместо квадратов.

 
-
  function draw() {
+
  function draw() {
     var ctx = document.getElementById('canvas').getContext('2d');
     for (var i=0;i<6;i++){
       for (var j=0;j<6;j++){
@@ -81,9 +81,9 @@ ctx.fillStyle = "rgba(255,165,0,1)";
 

 
 
 
 
Результат выглядит так:

@@ -103,7 +103,7 @@ ctx.fillStyle = "rgba(255,165,0,1)";
 
 
Так как свойства strokeStyle и fillStyle принимают цветовые значения rgba через CSS, мы можем использовать следующее обозначение  для назначения прозрачных цветов.

 
-
// Assigning transparent colors to stroke and fill style
+
// Assigning transparent colors to stroke and fill style
 
 ctx.strokeStyle = "rgba(255,0,0,0.5)";
 ctx.fillStyle = "rgba(255,0,0,0.5)";
@@ -115,7 +115,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 
 
В данном примере мы нарисуем фон и четыре квадрата с различными цветами.  Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство globalAlpha значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   // фон изображения
   ctx.fillStyle = '#FD0';
@@ -140,9 +140,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 }

 
 
 
 
{{EmbedLiveSample("Пример_globalAlpha", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

@@ -151,7 +151,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 
 
В этом втором примере мы делаем что-то похожее на предыдущее, но вместо рисования кругов друг над другом, я рисовал маленькие прямоугольники с увеличением непрозрачности. Использование rgba() добавляет контроля и гибкости, поскольку мы можем индивидуально настраивать стиль заливки и штриха.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Нарисовать фон
@@ -174,9 +174,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 }

 
 
 
 
{{EmbedLiveSample("Пример_использования_rgba", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

@@ -212,7 +212,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 
 
В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу - 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   for (var i = 0; i < 10; i++){
     ctx.lineWidth = 1+i;
@@ -225,9 +225,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 

 
 
 
 
{{EmbedLiveSample("Пример_lineWidth", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

@@ -269,7 +269,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 
 
Строка слева использует butt опцию по умолчанию. Вы заметите, что она полностью очищена от направляющих. Второй вариант -  round опция. Это добавляет полукруг к концу, который имеет радиус, равный половине ширины линии. Строка справа использует square опцию. Это добавляет поле с равной шириной и половиной высоты толщины линии.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var lineCap = ['butt','round','square'];
 
@@ -296,9 +296,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 

 
 
 
 
{{EmbedLiveSample("Пример_lineCap", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

@@ -322,7 +322,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 
 
В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств lineJoin; результат - выше. 

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var lineJoin = ['round','bevel','miter'];
   ctx.lineWidth = 10;
@@ -340,9 +340,9 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 

 
 
 
 
{{EmbedLiveSample("Пример_lineJoin", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

@@ -367,7 +367,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 
 
Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Clear canvas
@@ -402,7 +402,7 @@ ctx.fillStyle = "rgba(255,0,0,0.5)";
 

 
 
 
@@ -428,10 +428,10 @@ draw();

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

 
 
 
-
var ctx = document.getElementById('canvas').getContext('2d');
+
var ctx = document.getElementById('canvas').getContext('2d');
 var offset = 0;
 
 function draw() {
@@ -467,7 +467,7 @@ march();

 
 
For example:

 
-
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
 var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
 

 
@@ -480,7 +480,7 @@ var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
 
 
You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

 
-
var lineargradient = ctx.createLinearGradient(0,0,150,150);
+
var lineargradient = ctx.createLinearGradient(0,0,150,150);
 lineargradient.addColorStop(0, 'white');
 lineargradient.addColorStop(1, 'black');
 

@@ -489,7 +489,7 @@ lineargradient.addColorStop(1, 'black');
 
 
In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Create gradients
@@ -515,9 +515,9 @@ lineargradient.addColorStop(1, 'black');
 

 
 
 
 
The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

@@ -530,7 +530,7 @@ lineargradient.addColorStop(1, 'black');
 
 
In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Create gradients
@@ -567,9 +567,9 @@ lineargradient.addColorStop(1, 'black');
 

 
 
 
 
In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

@@ -602,7 +602,7 @@ lineargradient.addColorStop(1, 'black');
 
 
Мы используем этот метод, чтобы создать {{domxref("CanvasPattern")}} объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства fillStyle или strokeStyle. Например:

 
-
var img = new Image();
+
var img = new Image();
 img.src = 'someimage.png';
 var ptrn = ctx.createPattern(img,'repeat');
 

@@ -615,7 +615,7 @@ var ptrn = ctx.createPattern(img,'repeat');
 
 
In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // create new image object to use as pattern
@@ -633,9 +633,9 @@ var ptrn = ctx.createPattern(img,'repeat');
 

 
 
@@ -671,7 +671,7 @@ var ptrn = ctx.createPattern(img,'repeat');
 
 
This example draws a text string with a shadowing effect.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.shadowOffsetX = 2;
@@ -686,9 +686,9 @@ var ptrn = ctx.createPattern(img,'repeat');
 

 
 
 
 
{{EmbedLiveSample("Пример_текста_с_тенью", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

@@ -708,7 +708,7 @@ var ptrn = ctx.createPattern(img,'repeat');
 
 
In this example we are using the evenodd rule.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.beginPath();
   ctx.arc(50, 50, 30, 0, Math.PI*2, true);
@@ -717,9 +717,9 @@ var ptrn = ctx.createPattern(img,'repeat');
 }

 
 
 
 
{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
index 0d71e6b16b..89d79cedf3 100644
--- a/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
 
 
Элемент <canvas>

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

 
 
Он выглядит как элемент <img>, но его отличие в том, что он не имеет атрибутов src и alt. Элемент <canvas> имеет только два атрибута - ширину и высоту. Оба они не обязательны и могут быть выставлены с использованием свойств DOM. Если атрибуты высоты и ширины не установлены, canvas будет по умолчанию шириной 300 пикселей и в высоту 150 пикселей. Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.

@@ -33,7 +33,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
 
 
Например, мы можем предоставить текстовое описание содержимого canvas или предоставить статичное изображение динамически отображаемого содержимого. Это может выглядеть как-то так:

 
-
<canvas id="stockGraph" width="150" height="150">
+
<canvas id="stockGraph" width="150" height="150">
   current stock price: $3.15 +0.15
 </canvas>
 
@@ -56,7 +56,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
 
 
Холст изначально пустой и прозрачный. Первым делом скрипт получает доступ к контексту и отрисовывает его. Элемент {{HTMLElement("canvas")}} имеет метод getContext(), используется для получения контекста визуализации и её функции рисования. getContext() принимает один параметр, тип контекста. Для 2D графики, которая охвачена этим руководством будем использовать метку "2d".

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

 
@@ -67,7 +67,7 @@ var ctx = canvas.getContext('2d');
 
 
Ранее уже упоминалось, что в браузерах, которые не поддерживают {{HTMLElement("canvas")}} отображается запасное содержимое. Но помимо этого, определить, поддерживает ли браузер canvas, можно прямо из кода, проверив наличие метода getContext(). Код с запасным содержимым, который мы приводили Выше, становится следующим:

 
-
var canvas = document.getElementById('tutorial');
+
var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext){
   var ctx = canvas.getContext('2d');
@@ -87,7 +87,7 @@ if (canvas.getContext){
 
Примечание: вставка скрипта внутрь HTML не является хорошей практикой. Мы делаем это здесь, чтобы сделать пример короче.

 
 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
   <head>
     <title>Canvas tutorial</title>
@@ -119,7 +119,7 @@ if (canvas.getContext){
 
 
Для начала, давайте посмотрим на простой пример, который рисует два пересекающихся прямоугольника, один из которых имеет прозрачность alpha. Мы изучим, как это работает более детально в последующих примерах.

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
  <head>
   <script type="application/javascript">
diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
index 4913f93bda..c30661c80e 100644
--- a/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/drawing_shapes/index.html
@@ -41,7 +41,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
Пример создания прямоугольных фигур

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -113,7 +113,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
Например, код для рисования треугольника будет выглядеть как-то так:

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
     var ctx = canvas.getContext('2d');
@@ -153,7 +153,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
Вы можете проверить это сами, используя участок кода ниже. Просто вставьте в функцию draw(), рассмотренную ранее.

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
      var ctx = canvas.getContext('2d');
@@ -203,7 +203,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
Пример ниже рисует два треугольника, один закрашенный и другой обведён контуром.

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
     var ctx = canvas.getContext('2d');
@@ -270,7 +270,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
     var ctx = canvas.getContext('2d');
@@ -332,7 +332,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
В этом примере многократно используются квадратичные кривые Безье для рисования речевой выноски.

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -366,7 +366,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
 
В этом примере нарисовано сердце с использованием кубических кривых Безье.

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
     var ctx = canvas.getContext('2d');
@@ -414,7 +414,7 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_фигур
  Однако, нет никаких ограничений на количество или типы контуров, которые вы можете использовать для создания фигур. Давайте в этом примере объединим все вышеперечисленные  функции контуров, чтобы создать набор очень известных игровых персонажей.

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
     var ctx = canvas.getContext('2d');
@@ -521,7 +521,7 @@ function roundedRect(ctx, x, y, width, height, radius) {
  
Конструктор Path2D() возвращает вновь созданный объект Path2D  необязательно с другим путём в качестве аргумента (создаёт копию) или необязательно со строкой, состоящей из данных пути SVG path .

 
 
-
new Path2D();     // пустой path объект
+
new Path2D();     // пустой path объект
 new Path2D(path); // копирование из другого path
 new Path2D(d);    // path из SVG

 
@@ -539,7 +539,7 @@ new Path2D(d);    // path из SVG

 
В этом примере мы создаём прямоугольник и круг. Оба они сохраняются как объект Path2D, поэтому они доступны для последующего использования. С новым API Path2D несколько методов были обновлены, чтобы при необходимости принять объект Path2D для использования вместо текущего пути. Здесь stroke и fill используются с аргументом пути, например, для рисования обоих объектов на холст.

 
 
 
-
function draw() {
+
function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext){
     var ctx = canvas.getContext('2d');
@@ -574,6 +574,6 @@ new Path2D(d);    // path из SVG

 
Путь перемещается в точку (M10 10), а затем горизонтально перемещается на 80 пунктов вправо (h 80), затем на 80 пунктов вниз (v 80), затем на 80 пунктов влево (h -80), а затем обратно на start (z). 

  Этот пример можно увидеть на странице  Path2D constructor.

 
-
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

+
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

 
 
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}

diff --git a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html
index 58707876c9..4a2738bfe5 100644
--- a/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html
+++ b/files/ru/web/api/canvas_api/tutorial/drawing_text/index.html
@@ -31,16 +31,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста
 
 
Текст вставлен с использованием текущего fillStyle.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = "48px serif";
   ctx.fillText("Hello world", 10, 50);
 }

 
 
 
 
{{EmbedLiveSample("Пример_fillText", 310, 110)}}

@@ -49,16 +49,16 @@ original_slug: Web/API/Canvas_API/Tutorial/Рисование_текста
 
 
Текст вставлен с использованием текущего strokeStyle.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = "48px serif";
   ctx.strokeText("Hello world", 10, 50);
 }

 
 
 
 
{{EmbedLiveSample("Пример_strokeText", 310, 110)}}

@@ -95,7 +95,7 @@ baselines, due to glyphs extending far outside the em square." src="http://www.w
 
 
Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:

 
-
ctx.font = "48px serif";
+
ctx.font = "48px serif";
 ctx.textBaseline = "hanging";
 ctx.strokeText("Hello world!", 0, 100);
 

@@ -103,7 +103,7 @@ ctx.strokeText("Hello world!", 0, 100);
 
 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // left rectangles, rotate from canvas origin
@@ -159,9 +159,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations
 
Для поворота прямоугольника относительно его центра мы сначала смещаем начало координат, выполняем поворот, а затем выполняем обратное смещение к точке 0,0, и наконец рисуем прямоугольник.

 
 
 
 
{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

@@ -183,7 +183,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations
 
 
В этом примере мы нарисуем прямоугольники, используя разные масштабные коэффициенты.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // рисуем масштабированный прямоугольник.
@@ -201,9 +201,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations
 

 
 
 
 
{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

@@ -244,7 +244,7 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations
 
 
Пример использования transform и setTransform

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   var sin = Math.sin(Math.PI / 6);
@@ -265,9 +265,9 @@ translation_of: Web/API/Canvas_API/Tutorial/Transformations
 

 
 
 
 
{{EmbedLiveSample("Пример_использования_transform_и_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

diff --git a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
index c6793693ce..1a6a91d285 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/createlineargradient/index.html
@@ -22,7 +22,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
 
 
Синтаксис

 
-
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
+
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
 

 
 
Метод createLinearGradient() принимает четыре аргумента для определения начала и конца точек линии градиента.

@@ -55,12 +55,12 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
 
 
HTML

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

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 // Создание линейного градиента
diff --git a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
index 3ac6af2315..9bbe6aa749 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/ellipse/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse
 
 
Синтаксис

 
-
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
+
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
 

 
 
ellipse() - метод, который создаёт эллиптическую дугу с центром в точках (x, y) с радиусом radiusX и radiusY. Путь начинается от точки startAngle и заканчивается в точке endAngle, идёт по направлению, казанному в параметре (по часовой стрелке или против неё) anticlockwise .

@@ -49,12 +49,12 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse
 
 
HTML

 
-
<canvas id="canvas" width="200" height="200"></canvas>
+
<canvas id="canvas" width="200" height="200"></canvas>
 

 
 
JavaScript

 
-
const canvas = document.getElementById('canvas');
+
const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 // Рисование эллипса
@@ -80,12 +80,12 @@ ctx.stroke();
 
 
HTML

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

 
 
JavaScript

 
-
const canvas = document.getElementById('canvas');
+
const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'red';
diff --git a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
index 74b759b2b1..47d83f96e4 100644
--- a/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
+++ b/files/ru/web/api/canvasrenderingcontext2d/filltext/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText
 
 
Синтаксис

 
-
void ctx.fillText(text, x, y [, maxWidth]);
+
void ctx.fillText(text, x, y [, maxWidth]);
 

 
 
Параметры

@@ -38,12 +38,12 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText
 
 
HTML

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

 
 
JavaScript

 
-
var canvas = document.getElementById("canvas");
+
var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.font = "48px serif";
@@ -55,7 +55,7 @@ ctx.fillText("Hello world", 50, 100);
 
 
-
var CACHE_VERSION = 1;
+
var CACHE_VERSION = 1;
 var CURRENT_CACHES = {
   prefetch: 'prefetch-cache-v' + CACHE_VERSION
 };
diff --git a/files/ru/web/api/extendableevent/waituntil/index.html b/files/ru/web/api/extendableevent/waituntil/index.html
index 7adc465c72..66225a232d 100644
--- a/files/ru/web/api/extendableevent/waituntil/index.html
+++ b/files/ru/web/api/extendableevent/waituntil/index.html
@@ -19,7 +19,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil
 
 
Синтаксис

 
-
extendableEvent.waitUntil(promise);

+
extendableEvent.waitUntil(promise);

 
 
Параметры

 
@@ -33,7 +33,7 @@ translation_of: Web/API/ExtendableEvent/waitUntil
 
 
Использование waitUntil() внутри события install в service worker:

 
-
addEventListener('install', event => {
+
addEventListener('install', event => {
   const preCache = async () => {
     const cache = await caches.open('static-v1');
     return cache.addAll([
diff --git a/files/ru/web/api/file/using_files_from_web_applications/index.html b/files/ru/web/api/file/using_files_from_web_applications/index.html
index 4535edc2e2..855bd8817a 100644
--- a/files/ru/web/api/file/using_files_from_web_applications/index.html
+++ b/files/ru/web/api/file/using_files_from_web_applications/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/File/Using_files_from_web_applications
 
 
Рассмотрим следующий код:

 
-
<input type="file" id="input" multiple>

+
<input type="file" id="input" multiple>

 
 
File API делает возможным доступ к {{ domxref("FileList") }}, который содержит объекты {{ domxref("File") }}, которым соответствуют файлы, выбранные пользователем.

 
@@ -19,11 +19,11 @@ translation_of: Web/API/File/Using_files_from_web_applications
 
 
Обращение к одному выбранному файлу с использованием классической DOM-модели:

 
-
const selectedFile = document.getElementById('input').files[0];

+
const selectedFile = document.getElementById('input').files[0];

 
 
Обращение к одному выбранному файлу через jQuery:

 
-
var selectedFile = $('#input').get(0).files[0];
+
var selectedFile = $('#input').get(0).files[0];
 
 var selectedFile = $('#input')[0].files[0];

 
@@ -35,7 +35,7 @@ var selectedFile = $('#input')[0].files[0];

 
 
Также возможно (но не обязательно) получить доступ к {{DOMxRef("FileList")}} через событие change. Нужно использовать {{DOMxRef("EventTarget.addEventListener()")}} чтобы добавить обработчик события change, как показано здесь:

 
-
const inputElement = document.getElementById("input");
+
const inputElement = document.getElementById("input");
 inputElement.addEventListener("change", handleFiles, false);
 function handleFiles() {
   const fileList = this.files; /* now you can work with the file list */
@@ -43,7 +43,7 @@ function handleFiles() {
 
 
Обработчик события change можно назначить атрибутом элемента:

 
-
<input type="file" id="input" onchange="handleFiles(this.files)">

+
<input type="file" id="input" onchange="handleFiles(this.files)">

 
 
Когда пользователь выбирает файл, функция handleFiles() будет вызвана с объектом {{ domxref("FileList") }}, который состоит из объектов {{ domxref("File") }}, представляющих файлы, выбранные пользователем.

 
@@ -51,11 +51,11 @@ function handleFiles() {
 
 
Объект {{ domxref("FileList") }} предоставляемый классическим DOM содержит все файлы выбранные пользователем, каждый из которых представляет собой объект {{ domxref("File") }}. Вы можете определить сколько файлов выбрал пользователь проверяя значение атрибута длины (length) списка файлов:

 
-
var numFiles = files.length;

+
var numFiles = files.length;

 
 
Конкретные объекты {{ domxref("File") }} могут быть получены обращением к списку файлов как к массиву:

 
-
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
   var file = files[i];
   ..
 }
@@ -78,7 +78,7 @@ function handleFiles() {
 
 
Следующий пример показывает возможное использование свойства size:

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
@@ -118,12 +118,12 @@ function updateSize() {
 
 
Рассмотрим следующую разметку HTML:

 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
 <a href="#" id="fileSelect">Select some files</a>

 
 
Код, обрабатывающий событие click, может выглядеть следующим образом:

 
-
var fileSelect = document.getElementById("fileSelect"),
+
var fileSelect = document.getElementById("fileSelect"),
   fileElem = document.getElementById("fileElem");
 
 fileSelect.addEventListener("click", function (e) {
@@ -142,7 +142,7 @@ fileSelect.addEventListener("click", function (e) {
 
 
Рассмотрим следующую разметку HTML:

 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
 <label for="fileElem">Select some files</label>

 
 
В данном случае нет необходимости добавлять код JavaScript для того, чтобы вызвать fileElem.click(). Также в данном случае вы можете стилизовать элемент label так, как пожелаете.

@@ -153,7 +153,7 @@ fileSelect.addEventListener("click", function (e) {
 
 
На первом шаге необходимо определить зону, в которую будут перетаскиваться файлы. В каждом конкретном случае часть содержимого вашей страницы, ответственная за приёмку перетаскиваемых файлов, может варьироваться в зависимости от дизайна приложения, тем не менее, заставить элемент воспринимать события перетаскивания достаточно просто:

 
-
var dropbox;
+
var dropbox;
 
 dropbox = document.getElementById("dropbox");
 dropbox.addEventListener("dragenter", dragenter, false);
@@ -165,7 +165,7 @@ dropbox.addEventListener("drop", drop, false);
 
 
В нашем случае нет необходимости делать что-то особенное при обработке событий dragenter и dragover, таким образом, обе функции, ответственные за обработку данных событий, довольно просты. Они останавливают распространение события и предотвращают возникновение действия по умолчанию:

 
-
function dragenter(e) {
+
function dragenter(e) {
   e.stopPropagation();
   e.preventDefault();
 }
@@ -178,7 +178,7 @@ function dragover(e) {
 
 
Вся настоящая магия происходит в функции drop():

 
-
function drop(e) {
+
function drop(e) {
   e.stopPropagation();
   e.preventDefault();
 
@@ -195,7 +195,7 @@ function dragover(e) {
 
 
Представим, что вы разрабатываете очередной веб-сайт для обмена фотографиями и вы хотите использовать возможности HTML5 для предварительного просмотра изображений перед тем, как пользователь загрузит их. Вы можете создать input элемент или зону перетаскивания, как обсуждалось ранее, и вызвать такую функцию, как handleFiles() ниже.

 
-
function handleFiles(files) {
+
function handleFiles(files) {
   for (var i = 0; i < files.length; i++) {
     var file = files[i];
 
@@ -225,11 +225,11 @@ function dragover(e) {
 
 
Когда у вас есть объект {{ domxref("File") }}, на который вы хотите ссылаться по URL из HTML, вы можете создать для этого объект URL, такой как этот:

 
-
var objectURL = window.URL.createObjectURL(fileObj);

+
var objectURL = window.URL.createObjectURL(fileObj);

 
 
URL объекта – это строка, идентифицирующая объект файла {{ domxref("File") }}. Каждый раз при вызове {{ domxref("window.URL.createObjectURL()") }}, создаётся новый уникальный объект URL, даже если вы уже создали объект URL для этого файла. Каждый из них должен быть освобождён. В то время как они освобождаются автоматически когда документ выгружается, если ваша страница использует их динамически, вы должны освободить их явно вызовом {{ domxref("window.URL.revokeObjectURL()") }}:

 
-
window.URL.revokeObjectURL(objectURL);

+
window.URL.revokeObjectURL(objectURL);

 
 
Пример: Использование URL объектов для отображения изображений

 
@@ -237,7 +237,7 @@ function dragover(e) {
 
 
HTML, который представляет интерфейс, выглядит так:

 
-
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
 <a href="#" id="fileSelect">Select some files</a>
 <div id="fileList">
   <p>No files selected!</p>
@@ -248,7 +248,7 @@ function dragover(e) {
 
 
Метод handleFiles() может быть реализован таким образом:

 
-
window.URL = window.URL || window.webkitURL;
+
window.URL = window.URL || window.webkitURL;
 
 var fileSelect = document.getElementById("fileSelect"),
     fileElem = document.getElementById("fileElem"),
@@ -312,7 +312,7 @@ function handleFiles(files) {
 
 
Продолжая пример с кодом, который строил эскизы в предыдущем примере, напомним, что каждому изображению эскиза присвоен класс CSS class obj, с соответствующим {{ domxref("File") }}, прикреплённым в атрибут file. Это позволяет нам очень просто выбрать все изображения, которые пользователь выбрал для загрузки используя {{ domxref("Document.querySelectorAll()") }}, как показано здесь:

 
-
function sendFiles() {
+
function sendFiles() {
   var imgs = document.querySelectorAll(".obj");
 
   for (var i = 0; i < imgs.length; i++) {
@@ -327,7 +327,7 @@ function handleFiles(files) {
 
 
Функция FileUpload принимает на вход 2 параметра: элемент изображения и файл, из которого нужно читать данные изображения.

 
-
function FileUpload(img, file) {
+
function FileUpload(img, file) {
   const reader = new FileReader();
   this.ctrl = createThrobber(img);
   const xhr = new XMLHttpRequest();
@@ -369,7 +369,7 @@ function handleFiles(files) {
 
 
Асинхронная обработка процесса загрузки

 
-
<?php
+
<?php
 if (isset($_FILES['myFile'])) {
     // Example:
     move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
@@ -431,12 +431,12 @@ if (isset($_FILES['myFile'])) {
 
 
В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false {{non-standard_inline()}}.

 
-
<iframe id="viewer">
+
<iframe id="viewer">
 

 
 
А здесь изменение атрибута src:

 
-
var obj_url = window.URL.createObjectURL(blob);
+
var obj_url = window.URL.createObjectURL(blob);
 var iframe = document.getElementById('viewer');
 iframe.setAttribute('src', obj_url);
 window.URL.revokeObjectURL(obj_url);

@@ -445,7 +445,7 @@ window.URL.revokeObjectURL(obj_url);

 
 
Вы можете таким же образом работать с файлами в других форматах. Ниже приведён пример как загружается видео:

 
-
var video = document.getElementById('video');
+
var video = document.getElementById('video');
 var obj_url = window.URL.createObjectURL(blob);
 video.src = obj_url;
 video.play()
diff --git a/files/ru/web/api/filereader/index.html b/files/ru/web/api/filereader/index.html
index c84599323b..d9ece3dab0 100644
--- a/files/ru/web/api/filereader/index.html
+++ b/files/ru/web/api/filereader/index.html
@@ -25,7 +25,7 @@ translation_of: Web/API/FileReader
 
 
Конструктор

 
-
FileReader FileReader();

+
FileReader FileReader();

 
 
Более детально, с примерами см. использование файлов в веб-приложениях.

 
diff --git a/files/ru/web/api/formdata/entries/index.html b/files/ru/web/api/formdata/entries/index.html
index d77ddfb800..df0501ee8c 100644
--- a/files/ru/web/api/formdata/entries/index.html
+++ b/files/ru/web/api/formdata/entries/index.html
@@ -20,7 +20,7 @@ translation_of: Web/API/FormData/entries
 
 
Синтаксис

 
-
formData.entries();

+
formData.entries();

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

 
@@ -28,7 +28,7 @@ translation_of: Web/API/FormData/entries
 
 
Пример

 
-
// Create a test FormData object
+
// Create a test FormData object
 var formData = new FormData();
 formData.append('key1', 'value1');
 formData.append('key2', 'value2');
@@ -41,7 +41,7 @@ for(var pair of formData.entries()) {
 
 
Результат:

 
-
key1, value1
+
key1, value1
 key2, value2

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

diff --git a/files/ru/web/api/formdata/getall/index.html b/files/ru/web/api/formdata/getall/index.html
index 747e25d5b4..4247417aca 100644
--- a/files/ru/web/api/formdata/getall/index.html
+++ b/files/ru/web/api/formdata/getall/index.html
@@ -13,7 +13,7 @@ translation_of: Web/API/FormData/getAll
 
 
Синтаксис

 
-
formData.getAll(name);

+
formData.getAll(name);

 
 
Параметры

 
@@ -30,16 +30,16 @@ translation_of: Web/API/FormData/getAll
 
 
Эта строка создаст пустой объект FormData:

 
-
var formData = new FormData();

+
var formData = new FormData();

 
 
Можем добавить два username при помощи {{domxref("FormData.append")}}:

 
-
formData.append('username', 'Борис');
+
formData.append('username', 'Борис');
 formData.append('username', 'Кирилл');

 
 
Тогда метод getAll() вернёт оба значения username в виде массива:

 
-
formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]

+
formData.getAll('username'); // Вернёт ["Борис", "Кирилл"]

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

 
diff --git a/files/ru/web/api/gamepad/axes/index.html b/files/ru/web/api/gamepad/axes/index.html
index eb16be54c3..b4ed1fa5ba 100644
--- a/files/ru/web/api/gamepad/axes/index.html
+++ b/files/ru/web/api/gamepad/axes/index.html
@@ -11,11 +11,11 @@ translation_of: Web/API/Gamepad/axes
 
 
Синтаксис

 
-
readonly    attribute double[]            axes;

+
readonly    attribute double[]            axes;

 
 
Пример

 
-
function gameLoop() {
+
function gameLoop() {
   if(navigator.webkitGetGamepads) {
     var gp = navigator.webkitGetGamepads()[0];
   } else {
diff --git a/files/ru/web/api/gamepad/buttons/index.html b/files/ru/web/api/gamepad/buttons/index.html
index 3c49e81c56..ded4be8d3c 100644
--- a/files/ru/web/api/gamepad/buttons/index.html
+++ b/files/ru/web/api/gamepad/buttons/index.html
@@ -18,13 +18,13 @@ translation_of: Web/API/Gamepad/buttons
 
 
Синтаксис

 
-
readonly    attribute GamepadButton[]     buttons;

+
readonly    attribute GamepadButton[]     buttons;

 
 
Пример

 
 
Приведённый код взят из моего (автора статьи) демо Gamepad API button (вы можете  Посмотреть демо, и посмотреть исходники на GitHub). Важно — в Chrome Navigator.getGamepads необходимо установить префикс webkit, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox Navigator.getGamepads нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов GamepadButton; Свойство GamepadButton.value или GamepadButton.pressed необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.

 
-
function gameLoop() {
+
function gameLoop() {
   if(navigator.webkitGetGamepads) {
     var gp = navigator.webkitGetGamepads()[0];
 
diff --git a/files/ru/web/api/gamepad/mapping/index.html b/files/ru/web/api/gamepad/mapping/index.html
index e52f1c454f..4c1cf9847f 100644
--- a/files/ru/web/api/gamepad/mapping/index.html
+++ b/files/ru/web/api/gamepad/mapping/index.html
@@ -11,11 +11,11 @@ translation_of: Web/API/Gamepad/mapping
 
 
Синтаксис

 
-
readonly    attribute DOMString           mapping;

+
readonly    attribute DOMString           mapping;

 
 
Пример

 
-
var gp = navigator.getGamepads()[0];
+
var gp = navigator.getGamepads()[0];
 console.log(gp.mapping);

 
 
Значение

diff --git a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
index b1f461ee50..1c38250b72 100644
--- a/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
+++ b/files/ru/web/api/gamepad_api/using_the_gamepad_api/index.html
@@ -19,7 +19,7 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
 
 
Вы можете использовать  {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} как в примере:

 
-
window.addEventListener("gamepadconnected", function(e) {
+
window.addEventListener("gamepadconnected", function(e) {
   console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
     e.gamepad.index, e.gamepad.id,
     e.gamepad.buttons.length, e.gamepad.axes.length);
@@ -32,14 +32,14 @@ translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
 
 
When a gamepad is disconnected, and if a page has previously received data for that gamepad (e.g. {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }}), a second event is dispatched to the focused window, {{ event("gamepaddisconnected") }}:

 
-
window.addEventListener("gamepaddisconnected", function(e) {
+
window.addEventListener("gamepaddisconnected", function(e) {
   console.log("Gamepad disconnected from index %d: %s",
     e.gamepad.index, e.gamepad.id);
 });

 
 
The gamepad's {{domxref("Gamepad.index", "index")}} property will be unique per-device connected to the system, even if multiple controllers of the same type are used. The index property also functions as the index into the {{jsxref("Array")}} returned by {{ domxref("Navigator.getGamepads()") }}.

 
-
var gamepads = {};
+
var gamepads = {};
 
 function gamepadHandler(event, connecting) {
   var gamepad = event.gamepad;
@@ -67,7 +67,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f
 
 
The {{domxref("Navigator.getGamepads()")}} method returns an array of all devices currently visible to the webpage, as {{ domxref("Gamepad") }} objects (the first value is always null, so null will be returned if there are no gamepads connected.) This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:

 
-
window.addEventListener("gamepadconnected", function(e) {
+
window.addEventListener("gamepadconnected", function(e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
   console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
     gp.index, gp.id,
@@ -101,7 +101,7 @@ window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, f
 
 
To start with, we declare some variables: The gamepadInfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the ID for requestAnimation Frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} and {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} cross browser forks.

 
-
var gamepadInfo = document.getElementById("gamepad-info");
+
var gamepadInfo = document.getElementById("gamepad-info");
 var ball = document.getElementById("ball");
 var start;
 var a = 0;
@@ -110,7 +110,7 @@ var b = 0;
 
 
Next we use the {{domxref("Window/gamepadconnected_event", "gamepadconnected")}} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads()") }}[0], print information about the gamepad into our gamepad info div, and fire the gameLoop() function that starts the whole ball movement process up.

 
-
window.addEventListener("gamepadconnected", function(e) {
+
window.addEventListener("gamepadconnected", function(e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
   gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
 
@@ -119,7 +119,7 @@ var b = 0;
 
 
Now we use the {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} event to check if the gamepad is disconnected again. If so, we stop the {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} loop (see below) and revert the gamepad information back to what it was originally.

 
-
window.addEventListener("gamepaddisconnected", function(e) {
+
window.addEventListener("gamepaddisconnected", function(e) {
   gamepadInfo.innerHTML = "Waiting for gamepad.";
 
   cancelRequestAnimationFrame(start);
@@ -127,7 +127,7 @@ var b = 0;
 
 
Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval()") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval()") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads()") }} is implemented with a webkit prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards compatibility.

 
-
var interval;
+
var interval;
 
 if (!('ongamepadconnected' in window)) {
   // No gamepad events available, poll instead.
@@ -151,7 +151,7 @@ function pollGamepads() {
 
 
After all this is done, we use our requestAnimationFrame() to request the next animation frame, running gameLoop() again.

 
-
function buttonPressed(b) {
+
function buttonPressed(b) {
   if (typeof(b) == "object") {
     return b.pressed;
   }
@@ -186,7 +186,7 @@ function gameLoop() {
 
 
This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} and {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} events in order to display the state of all gamepads connected to the system. You can find a working demo and look at the full source code on Github.

 
-
var haveEvents = 'ongamepadconnected' in window;
+
var haveEvents = 'ongamepadconnected' in window;
 var controllers = {};
 
 function connecthandler(e) {
diff --git a/files/ru/web/api/gamepadbutton/index.html b/files/ru/web/api/gamepadbutton/index.html
index e29c99949d..9dc284725e 100644
--- a/files/ru/web/api/gamepadbutton/index.html
+++ b/files/ru/web/api/gamepadbutton/index.html
@@ -26,7 +26,7 @@ translation_of: Web/API/GamepadButton
 
 
Приведённый код взят из моего (автора статьи) демо Gamepad API button (вы можете  Посмотреть демо, и посмотреть исходники на GitHub). Важно — в Chrome {{domxref("Navigator.getGamepads")}} необходимо установить префикс webkit, и значения кнопки будут представлять из себя массив дробных чисел, тогда как в  Firefox {{domxref("Navigator.getGamepads")}} нет необходимости устанавливать префикс, и значения будут представлять собой массив  объектов {{domxref("GamepadButton")}}; Свойство {{domxref("GamepadButton.value")}} или {{domxref("GamepadButton.pressed")}} необходимо для получения состояния кнопки, в зависимости от от типа кнопки. В данном простом примере обрабатывается оба вида кнопок.

 
-
function gameLoop() {
+
function gameLoop() {
   if(navigator.webkitGetGamepads) {
     var gp = navigator.webkitGetGamepads()[0];
 
diff --git a/files/ru/web/api/gamepadbutton/pressed/index.html b/files/ru/web/api/gamepadbutton/pressed/index.html
index 999b15582d..f97f697ab8 100644
--- a/files/ru/web/api/gamepadbutton/pressed/index.html
+++ b/files/ru/web/api/gamepadbutton/pressed/index.html
@@ -9,12 +9,12 @@ translation_of: Web/API/GamepadButton/pressed
 
 
Синтаксис

 
-
var isPressed = navigator.getGamepads()[0].pressed;
+
var isPressed = navigator.getGamepads()[0].pressed;
 

 
 
Пример

 
-
var gp = navigator.getGamepads()[0]; // Get the first gamepad object
+
var gp = navigator.getGamepads()[0]; // Get the first gamepad object
 
 if(gp.buttons[0].pressed == true) {
   // respond to button being pressed
diff --git a/files/ru/web/api/gamepadbutton/value/index.html b/files/ru/web/api/gamepadbutton/value/index.html
index cf0f8274f9..27ab35d435 100644
--- a/files/ru/web/api/gamepadbutton/value/index.html
+++ b/files/ru/web/api/gamepadbutton/value/index.html
@@ -11,11 +11,11 @@ translation_of: Web/API/GamepadButton/value
 
 
Синтаксис

 
-
    readonly    attribute double  value;

+
    readonly    attribute double  value;

 
 
Пример

 
-
var gp = navigator.getGamepads()[0];
+
var gp = navigator.getGamepads()[0];
 
 if(gp.buttons[0].value > 0) {
   // respond to analog button being pressed in
diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html
index 7b571592f5..04de1619ca 100644
--- a/files/ru/web/api/globaleventhandlers/onkeydown/index.html
+++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/GlobalEventHandlers/onkeydown
 
 
Синтаксис

 
-
element.onkeydown = event handling code
+
element.onkeydown = event handling code
 

 
 
Значение

@@ -28,12 +28,12 @@ translation_of: Web/API/GlobalEventHandlers/onkeydown
 
 
HTML

 
-
<input>
+
<input>
 <p id="log"></p>

 
 
JavaScript

 
-
const input = document.querySelector('input');
+
const input = document.querySelector('input');
 const log = document.getElementById('log');
 
 input.onkeydown = logKey;
diff --git a/files/ru/web/api/history/go/index.html b/files/ru/web/api/history/go/index.html
index 2a64e0eb93..f571cd8cfe 100644
--- a/files/ru/web/api/history/go/index.html
+++ b/files/ru/web/api/history/go/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/History/go
 
 
Синтаксис

 
-
history.go([delta])

+
history.go([delta])

 
 
Параметры

 
@@ -30,23 +30,23 @@ translation_of: Web/API/History/go
 
 
Перемещение на 1 страницу назад (аналог вызова {{domxref("History.back", "back()")}}):

 
-
history.go(-1)

+
history.go(-1)

 
 
Перемещение на страницу вперёд, как {{domxref("History.forward", "forward()")}}:

 
-
history.go(1)

+
history.go(1)

 
 
Перемещение на 2 страницы вперёд:

 
-
history.go(2);

+
history.go(2);

 
 
Перемещение на 2 страницы назад:

 
-
history.go(-2);

+
history.go(-2);

 
 
Также, оба этих вызова перезагрузят страницу:

 
-
history.go();
+
history.go();
 history.go(0);

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

diff --git a/files/ru/web/api/history/pushstate/index.html b/files/ru/web/api/history/pushstate/index.html
index 014e34ae6f..df5d6fc489 100644
--- a/files/ru/web/api/history/pushstate/index.html
+++ b/files/ru/web/api/history/pushstate/index.html
@@ -14,7 +14,7 @@ translation_of: Web/API/History/pushState
 
 
Синтаксис

 
-
history.pushState(state, title[, url])
+
history.pushState(state, title[, url])
 

 
 
Параметры

@@ -57,7 +57,7 @@ translation_of: Web/API/History/pushState
 
 
JavaScript

 
-
const state = { 'page_id': 1, 'user_id': 5 }
+
const state = { 'page_id': 1, 'user_id': 5 }
 const title = ''
 const url = 'hello-world.html'
 
diff --git a/files/ru/web/api/history/replacestate/index.html b/files/ru/web/api/history/replacestate/index.html
index f9d79dd43d..ee54ccefa7 100644
--- a/files/ru/web/api/history/replacestate/index.html
+++ b/files/ru/web/api/history/replacestate/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/History/replaceState
 
 
Синтаксис

 
-
history.replaceState(stateObj, title, [url])

+
history.replaceState(stateObj, title, [url])

 
 
Параметры

 
@@ -26,7 +26,7 @@ translation_of: Web/API/History/replaceState
 
 
Предположим, на странице http://mozilla.org/foo.html выполняется следующий JavaScript-код:

 
-
let stateObj = { foo: "bar" }
+
let stateObj = { foo: "bar" }
 history.pushState(stateObj, "page 2", "bar.html")
 

 
@@ -34,7 +34,7 @@ history.pushState(stateObj, "page 2", "bar.html")
 
 
Далее, предположим, на странице http://mozilla.org/bar.html выполняется JavaScript-код:

 
-
history.replaceState(stateObj, "page 3", "bar2.html")
+
history.replaceState(stateObj, "page 3", "bar2.html")
 

 
 
Это приведёт к тому, что в URL-строке отобразится адрес http://mozilla.org/bar2.html, но браузер не станет сразу загружать bar2.html и даже не станет проверять наличие этой страницы bar2.html.

diff --git a/files/ru/web/api/history/state/index.html b/files/ru/web/api/history/state/index.html
index 82b65cd3f7..aba004c406 100644
--- a/files/ru/web/api/history/state/index.html
+++ b/files/ru/web/api/history/state/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/History/state
 
 
Синтаксис

 
-
const currentState = history.state

+
const currentState = history.state

 
 
Значение

 
@@ -21,7 +21,7 @@ translation_of: Web/API/History/state
 
 
Код, приведённый ниже, выводит в консоль значение history.state до и после применения метода {{domxref("History.pushState","pushState()")}}, который записывает значение в историю.

 
-
// Выведет null потому что мы пока не изменяли стек истории
+
// Выведет null потому что мы пока не изменяли стек истории
 console.log(`History.state before pushState: ${history.state}`);
 
 // Теперь запишем какое-нибудь значение в стек
diff --git a/files/ru/web/api/history_api/index.html b/files/ru/web/api/history_api/index.html
index ed100ee574..580c8c833b 100644
--- a/files/ru/web/api/history_api/index.html
+++ b/files/ru/web/api/history_api/index.html
@@ -19,13 +19,13 @@ translation_of: Web/API/History_API
 
 
Чтобы переместиться назад по истории:

 
-
window.history.back();
+
window.history.back();
 

 
 
Данный метод работает так, будто пользователь нажал на кнопку "Назад" на панели браузера.

  Похожим образом можно переместиться вперёд (как если бы пользователь нажал на кнопку "Вперёд"):

 
-
window.history.forward();
+
window.history.forward();
 

 
 
Перемещение к определённой странице в истории

@@ -34,25 +34,25 @@ translation_of: Web/API/History_API
 
 
Вернуться на одну страницу назад (равноценно вызову {{DOMxRef("History.back","back()")}}):

 
-
window.history.go(-1);
+
window.history.go(-1);
 

 
 
Перейти на одну страницу вперёд (равноценно вызову {{DOMxRef("History.forward","forward()")}})

 
-
window.history.go(1);
+
window.history.go(1);
 

 
 
По такому же принципу, можно перемещаться вперёд на 2 страницы, передавая аргумент 2, и так далее.

 
 
Кроме того, метод go() можно использовать для обновления текущей страницы, передавая аргумент 0 или вызывая его без аргументов:

 
-
// Обе следующих инструкции обновляют текущую страницу
+
// Обе следующих инструкции обновляют текущую страницу
 window.history.go(0)
 window.history.go()

 
 
Узнать количество страниц, которые находятся в стеке истории, можно, получив значение свойства length:

 
-
var numberOfEntries = window.history.length;
+
var numberOfEntries = window.history.length;
 

 
 
Интерфейсы

@@ -66,7 +66,7 @@ window.history.go()

 
 
В следующем примере свойству onpopstate назначается обработчик. А затем приводятся некоторые методы объекта истории для добавления, замени и перемещения по истории текущей вкладки браузера

 
-
window.onpopstate = function(event) {
+
window.onpopstate = function(event) {
   alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
 }
 
diff --git a/files/ru/web/api/history_api/working_with_the_history_api/index.html b/files/ru/web/api/history_api/working_with_the_history_api/index.html
index 46f6fbafd9..9027e6b13e 100644
--- a/files/ru/web/api/history_api/working_with_the_history_api/index.html
+++ b/files/ru/web/api/history_api/working_with_the_history_api/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/History_API/Working_with_the_History_API
 
 
Предположим, на странице http://mozilla.org/foo.html выполняется следующий JavaScript-код:

 
-
let stateObj = {
+
let stateObj = {
     foo: "bar",
 }
 
@@ -90,7 +90,7 @@ history.pushState(stateObj, "page 2", "bar.html")
 
 
Предположим, на странице http://mozilla.org/foo.html выполняется следующий JavaScript-код:

 
-
let stateObj = { foo: "bar" }
+
let stateObj = { foo: "bar" }
 history.pushState(stateObj, "page 2", "bar.html")
 

 
@@ -98,7 +98,7 @@ history.pushState(stateObj, "page 2", "bar.html")
 
 
Далее, предположим, на странице http://mozilla.org/bar.html выполняется JavaScript-код:

 
-
history.replaceState(stateObj, "page 3", "bar2.html")
+
history.replaceState(stateObj, "page 3", "bar2.html")
 

 
 
Это приведёт к тому, что в URL-строке отобразится адрес http://mozilla.org/bar2.html, но браузер не станет сразу загружать bar2.html и даже не станет проверять наличие этой страницы bar2.html.

@@ -117,7 +117,7 @@ history.pushState(stateObj, "page 2", "bar.html")
 
 
С помощью свойства {{DOMxRef("History.state","history.state")}} можно прочитать состояние текущей записи в истории, не дожидаясь события popstate, например:

 
-
let currentState = history.state
+
let currentState = history.state
 

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

diff --git a/files/ru/web/api/htmlaudioelement/audio/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html
index 57abf54f62..d118155c00 100644
--- a/files/ru/web/api/htmlaudioelement/audio/index.html
+++ b/files/ru/web/api/htmlaudioelement/audio/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/HTMLAudioElement/Audio()
 
 
Синтаксис

 
-
audioObj = new Audio(url);

+
audioObj = new Audio(url);

 
 
Параметры

 
@@ -44,7 +44,7 @@ original_slug: Web/API/HTMLAudioElement/Audio()
 
 
Лучший подход, основанный на событии:

 
-
myAudioElement.addEventListener("canplaythrough", event => {
+
myAudioElement.addEventListener("canplaythrough", event => {
   /* аудио может быть воспроизведено; проиграть, если позволяют разрешения */
   myAudioElement.play();
 });

diff --git a/files/ru/web/api/htmlcanvaselement/capturestream/index.html b/files/ru/web/api/htmlcanvaselement/capturestream/index.html
index e7b9eb4481..983a0ef2f7 100644
--- a/files/ru/web/api/htmlcanvaselement/capturestream/index.html
+++ b/files/ru/web/api/htmlcanvaselement/capturestream/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream
 
 
Синтаксис

 
-
MediaStream = canvas.captureStream(frameRate);
+
MediaStream = canvas.captureStream(frameRate);
 

 
 
Параметры

@@ -32,7 +32,7 @@ translation_of: Web/API/HTMLCanvasElement/captureStream
 
 
Пример

 
-
// Поиск элемента canvas для захвата
+
// Поиск элемента canvas для захвата
 var canvasElt = document.querySelector("canvas");
 
 // Получение потока
diff --git a/files/ru/web/api/htmlelement/offsetleft/index.html b/files/ru/web/api/htmlelement/offsetleft/index.html
index aace6b67d7..ec44a76d10 100644
--- a/files/ru/web/api/htmlelement/offsetleft/index.html
+++ b/files/ru/web/api/htmlelement/offsetleft/index.html
@@ -13,14 +13,14 @@ translation_of: Web/API/HTMLElement/offsetLeft
 
 
Syntax

 
-
left = element.offsetLeft;
+
left = element.offsetLeft;
 

 
 
left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element.

 
 
Example

 
-
var colorTable = document.getElementById("t1");
+
var colorTable = document.getElementById("t1");
 var tOLeft = colorTable.offsetLeft;
 
 if (tOLeft > 5) {
@@ -32,7 +32,7 @@ if (tOLeft > 5) {
 
 
Image:offsetLeft.jpg

 
-
<div style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
+
<div style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
   <span>Short span. </span>
   <span id="longspan">Long span that wraps within this div.</span>
 </div>
diff --git a/files/ru/web/api/htmlformelement/elements/index.html b/files/ru/web/api/htmlformelement/elements/index.html
index dbd4e1ddcd..a1e9d8d068 100644
--- a/files/ru/web/api/htmlformelement/elements/index.html
+++ b/files/ru/web/api/htmlformelement/elements/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/HTMLFormElement/elements
 
 
Syntax

 
-
nodeList = HTMLFormElement.elements
+
nodeList = HTMLFormElement.elements
 

 
 
Value

@@ -34,13 +34,13 @@ translation_of: Web/API/HTMLFormElement/elements
 
 
In this example, we see how to obtain the list of form controls as well as how to access its members by index and by name or ID.

 
-
<form id="my-form">
+
<form id="my-form">
   <input type="text" name="username">
   <input type="text" name="full-name">
   <input type="password" name="password">
 </form>

 
-
var inputs = document.getElementById("my-form").elements;
+
var inputs = document.getElementById("my-form").elements;
 var inputByIndex = inputs[0];
 var inputByName = inputs["username"];
 

@@ -49,7 +49,7 @@ var inputByName = inputs["username"];
 
 
This example gets the form's element list, then iterates over the list, looking for {{HTMLElement("input")}} elements of type "text" so that some form of processing can be performed on them.

 
-
var inputs = document.getElementById("my-form").elements;
+
var inputs = document.getElementById("my-form").elements;
 
 // Iterate over the form controls
 for (i = 0; i < inputs.length; i++) {
@@ -62,7 +62,7 @@ for (i = 0; i < inputs.length; i++) {
 
 
Disabling form controls

 
-
var inputs = document.getElementById("my-form").elements;
+
var inputs = document.getElementById("my-form").elements;
 
 // Iterate over the form controls
 for (i = 0; i < inputs.length; i++) {
diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html
index 50d9bcfc9b..82045136cf 100644
--- a/files/ru/web/api/htmlmediaelement/abort_event/index.html
+++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html
@@ -30,7 +30,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event
 
 
Примеры

 
-
const video = document.querySelector('video');
+
const video = document.querySelector('video');
 const videoSrc = 'https://path/to/video.webm';
 
 video.addEventListener('abort', () => {
diff --git a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
index 8c3ac3595c..c4cab59903 100644
--- a/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
+++ b/files/ru/web/api/intersection_observer_api/timing_element_visibility/index.html
@@ -25,7 +25,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Структура Web-приложений не очень сложна. Мы будем использовать CSS Grid для стилизации и макетирования, так что всё достаточно очевидно:

 
-
<div class="wrapper">
+
<div class="wrapper">
   <header>
     <h1>A Fake Blog</h1>
     <h2>Showing Intersection Observer in action!</h2>
@@ -55,7 +55,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Мы создаём стили для {{HTMLElement("body")}} и {{HTMLElement("main")}} так, чтобы определить фоновый цвет и сеточную систему.

 
-
body {
+
body {
   font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
   background-color: aliceblue;
 }
@@ -83,7 +83,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Заголовок достаточно прост, так как в нашем примере он содержит небольшой текст.

 
-
header {
+
header {
   grid-column: 1 / -1;
   grid-row: 1;
   background-color: aliceblue;
@@ -95,7 +95,7 @@ translation_of: Web/API/Intersection_Observer_API/Timing_element_visibility
 
 
Боковая панель используется для показа ссылок на другие страницы приложения. Ни одна из них не будет работать в нашем примере. Вся боковая панель нужна, чтобы просто приблизить внешний вид приложения к реальному блогу. Боковая панель создаётся с помощью элемента {{HTMLElement("aside")}}.

 
-
aside {
+
aside {
   grid-column: 1;
   grid-row: 2;
   background-color: cornsilk;
@@ -120,7 +120,7 @@ aside ul li a {
 
 
Контент будет содержаться в элементе {{HTMLElement("main")}}.

 
-
main {
+
main {
   grid-column: 2;
   grid-row: 2;
   margin: 0;
@@ -134,7 +134,7 @@ aside ul li a {
 
 
Каждая статья состоит из элемента {{HTMLElement("article")}}:

 
-
article {
+
article {
   background-color: white;
   padding: 6px;
 }
@@ -153,7 +153,7 @@ article h2 {
 
 
Наконец, рекламные блоки. Нужно заметить, что каждый отдельный рекламный блок может изменять свои стили динамически (мы увидим это позже):

 
-
.ad {
+
.ad {
   height: 96px;
   padding: 6px;
   border-color: #555;
@@ -187,7 +187,7 @@ article h2 {
 
 
Перейдём к JavaScript-коду, который всё оживит. Начнём с глобальных переменных:

 
-
let contentBox;
+
let contentBox;
 
 let nextArticleID = 1;
 let visibleAds = new Set();
@@ -217,7 +217,7 @@ let refreshIntervalID = 0;

 
 
Для первичного запуска приложения мы вызовем функцию startup():

 
-
window.addEventListener("load", startup, false);
+
window.addEventListener("load", startup, false);
 
 function startup() {
   contentBox = document.querySelector("main");
@@ -253,7 +253,7 @@ function startup() {
 
 
Давайте рассмотрим обработчик события {{event("visibilitychange")}}. Это событие срабатывает, когда документ становится видим или невидим. Как правило, это случается, когда пользователь переключается между табами. Так как Intersection Observer отслеживает только перекрытия элемента с корневым элементом, нам необходимо отдельно позаботиться о детекции видимости документа. Для этого мы используем Page Visibility API.

 
-
function handleVisibilityChange() {
+
function handleVisibilityChange() {
   if (document.hidden) {
     if (!previouslyVisibleAds) {
       previouslyVisibleAds = visibleAds;
@@ -282,7 +282,7 @@ function startup() {
 
 
При каждой итерации в браузерном event loop, каждый наблюдатель  {{domxref("IntersectionObserver")}} проверяет, не прошёл ли какой-либо из элементов-целей через пороговые значения наблюдателя.  Для каждого наблюдателя список таких целей собирается в один список и отправляется в колбэк-функцию наблюдателя. Каждый элемент списка - это {{domxref("IntersectionObserverEntry")}} объект. В нашем приложении intersectionCallback() выглядит так:

 
-
function intersectionCallback(entries) {
+
function intersectionCallback(entries) {
   entries.forEach(function(entry) {
     let adBox = entry.target;
 
@@ -308,7 +308,7 @@ function startup() {
 
 
Каждую секунду у нас срабатывает интервал handleRefreshInterval(), который мы задали в функции startup(). Главная задача этого интервала - обновлять таймеры каждую секунду и перерисовывать значение таймеров.

 
-
function handleRefreshInterval() {
+
function handleRefreshInterval() {
   let redrawList = [];
 
   visibleAds.forEach(function(adBox) {
@@ -339,7 +339,7 @@ function startup() {
 
 
Ранее мы уже видели, что если нам нужно обновить общее время видимости рекламы - мы вызываем функцию updateAdTimer(). Эта функция принимает в качестве аргумента объект {{domxref("HTMLDivElement")}}.

 
-
function updateAdTimer(adBox) {
+
function updateAdTimer(adBox) {
   let lastStarted = adBox.dataset.lastViewStarted;
   let currentTime = performance.now();
 
@@ -373,7 +373,7 @@ function startup() {
 
 
Внутри каждого рекламного блока мы отображаем текущее значение общего времени видимости в формате мин:сек. Для этого мы передаём в функцию drawAdTimer контейнер:

 
-
function drawAdTimer(adBox) {
+
function drawAdTimer(adBox) {
   let timerBox = adBox.querySelector(".timer");
   let totalSeconds = adBox.dataset.totalViewTime / 1000;
   let sec = Math.floor(totalSeconds % 60);
@@ -390,7 +390,7 @@ function startup() {
 
 
Функция buildContents() вызывается при старте приложения. Она формирует тело статьи и добавляет рекламные блоки:

 
-
let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" +
+
let loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing" +
   " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" +
   " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" +
   " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" +
@@ -419,7 +419,7 @@ function buildContents() {
 
 
Для создания элемента статьи {{HTMLElement("article")}} и её содержимого мы используем функцию createArticle(), которая в качестве входных данных принимает строку-текст статьи.

 
-
function createArticle(contents) {
+
function createArticle(contents) {
   let articleElem = document.createElement("article");
   articleElem.id = nextArticleID;
 
@@ -440,7 +440,7 @@ function buildContents() {
 
 
Функция loadRandomAd() имитирует загрузку рекламы и её добавление на страницу. Если вы не указываете значение для replaceBox, создаётся и применяется новый контейнер для рекламы. Если вы указали replaceBox, этот контейнер рассматривается, как уже существующий элемент. Вместо создания нового, существующий элемент изменяется, чтобы содержать актуальные данные. Это помогает избежать риска неэффективной перерисовки элементов, если вы сначала будете удалять элемент из DOM, а затем вставлять новый.

 
-
function loadRandomAd(replaceBox) {
+
function loadRandomAd(replaceBox) {
   let ads = [
     {
       bgcolor: "#cec",
@@ -537,7 +537,7 @@ function buildContents() {
 
 
Наша {{anch("Handling intersection changes", "функция обработки перекрытия")}} отслеживает рекламные блоки. Когда они становятся на 100% и общее время их видимости достаточное для того, рекламный блок заменяется на новый. Когда это происходит, вызывается функция replaceAd().

 
-
function replaceAd(adBox) {
+
function replaceAd(adBox) {
   let visibleTime;
 
   updateAdTimer(adBox);
diff --git a/files/ru/web/api/keyboardevent/altkey/index.html b/files/ru/web/api/keyboardevent/altkey/index.html
index 2f728d093f..615078acee 100644
--- a/files/ru/web/api/keyboardevent/altkey/index.html
+++ b/files/ru/web/api/keyboardevent/altkey/index.html
@@ -9,12 +9,12 @@ translation_of: Web/API/KeyboardEvent/altKey
 
 
Синтаксис

 
-
var altKeyPressed = instanceOfKeyboardEvent.altKey
+
var altKeyPressed = instanceOfKeyboardEvent.altKey
 

 
 
Пример

 
-
<html>
+
<html>
 <head>
 <title>altKey example</title>
 
diff --git a/files/ru/web/api/location/reload/index.html b/files/ru/web/api/location/reload/index.html
index 1b92be71f9..271f81772b 100644
--- a/files/ru/web/api/location/reload/index.html
+++ b/files/ru/web/api/location/reload/index.html
@@ -17,12 +17,12 @@ translation_of: Web/API/Location/reload
 
 
Синтаксис

 
-
location.reload();
+
location.reload();
 

 
 
Примеры

 
-
// Перезагрузить текущую страницу
+
// Перезагрузить текущую страницу
 document.location.reload();

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

diff --git a/files/ru/web/api/location/replace/index.html b/files/ru/web/api/location/replace/index.html
index 2a33c1a694..398c9637a4 100644
--- a/files/ru/web/api/location/replace/index.html
+++ b/files/ru/web/api/location/replace/index.html
@@ -19,7 +19,7 @@ translation_of: Web/API/Location/replace
 
 
Синтаксис

 
-
object.replace(url);
+
object.replace(url);
 

 
 
Параметры

@@ -31,7 +31,7 @@ translation_of: Web/API/Location/replace
 
 
Примеры

 
-
// Перейти на статью Location.reload, заменив текущую страницу
+
// Перейти на статью Location.reload, заменив текущую страницу
 document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');

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

diff --git a/files/ru/web/api/media_session_api/index.html b/files/ru/web/api/media_session_api/index.html
index a48ea17748..d309040785 100644
--- a/files/ru/web/api/media_session_api/index.html
+++ b/files/ru/web/api/media_session_api/index.html
@@ -24,7 +24,7 @@ translation_of: Web/API/Media_Session_API
 
 
Главный интерфейс Media Session API -- {{domxref("MediaSession")}}. Не нужно создавать собственный экземпляр MediaSession, доступ к API осуществляется через свойство {{domxref("navigator.mediaSession")}}. Например, следующий код укажет, что страница воспроизводит медиа в данный момент:

 
-
navigator.mediaSession.playbackState = "playing";

+
navigator.mediaSession.playbackState = "playing";

 
 
Интерфейсы

 
@@ -50,7 +50,7 @@ translation_of: Web/API/Media_Session_API
 
 
Данный пример демонстрирует работу и определение доступности Media Session API. Также, он передаёт метаданные и определяет собственные обработчики событий:

 
-
if ('mediaSession' in navigator) {
+
if ('mediaSession' in navigator) {
   navigator.mediaSession.metadata = new MediaMetadata({
     title: 'Unforgettable',
     artist: 'Nat King Cole',
@@ -75,7 +75,7 @@ translation_of: Web/API/Media_Session_API
 
 
Некоторые браузеры отключают автовоспроизведение медиаэлементов на мобильных устройствах и требуют действий пользователя для начала воспроизведения. Этот пример добавит обработчик события pointerup для кнопки воспроизведения на странице, который начнёт работу с медиасессией:

 
-
playButton.addEventListener('pointerup', function(event) {
+
playButton.addEventListener('pointerup', function(event) {
   var audio = document.querySelector('audio');
 
   // Пользователь нажал кнопку, начинаем воспроизведение...
diff --git a/files/ru/web/api/mediadevices/getusermedia/index.html b/files/ru/web/api/mediadevices/getusermedia/index.html
index 5946146162..c6f8390675 100644
--- a/files/ru/web/api/mediadevices/getusermedia/index.html
+++ b/files/ru/web/api/mediadevices/getusermedia/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
 
Обычно, разработчик получает доступ к  единственному экземпляру объекта {{domxref("MediaDevices")}} , используя {{domxref("navigator.mediaDevices.getUserMedia()")}}  метод, возвращающий поток:

 
-
async function getMedia(constraints) {
+
async function getMedia(constraints) {
   let stream = null;
 
   try {
@@ -29,7 +29,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
 
Тот же результат, но используя тип промиса :

 
-
navigator.mediaDevices.getUserMedia(constraints)
+
navigator.mediaDevices.getUserMedia(constraints)
 .then(function(stream) {
   /* используем поток */
 })
@@ -43,7 +43,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
 
Синтаксис

 
-
var promise = navigator.mediaDevices.getUserMedia(constraints);
+
var promise = navigator.mediaDevices.getUserMedia(constraints);
 

 
 
Параметры

@@ -57,13 +57,13 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
  
Следующий отрывок кода запрашивает и audio и video типы  без дополнительных условий:

 
- 
{ audio: true, video: true }

+ 
{ audio: true, video: true }

 
  
Если определяется значение true для медиатипа, результирующий поток обязательно будет иметь в себе запрошенный медиатип. Если ни один из типов не включается в запрос, вызов метода  getUserMedia() приведёт к ошибке.

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

 
- 
{
+ 
{
   audio: true,
   video: { width: 1280, height: 720 }
 }

@@ -72,7 +72,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
  
Для минимального, максимального и точного определения значения можно использовать ключевые слова min, max, или exac. Следующий пример запрашивает минимальное разрешение камеры 1280x720:

 
- 
{
+ 
{
   audio: true,
   video: {
     width: { min: 1280 },
@@ -84,7 +84,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
  
Различие поведения происходит по причине того, что ключевые слова min, max, и exact  являются обязательными к выполнению. В то время как простые значения и ключевое слово  ideal - не обязательные к выполнению. Ниже, полный пример:

 
- 
{
+ 
{
   audio: true,
   video: {
     width: { min: 1024, ideal: 1280, max: 1920 },
@@ -96,7 +96,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
  
Простые значения работают как идеальные, поэтому один из первых примеров выше можно переписать, используя свойство  ideal :

 
- 
{
+ 
{
   audio: true,
   video: {
     width: { ideal: 1280 },
@@ -106,19 +106,19 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
  
Не все значения ограничений являются числовыми. К примеру, на мобильных устройствах следующий отрывок будет запрашивать переднюю камеру (если присутствует) , поэтому в свойстве facingMode указано строковое значение user:

 
- 
{ audio: true, video: { facingMode: "user" } }

+ 
{ audio: true, video: { facingMode: "user" } }

 
  
Запрос обратной (задней) камеры:

 
- 
{ audio: true, video: { facingMode: { exact: "environment" } } }

+ 
{ audio: true, video: { facingMode: { exact: "environment" } } }

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

 
- 
{ video: { deviceId: идентификаторНужнойКамеры } }

+ 
{ video: { deviceId: идентификаторНужнойКамеры } }

 
  
Код выше вернёт запрашиваемую камеру или другую камеру, если требуемая камера недоступна. Для получения доступа к потоку только определённой камеры, без альтернативы, используется свойство  exact (точно) :

 
- 
{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }

+ 
{ video: { deviceId: { exact: идентификаторНужнойКамеры } } }

  
 
 
@@ -188,15 +188,15 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
 
К примеру, строка  HTTP заголовка позволит использовать камеру документу и любым встроенные  {{HTMLElement("iframe")}} элементам, которые загружаются  из одного источника:

 
-
Feature-Policy: camera 'self'

+
Feature-Policy: camera 'self'

 
 
Строка ниже, запрашивает доступ к микрофону для текущего источника и указанном в заголовке источнике https://developer.mozilla.org:

 
-
Feature-Policy: microphone 'self' https://developer.mozilla.org

+
Feature-Policy: microphone 'self' https://developer.mozilla.org

 
 
Если используется getUserMedia() внутри элемента <iframe>, можно запросить разрешение только для этого фрейма, которое явно более безопаснее, чем  запрашивать более общее разрешение. Здесь нам нужно использовать и камеру и микрофон:

 
-
<iframe src="https://mycode.example.net/etc" allow="camera;microphone">
+
<iframe src="https://mycode.example.net/etc" allow="camera;microphone">
 </iframe>

 
 
Прочитайте наше руководство Применение функциональной политики , изучив подробнее то, как это работает.

@@ -221,7 +221,7 @@ translation_of: Web/API/MediaDevices/getUserMedia
 
 
Этот пример выбирает указанное разрешение камеры и присваивает ссылку на объект {{domxref("MediaStream")}} свойству srcObject элемента video .

 
-
// Выбирает разрешение камеры близкое к 1280x720.
+
// Выбирает разрешение камеры близкое к 1280x720.
 var constraints = { audio: true, video: { width: 1280, height: 720 } };
 
 navigator.mediaDevices.getUserMedia(constraints)
@@ -239,7 +239,7 @@ navigator.mediaDevices.getUserMedia(constraints)
 
 
Ниже, находятся примеры, использующие navigator.mediaDevices.getUserMedia(), с полифилами для работы в старых браузерах. Обратите внимание, что эти полифилы не корректируют все различия в синтаксисе, и не работают во всех браузерах. Рекомендуется использовать библиотеку  adapter.js , как производственный полифил.

 
-
// Старые браузеры могут не реализовывать свойство mediaDevices,
+
// Старые браузеры могут не реализовывать свойство mediaDevices,
 // поэтому сначала присваиваем свойству ссылку на пустой объект
 
 if (navigator.mediaDevices === undefined) {
@@ -296,14 +296,14 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true })
 
 
В некоторых случаях может быть желательна более низкая частота кадров, например, при передаче WebRTC с ограничениями полосы пропускания

 
-
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
 

 
 
Передняя и задняя камеры

 
 
На мобильных устройствах.

 
-
var front = false;
+
var front = false;
 document.getElementById('flip-button').onclick = function() { front = !front; };
 
 var constraints = { video: { facingMode: (front? "user" : "environment") } };
diff --git a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html
index 478f66dcf1..33ea4c5fb1 100644
--- a/files/ru/web/api/mediatrackconstraints/echocancellation/index.html
+++ b/files/ru/web/api/mediatrackconstraints/echocancellation/index.html
@@ -25,7 +25,7 @@ original_slug: Web/API/MediaTrackConstraints/Эхоподавление
 
 
Синтаксис

 
-
const constraintsObject = {
+
const constraintsObject = {
   echoCancellation: constraint,
 };
 
diff --git a/files/ru/web/api/mouseevent/button/index.html b/files/ru/web/api/mouseevent/button/index.html
index 96335d7b92..92dcf05573 100644
--- a/files/ru/web/api/mouseevent/button/index.html
+++ b/files/ru/web/api/mouseevent/button/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/MouseEvent/button
 
 
Синтаксис

 
-
var buttonPressed = instanceOfMouseEvent.button
+
var buttonPressed = instanceOfMouseEvent.button
 

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

@@ -36,7 +36,7 @@ translation_of: Web/API/MouseEvent/button
 
 
Пример

 
-
<script>
+
<script>
 var whichButton = function (e) {
     // Handle different event models
     var e = e || window.event;
diff --git a/files/ru/web/api/mouseevent/ctrlkey/index.html b/files/ru/web/api/mouseevent/ctrlkey/index.html
index 7c2844f4a7..d25c7af786 100644
--- a/files/ru/web/api/mouseevent/ctrlkey/index.html
+++ b/files/ru/web/api/mouseevent/ctrlkey/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/MouseEvent/ctrlKey
 
 
Синтаксис

 
-
var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
+
var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
 

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

@@ -18,7 +18,7 @@ translation_of: Web/API/MouseEvent/ctrlKey
 
 
Пример

 
-
<html>
+
<html>
 <head>
 <title>Пример с ctrlKey</title>
 
diff --git a/files/ru/web/api/navigator/getusermedia/index.html b/files/ru/web/api/navigator/getusermedia/index.html
index 3bd6f9e60f..664d4832e0 100644
--- a/files/ru/web/api/navigator/getusermedia/index.html
+++ b/files/ru/web/api/navigator/getusermedia/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/Navigator/getUserMedia
 
 
Синтаксис

 
-
navigator.getUserMedia(constraints, successCallback, errorCallback);

+
navigator.getUserMedia(constraints, successCallback, errorCallback);

 
 
Параметры

 
@@ -24,7 +24,7 @@ translation_of: Web/API/Navigator/getUserMedia
  
{{domxref("MediaStreamConstraints")}} объект, определяющий типы запрашиваемых медиа, а также любые требования для каждого типа. Подробнее см. В разделе ограничений современного метода {{domxref ("MediaDevices.getUserMedia ()")}}, а также в статье Возможности, ограничения и настройки.

  
successCallback

  
Функция, которая вызывается при утверждении запроса на доступ к мультимедиа. Функция вызывается с одним параметром: объектом {{domxref ("MediaStream")}}, который содержит медиапоток. Затем колбэк может назначить поток желаемому объекту (например, элементу {{HTMLElement ("audio")}} или {{HTMLElement ("video")}}), как показано в следующем примере:
- 
function(stream) {
+ 
function(stream) {
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.onloadedmetadata = function(e) {
@@ -50,7 +50,7 @@ translation_of: Web/API/Navigator/getUserMedia
 
 
Это пример использования getUserMedia() , включая код для работы с префиксами различных браузеров. Обратите внимание, что это устаревший способ сделать это: современные примеры см. В разделе «Примеры» в разделе {{domxref ("MediaDevices.getUserMedia ()")}}.

 
-
navigator.getUserMedia = navigator.getUserMedia ||
+
navigator.getUserMedia = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia;
 
@@ -76,7 +76,7 @@ if (navigator.getUserMedia) {
 
 
Чтобы использоватьgetUserMedia() в устанавливаемом приложении (например, приложении Firefox OS), вам необходимо указать одно или оба из следующих полей внутри файла манифеста:

 
-
"permissions": {
+
"permissions": {
   "audio-capture": {
     "description": "Required to capture audio using getUserMedia()"
   },
diff --git a/files/ru/web/api/navigator/mediadevices/index.html b/files/ru/web/api/navigator/mediadevices/index.html
index 308c1a8450..7cf343c970 100644
--- a/files/ru/web/api/navigator/mediadevices/index.html
+++ b/files/ru/web/api/navigator/mediadevices/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/Navigator/mediaDevices
 
 
Синтаксис

 
-
var mediaDevices = navigator.mediaDevices;
+
var mediaDevices = navigator.mediaDevices;
 

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

diff --git a/files/ru/web/api/network_information_api/index.html b/files/ru/web/api/network_information_api/index.html
index ca66acea26..808ca544f1 100644
--- a/files/ru/web/api/network_information_api/index.html
+++ b/files/ru/web/api/network_information_api/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/Network_Information_API
 
 
Данный пример отслеживает изменение подключения пользователя.

 
-
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 var type = connection.effectiveType;
 
 function updateConnectionStatus() {
@@ -30,7 +30,7 @@ connection.addEventListener('change', updateConnectionStatus);
 
 
The connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory. This example would be called soon after page load to check for a connection type where preloading a video may not be desirable. If a cellular connection is found, then the preloadVideo flag is set to false. For simplicity and clarity, this example only tests for one connection type. A real-world use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Regardless of the type value you can get an estimate of connection speed through the {{domxref("NetworkInformation.effectiveType")}} property.

 
-
let preloadVideo = true;
+
let preloadVideo = true;
 var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 if (connection) {
   if (connection.effectiveType === 'slow-2g') {
diff --git a/files/ru/web/api/node/appendchild/index.html b/files/ru/web/api/node/appendchild/index.html
index ee3bde8fce..c36bb32af5 100644
--- a/files/ru/web/api/node/appendchild/index.html
+++ b/files/ru/web/api/node/appendchild/index.html
@@ -24,7 +24,7 @@ translation_of: Web/API/Node/appendChild
 
 
Синтаксис

 
-
var child = element.appendChild(child);

+
var child = element.appendChild(child);

 
 
    
  
  • element родительский элемент.
    • 
@@ -39,13 +39,13 @@ translation_of: Web/API/Node/appendChild
 
 
    Цепочка может работать не так, как ожидалось, из-за того, что appendChild() возвращает дочерний элемент:
    
 
-
    let aBlock = document.createElement('block').appendChild( document.createElement('b') );
    
+
    let aBlock = document.createElement('block').appendChild( document.createElement('b') );
    
 
 
    Присваивает переменной aBlock элемент <b></b>, а не <block></block>, как вы могли ожидать.
    
 
 
    Пример
    
 
-
    // Создаём новый элемент параграфа, и вставляем в конец document body
+
    // Создаём новый элемент параграфа, и вставляем в конец document body
 var p = document.createElement("p");
 document.body.appendChild(p);
    
 
diff --git a/files/ru/web/api/page_visibility_api/index.html b/files/ru/web/api/page_visibility_api/index.html
index 3ac365ba5d..c0b75b5670 100644
--- a/files/ru/web/api/page_visibility_api/index.html
+++ b/files/ru/web/api/page_visibility_api/index.html
@@ -71,7 +71,7 @@ original_slug: Web/API/Видимость_страницы_API
 
 
    The example, which pauses the video when you switch to another tab and plays again when you return to its tab, was created with the following code:
    
 
-
    // Set the name of the hidden property and the change event for visibility
+
    // Set the name of the hidden property and the change event for visibility
 var hidden, visibilityChange;
 if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
   hidden = "hidden";
@@ -145,7 +145,7 @@ if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  
    An {{domxref("EventListener")}} providing the code to be called when the {{event("visibilitychange")}} event is fired.
    
 
 
-
    //startSimulation and pauseSimulation defined elsewhere
+
    //startSimulation and pauseSimulation defined elsewhere
 function handleVisibilityChange() {
   if (document.hidden) {
     pauseSimulation();
diff --git a/files/ru/web/api/pointer_events/index.html b/files/ru/web/api/pointer_events/index.html
index 1d74bcf4aa..c6a57b7a95 100644
--- a/files/ru/web/api/pointer_events/index.html
+++ b/files/ru/web/api/pointer_events/index.html
@@ -160,7 +160,7 @@ translation_of: Web/API/Pointer_events
 
 
    В этом примере определённому элементу назначаются обработчики каждого типа события.
    
 
-
    <html>
+
    <html>
   <script>
     function over_handler(event) { }
     function enter_handler(event) { }
@@ -198,7 +198,7 @@ translation_of: Web/API/Pointer_events
 
 
    Этот пример демонстрирует доступ ко всем свойствам события касания.
    
 
-
    <html>
+
    <html>
   <script>
     var id = -1;
 
@@ -345,7 +345,7 @@ translation_of: Web/API/Pointer_events
 
 
    The following example shows pointer capture being set on an element.
    
 
-
    <html>
+
    <html>
 <script>
   function downHandler(ev) {
     let el = document.getElementById("target");
@@ -366,7 +366,7 @@ translation_of: Web/API/Pointer_events
 
 
    The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.
    
 
-
    <html>
+
    <html>
   <script>
     function downHandler(ev) {
       let el = document.getElementById("target");
@@ -401,7 +401,7 @@ translation_of: Web/API/Pointer_events
 
 
    In the following example, the browser's default touch behavior is disabled for the div element.
    
 
-
    <html>
+
    <html>
   <body>
     <div style="touch-action:none;">Can't touch this ... </div>
   </body>
@@ -410,14 +410,14 @@ translation_of: Web/API/Pointer_events
 
 
    In the following example, default touch behavior is disabled for some button elements.
    
 
-
    button#tiny {
+
    button#tiny {
   touch-action: none;
 }
 
    
 
 
    In the following example, when the target element is touched, it will only pan in the horizontal direction.
    
 
-
    #target {
+
    #target {
   touch-action: pan-x;
 }
 
    
diff --git a/files/ru/web/api/request/index.html b/files/ru/web/api/request/index.html
index 7245130a9e..ddf3cef81b 100644
--- a/files/ru/web/api/request/index.html
+++ b/files/ru/web/api/request/index.html
@@ -94,7 +94,7 @@ translation_of: Web/API/Request
 
 
    In the following snippet, we create a new request using the Request() constructor (for an image file in the same directory as the script), then return some property values of the request:
    
 
-
    const request = new Request('https://www.mozilla.org/favicon.ico');
+
    const request = new Request('https://www.mozilla.org/favicon.ico');
 
 const URL = request.url;
 const method = request.method;
@@ -103,7 +103,7 @@ const credentials = request.credentials;
 
 
    You could then fetch this request by passing the Request object in as a parameter to a {{domxref("WindowOrWorkerGlobalScope.fetch()")}} call, for example:
    
 
-
    fetch(request)
+
    fetch(request)
   .then(response => response.blob())
   .then(blob => {
     image.src = URL.createObjectURL(blob);
@@ -111,7 +111,7 @@ const credentials = request.credentials;
 
 
    In the following snippet, we create a new request using the Request() constructor with some initial data and body content for an api request which need a body payload:
    
 
-
    const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
    const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
 
 const URL = request.url;
 const method = request.method;
@@ -127,7 +127,7 @@ const bodyUsed = request.bodyUsed;
 
 
    Вы можете получить этот запрос API, передав объект Request в качестве параметра для вызова {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, например, и получить ответ:
    
 
-
    fetch(request)
+
    fetch(request)
   .then(response => {
     if (response.status === 200) {
       return response.json();
diff --git a/files/ru/web/api/response/index.html b/files/ru/web/api/response/index.html
index e32d4d23b9..969c6d288f 100644
--- a/files/ru/web/api/response/index.html
+++ b/files/ru/web/api/response/index.html
@@ -93,7 +93,7 @@ translation_of: Web/API/Response
 
 
    You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob")}} ({{domxref("Response")}} implements Body) to give the response its correct MIME type.
    
 
-
    const image = document.querySelector('.my-image');
+
    const image = document.querySelector('.my-image');
 fetch('flowers.jpg').then(function(response) {
   return response.blob();
 }).then(function(blob) {
@@ -103,13 +103,13 @@ fetch('flowers.jpg').then(function(response) {
 
 
    You can also use the {{domxref("Response.Response()")}} constructor to create your own custom Response object:
    
 
-
    const response = new Response();
    
+
    const response = new Response();
    
 
 
    Ajax запрос
    
 
 
    Здесь мы с помощью функции doAjax вызываем PHP скрипт, который генерирует JSON строку, и возвращает распарсенный JSON в виде JavaScript объекта. Также реализована простая обработка ошибок.
    
 
-
    // Функция, которая делает Ajax запрос
+
    // Функция, которая делает Ajax запрос
 const doAjax = async () => {
     const response = await fetch('Ajax.php'); // Генерируем объект Response
     if (response.ok) {
diff --git a/files/ru/web/api/response/response/index.html b/files/ru/web/api/response/response/index.html
index 033d5fd08b..4f5c98692b 100644
--- a/files/ru/web/api/response/response/index.html
+++ b/files/ru/web/api/response/response/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/Response/Response
 
 
    Синтаксис
    
 
-
    var myResponse = new Response(body, init);
    
+
    var myResponse = new Response(body, init);
    
 
 
    Параметры
    
 
@@ -45,7 +45,7 @@ translation_of: Web/API/Response/Response
 
 
    In our Fetch Response example (see Fetch Response live) we create a new Response object using the constructor, passing it a new {{domxref("Blob")}} as a body, and an init object containing a custom status and statusText:
    
 
-
    var myBlob = new Blob();
+
    var myBlob = new Blob();
 var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
 var myResponse = new Response(myBlob,init);
    
 
diff --git a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
index ac8aca39be..ec6d3f43cd 100644
--- a/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
+++ b/files/ru/web/api/rtcpeerconnection/cantrickleicecandidates/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
 
 
    Синтаксис
    
 
-
     var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
    
+
     var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
    
 
 
    Значение
    
 
@@ -29,7 +29,7 @@ translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates
 
 
    Пример
    
 
-
    var pc = new RTCPeerConnection();
+
    var pc = new RTCPeerConnection();
 // Следующий код может быть использован для обработки предложения от пира, когда
 // он не знает поддерживает ли он просачивание
 pc.setRemoteDescription(remoteOffer)
diff --git a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
index 146332e983..84a6b0ca74 100644
--- a/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
+++ b/files/ru/web/api/rtcpeerconnection/connectionstate/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/RTCPeerConnection/connectionState
 
 
    Синтаксис
    
 
-
    var connectionState = RTCPeerConnection.connectionState;
    
+
    var connectionState = RTCPeerConnection.connectionState;
    
 
 
    Значение
    
 
@@ -21,7 +21,7 @@ translation_of: Web/API/RTCPeerConnection/connectionState
 
 
    Пример
    
 
-
    var pc = new RTCPeerConnection(configuration);
+
    var pc = new RTCPeerConnection(configuration);
 
 /* ... */
 
diff --git a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
index 3b094fd432..054c4b49c5 100644
--- a/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
+++ b/files/ru/web/api/rtcpeerconnection/currentlocaldescription/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription
 
 
    Синтаксис
    
 
-
    sessionDescription = RTCPeerConnection.currentLocalDescription;
    
+
    sessionDescription = RTCPeerConnection.currentLocalDescription;
    
 
 
    Возвращаемое значение
    
 
@@ -25,7 +25,7 @@ translation_of: Web/API/RTCPeerConnection/currentLocalDescription
 
 
    В этом примере рассматривается свойство currentLocalDescription  и отображается предупреждение, содержащее свойства объекта {{domxref("RTCSessionDescription")}}  type и sdp .
    
 
-
    var pc = new RTCPeerConnection();
+
    var pc = new RTCPeerConnection();
 …
 var sd = pc.currentLocalDescription;
 if (sd) {
diff --git a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
index 2b6aef35ae..b03d5ecfbf 100644
--- a/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
+++ b/files/ru/web/api/rtcpeerconnection/currentremotedescription/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription
 
 
    Синтаксис
    
 
-
    sessionDescription = RTCPeerConnection.currentRemoteDescription;
    
+
    sessionDescription = RTCPeerConnection.currentRemoteDescription;
    
 
 
    Возвращаемое значение
    
 
@@ -25,7 +25,7 @@ translation_of: Web/API/RTCPeerConnection/currentRemoteDescription
 
 
    Пример рассматривает свойство  currentRemoteDescription и отображает предупреждение, содержащее значения свойств  type и sdp ,объекта {{domxref("RTCSessionDescription")}}.
    
 
-
    var pc = new RTCPeerConnection();
+
    var pc = new RTCPeerConnection();
 …
 var sd = pc.currentRemoteDescription;
 if (sd) {
diff --git a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
index 4cf9d46d46..781f299272 100644
--- a/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
+++ b/files/ru/web/api/rtcpeerconnection/icecandidate_event/index.html
@@ -36,7 +36,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event
 
 
    В основном события icecandidate происходят, чтобы указать, что новый кандидат был построен (gathered). Этого кандидата нужно доставить удалённому клиенту (remote peer) через канал сигнализации (signaling channel), которым управляет ваш код.
    
 
-
    rtcPeerConnection.onicecandidate = (event) => {
+
    rtcPeerConnection.onicecandidate = (event) => {
   if (event.candidate) {
     sendCandidateToRemotePeer(event.candidate)
   } else {
@@ -63,7 +63,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event
 
 
    If you need to perform any special actions when there are no further candidates expected, you're much better off watching the ICE gathering state by watching for {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} events:
    
 
-
    pc.addEventListener("icegatheringstatechange", ev => {
+
    pc.addEventListener("icegatheringstatechange", ev => {
   switch(pc.iceGatheringState) {
     case "new":
       /* gathering is either just starting or has been reset */
@@ -88,7 +88,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event
 
 
    First, an example using {{domxref("EventTarget.addEventListener", "addEventListener()")}}:
    
 
-
    pc.addEventListener("icecandidate", ev => {
+
    pc.addEventListener("icecandidate", ev => {
   if (ev.candidate) {
     sendMessage({
       type: "new-ice-candidate",
@@ -100,7 +100,7 @@ translation_of: Web/API/RTCPeerConnection/icecandidate_event
 
 
    You can also set the {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} event handler property directly:
    
 
-
    pc.onicecandidate = ev => {
+
    pc.onicecandidate = ev => {
   if (ev.candidate) {
     sendMessage({
       type: "new-ice-candidate",
diff --git a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
index 2073990cd1..36609588b4 100644
--- a/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
+++ b/files/ru/web/api/rtcpeerconnection/rtcpeerconnection/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/RTCPeerConnection/RTCPeerConnection
 
 
    Синтаксис
    
 
-
    pc = new RTCPeerConnection([configuration]);
    
+
    pc = new RTCPeerConnection([configuration]);
    
 
 
    Параметры
    
 
diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html
index d25a516e56..5042cccf4b 100644
--- a/files/ru/web/api/service_worker_api/using_service_workers/index.html
+++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html
@@ -66,7 +66,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
    sync
    
 
-
    try {
+
    try {
   const value = myFunction();
   console.log(value);
 } catch(err) {
@@ -75,7 +75,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
    async
    
 
-
    myFunction().then((value) => {
+
    myFunction().then((value) => {
   console.log(value);
 }).catch((err) => {
   console.log(err);
@@ -89,7 +89,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
    {{note("Реальные реализации сервис-воркеров скорее всего будут использовать onfetch, а не устаревающий XMLHttpRequest API. Эти возможности не используются здесь, так что можете сосредоточиться на изучении промисов.")}}
    
 
-
    const imgLoad = (url) => {
+
    const imgLoad = (url) => {
   return new Promise((resolve, reject) => {
     var request = new XMLHttpRequest();
     request.open('GET', url);
@@ -115,7 +115,7 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
 
    Вызывая функцию imgLoad(), мы ожидаемо передаём в качестве параметра url изображения, которое хотим загрузить, но далее код немного отличается:
    
 
-
    let body = document.querySelector('body');
+
    let body = document.querySelector('body');
 let myImage = new Image();
 
 imgLoad('myLittleVader.jpg').then((response) => {
@@ -161,7 +161,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
    Ниже представлен первый блок кода файла app.js. Это точка входа в Service Worker.
    
 
-
    if ('serviceWorker' in navigator) {
+
    if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'})
   .then((reg) => {
     // регистрация сработала
@@ -224,7 +224,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
    Давайте начнём этот раздел посмотрев на фрагмент кода ниже — это первый блок кода, который вы увидите в нашем сервис-воркере:
    
 
-
    self.addEventListener('install', (event) => {
+
    self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open('v1').then((cache) => {
       return cache.addAll([
@@ -268,7 +268,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
    Вы можете подключить к сервис-воркеру обработчик события fetch и внутри него на объекте события вызвать метод respondWith(), чтобы заменить ответы и показать собственную "магию".
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     // магия происходит здесь
   );
@@ -277,7 +277,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 
    Для начала, на каждый сетевой запрос мы можем отдать в ответ ресурс, чей url соответствует запросу:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request)
   );
@@ -291,29 +291,29 @@ imgLoad('myLittleVader.jpg').then((response) => {
  
  • 
   
    Конструктор {{domxref("Response.Response","Response()")}} позволяет вам создавать собственные ответы. В данном случае, мы всего лишь возвращаем простую текстовую строку:
    
 
-  
    new Response('Hello from your friendly neighbourhood service worker!');
+  
    new Response('Hello from your friendly neighbourhood service worker!');
 
    
 
   
    В этом более сложном объекте Response показано, как вы можете передать набор заголовков в свой ответ, эмулируя стандартный HTTP-ответ. Здесь мы просто сообщаем браузеру, чем является содержимое ответа:
    
 
-  
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+  
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
   headers: { 'Content-Type': 'text/html' }
 });
    
  
    • 
  
  • 
   
    Если совпадение не было найдено в кеше, вы можете попросить браузер {{domxref("GlobalFetch.fetch","загрузить")}} тот же ресурс, чтобы получить новый файл через обычную сеть, если она доступна:
    
 
-  
    fetch(event.request);
    
+  
    fetch(event.request);
    
  
    • 
  
  • 
   
    Если информация, соответствующая запросу, в кеше не найдена, а также сеть не доступна, то вы можете просто ответить на запрос какой-либо страницей по умолчанию, которая хранится в кеше, используя {{domxref("CacheStorage.match","match()")}}:
    
 
-  
    caches.match('./fallback.html');
    
+  
    caches.match('./fallback.html');
    
  
    • 
  
  • 
   
    Вы можете получить больше информации о каждом запросе, используя для этого свойства объекта {{domxref("Request")}}, который можно получить как свойство объекта {{domxref("FetchEvent")}}:
    
 
-  
    event.request.url
+  
    event.request.url
 event.request.method
 event.request.headers
 event.request.body
    
@@ -326,7 +326,7 @@ event.request.body
    
 
 
    К счастью, сервис-воркеры имеют структуру основанную на промисах, что делает тривиальной такую обработку и предоставляет большое количество способов успешно обработать запрос:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request).then((response) => {
       return response || fetch(event.request);
@@ -338,7 +338,7 @@ event.request.body
    
 
 
    Если же мы были достаточно умны, то мы не стали бы просто возвращать сетевой запрос, а сохранили бы его результат в кеше, чтобы иметь возможность получить его в офлайн-режиме. В случае с нашим демо-приложением "Star Wars gallery", это означает, что, если в галерею будет добавлено ещё одно изображение, то оно будет получено и сохранено в кеше:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request).then((resp) => {
       return resp || fetch(event.request).then((response) => {
@@ -357,7 +357,7 @@ event.request.body
    
 
 
    У нас все ещё остаётся единственная проблема - если на какой-либо запрос в кеше не будет найдено соответствие, и в этот момент сеть не доступна, то наш запрос завершится неудачно. Давайте реализуем запасной вариант по умолчанию, при котором пользователь, в описанном случае, будет получать хоть что-нибудь:
    
 
-
    self.addEventListener('fetch', (event) => {
+
    self.addEventListener('fetch', (event) => {
   event.respondWith(
     caches.match(event.request).then((resp) => {
       return resp || fetch(event.request).then((response) => {
@@ -382,7 +382,7 @@ event.request.body
    
 
 
    Вы можете обновить обработчик события install в новой версии сервис-воркера, чтобы получить примерно такое (обратите внимание на номер новой версии):
    
 
-
    self.addEventListener('install', (event) => {
+
    self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open('v2').then((cache) => {
       return cache.addAll([
@@ -410,7 +410,7 @@ event.request.body
    
 
 
    Promise, переданный в waitUntil(), заблокирует другие события до своего завершения, поэтому можно быть уверенным, что процесс очистки закончится раньше, чем выполнится первое событие fetch на основе нового кеша.
    
 
-
    self.addEventListener('activate', (event) => {
+
    self.addEventListener('activate', (event) => {
   var cacheKeeplist = ['v2'];
 
   event.waitUntil(
diff --git a/files/ru/web/api/serviceworkercontainer/register/index.html b/files/ru/web/api/serviceworkercontainer/register/index.html
index 94252afb85..20730c4c35 100644
--- a/files/ru/web/api/serviceworkercontainer/register/index.html
+++ b/files/ru/web/api/serviceworkercontainer/register/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
 
 
    Синтаксис
    
 
-
    ServiceWorkerContainer.register(scriptURL, options)
+
    ServiceWorkerContainer.register(scriptURL, options)
   .then(function(ServiceWorkerRegistration) { ... });
    
 
 
    Параметры
    
@@ -37,7 +37,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
 
 
    Следующий пример использует дефолтный scope (не указывая его прямо). Service worker в этом случае будет контролировать example.com/index.html и страницы, расположенные "глубже", например example.com/product/description.html.
    
 
-
    if ('serviceWorker' in navigator) {
+
    if ('serviceWorker' in navigator) {
   // Регистрация service worker-а, расположенного в корне сайта
   // за счёт использования дефолтного scope (не указывая его)
   navigator.serviceWorker.register('/sw.js').then(function(registration) {
@@ -52,7 +52,7 @@ translation_of: Web/API/ServiceWorkerContainer/register
 
 
    Следующий пример, если он размещён на странице корня сайта, будет применён ровно к тем же страницам, что и пример выше. Помните, scope, если он указан, использует path страницы в качестве своей базы. Это значит, что, если следующий пример будет использоваться на странице example.com/product/description.html, то scope ./ будет означать, что service worker работает только со страницами внутри example.com/product. Если необходимо зарегистрировать service worker на example.com/product/description.html, и вы хотите, чтобы он обслуживал и корень, example.com, то scope лучше не указывать совсем, как в примере выше.
    
 
-
    if ('serviceWorker' in navigator) {
+
    if ('serviceWorker' in navigator) {
   // Регистрация service worker-а, расположенного в корне сайта
   // с указанием более строгого scope
   navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
diff --git a/files/ru/web/api/setinterval/index.html b/files/ru/web/api/setinterval/index.html
index 48763d06aa..7267237b16 100644
--- a/files/ru/web/api/setinterval/index.html
+++ b/files/ru/web/api/setinterval/index.html
@@ -10,7 +10,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
 
 
    Синтаксис
    
 
-
    var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
+
    var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
 var intervalID = scope.setInterval(code, delay);
 
    
 
@@ -45,7 +45,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval
 
 
    The following example demonstrates setInterval()'s basic syntax.
    
 
-
    var intervalID = window.setInterval(myCallback, 500);
+
    var intervalID = window.setInterval(myCallback, 500);
 
 function myCallback() {
   // Your code here
@@ -56,7 +56,7 @@ function myCallback() {
 
 
    В следующем примере вызывается функция flashtext() раз в секунду, до того момента, как будет нажата кнопка Stop.
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8" />
@@ -95,7 +95,7 @@ function myCallback() {
 
 
    The following example simulates typewriter by first clearing and then slowly typing content into the NodeList that matches a specified group of selectors.
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
@@ -258,7 +258,7 @@ Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac an
 
 
    As previously discussed, Internet Explorer versions 9 and below do not support the passing of arguments to the callback function in either setTimeout() or setInterval(). The following IE-specific code demonstrates a method for overcoming this limitation.  To use, simply add the following code to the top of your script.
    
 
-
    /*\
+
    /*\
 |*|
 |*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
 |*|  callback functions of javascript timers (HTML5 standard syntax).
@@ -299,11 +299,11 @@ if (document.all && !window.setInterval.isPolyfill) {
 
 
    Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. Example:
    
 
-
    var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);
    
+
    var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);
    
 
 
    Another possibility is to use function's bind. Example:
    
 
-
    var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
    
+
    var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
    
 
 
    {{h3_gecko_minversion("Inactive tabs", "5.0")}}
    
 
@@ -317,7 +317,7 @@ if (document.all && !window.setInterval.isPolyfill) {
 
 
    Code executed by setInterval() runs in a separate execution context than the function from which it was called. As a consequence, the this keyword for the called function is set to the window (or global) object, it is not the same as the this value for the function that called setTimeout. See the following example (which uses setTimeout() instead of setInterval() – the problem, in fact, is the same for both timers):
    
 
-
    myArray = ['zero', 'one', 'two'];
+
    myArray = ['zero', 'one', 'two'];
 
 myArray.myMethod = function (sProperty) {
     alert(arguments.length > 0 ? this[sProperty] : this);
@@ -341,7 +341,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
 
 
    A possible way to solve the "this" problem is to replace the two native setTimeout() or setInterval() global functions with two non-native ones that enable their invocation through the Function.prototype.call method. The following example shows a possible replacement:
    
 
-
    // Enable the passage of the 'this' object through the JavaScript timers
+
    // Enable the passage of the 'this' object through the JavaScript timers
 
 var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
 
@@ -363,7 +363,7 @@ window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentTo
 
 
    Новое тестируемое свойство:
    
 
-
    myArray = ['zero', 'one', 'two'];
+
    myArray = ['zero', 'one', 'two'];
 
 myArray.myMethod = function (sProperty) {
     alert(arguments.length > 0 ? this[sProperty] : this);
@@ -386,7 +386,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 s
 
 
    minidaemon.js
    
 
-
    /*\
+
    /*\
 |*|
 |*|  :: MiniDaemon ::
 |*|
@@ -516,7 +516,7 @@ MiniDaemon.prototype.start = function (bReverse) {
 
 
    Ваша HTML страница:
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8" />
@@ -567,7 +567,7 @@ MiniDaemon.prototype.start = function (bReverse) {
 
 
    In these cases, a recursive setTimeout() pattern is preferred:
    
 
-
    (function loop(){
+
    (function loop(){
    setTimeout(function() {
       // Your logic here
 
diff --git a/files/ru/web/api/settimeout/index.html b/files/ru/web/api/settimeout/index.html
index 5c4cb67a3b..6e38955b9f 100644
--- a/files/ru/web/api/settimeout/index.html
+++ b/files/ru/web/api/settimeout/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
 
 
    Синтаксис
    
 
-
    var timeoutID = window.setTimeout(func, [, delay, param1, param2, ...]);
+
    var timeoutID = window.setTimeout(func, [, delay, param1, param2, ...]);
 var timeoutID = window.setTimeout(code [, delay]);
 
    
 
@@ -35,7 +35,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
 
 
    HTML Content
    
 
-
    <p>Live Example</p>
+
    <p>Live Example</p>
 <button onclick="delayedAlert();">Show an alert box after two seconds</button>
 <p></p>
 <button onclick="clearAlert();">Cancel alert before it happens</button>
@@ -43,7 +43,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
 
 
    JavaScript Content
    
 
-
    var timeoutID;
+
    var timeoutID;
 
 function delayedAlert() {
   timeoutID = window.setTimeout(slowAlert, 2000);
@@ -66,7 +66,7 @@ function clearAlert() {
 
 
    Если вам нужно передать аргумент в вашу callback функцию, но нужно, чтобы это работало в Internet Explorer 9 и ниже, который не поддерживает передачу дополнительных параметров (ни с setTimeout() или setInterval()), то вы можете прописать специальный код для совместимости с IE, вставив этот код в начало ваших скриптов, который включит функцию передачи стандартных параметров HTML5 в Internet Explorer для обоих таймеров.
    
 
-
    /*\
+
    /*\
 |*|
 |*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
 |*|  callback functions of JavaScript timers (HTML5 standard syntax).
@@ -108,7 +108,7 @@ if (document.all && !window.setInterval.isPolyfill) {
 
 
    If you want a completely unobtrusive hack for every other mobile or desktop browser, including IE 9 and below, you can either use JavaScript conditional comments:
    
 
-
    /*@cc_on
+
    /*@cc_on
   // conditional IE < 9 only fix
   @if (@_jscript_version <= 6)
   (function(f){
@@ -121,7 +121,7 @@ if (document.all && !window.setInterval.isPolyfill) {
 
 
    Или используйте очень чистый подход, основанный на условном свойстве IE HTML:
    
 
-
    <!--[if lte IE 9]><script>
+
    <!--[if lte IE 9]><script>
 (function(f){
 window.setTimeout =f(window.setTimeout);
 window.setInterval =f(window.setInterval);
@@ -133,12 +133,12 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
 
 
    Another possibility is to use an anonymous function to call your callback, but this solution is a bit more expensive. Example:
    
 
-
    var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
    var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
 
    
 
 
    Yet another possibility is to use function's bind. Example:
    
 
-
    setTimeout(function(arg1){}.bind(undefined, 10));
+
    setTimeout(function(arg1){}.bind(undefined, 10));
 
    
 
 
    Проблема с "this"
    
@@ -149,7 +149,7 @@ var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
 
 
    Code executed by setTimeout() is run in a separate execution context to the function from which it was called. As a consequence, the this keyword for the called function will be set to the window (or global) object; it will not be the same as the this value for the function that called setTimeout. See the following example:
    
 
-
    myArray = ["zero", "one", "two"];
+
    myArray = ["zero", "one", "two"];
 myArray.myMethod = function (sProperty) {
     alert(arguments.length > 0 ? this[sProperty] : this);
 };
@@ -168,7 +168,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
    
 
 
    A possible way to solve the "this" problem is to replace the two native setTimeout() or setInterval() global functions with two non-native ones which will enable their invocation through the Function.prototype.call method. The following example shows a possible replacement:
    
 
-
    // Enable the passage of the 'this' object through the JavaScript timers
+
    // Enable the passage of the 'this' object through the JavaScript timers
 
 var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
 
@@ -190,7 +190,7 @@ window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentTo
 
 
    Новая тестируемая особенность:
    
 
-
    myArray = ["zero", "one", "two"];
+
    myArray = ["zero", "one", "two"];
 myArray.myMethod = function (sProperty) {
     alert(arguments.length > 0 ? this[sProperty] : this);
 };
@@ -214,7 +214,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 s
 
 
    Передача строки вместо функции в setTimeout() сопряжена с теми же опасностями, что и использование eval. 
    
 
-
    // Правильно
+
    // Правильно
 window.setTimeout(function() {
     alert("Hello World!");
 }, 500);
diff --git a/files/ru/web/api/storage/index.html b/files/ru/web/api/storage/index.html
index f6e0d3b1e4..a328426988 100644
--- a/files/ru/web/api/storage/index.html
+++ b/files/ru/web/api/storage/index.html
@@ -46,7 +46,7 @@ translation_of: Web/API/Storage
 
 
    В данном примере мы получаем доступ к объекту Storage вызывая localStorage. Для начала мы проверяем содержит ли local storage элементы данных используя !localStorage.getItem('bgcolor'). Если да, мы вызываем функцию setStyles() которая получает элементы данных используя {{domxref("localStorage.getItem()")}} и использует их значения для обновления стилей на странице. Если нет, мы вызывает другую функцию, populateStorage(), которая использует {{domxref("localStorage.setItem()")}} что бы установить значения для элементов,  потом вызываем setStyles().
    
 
-
    if(!localStorage.getItem('bgcolor')) {
+
    if(!localStorage.getItem('bgcolor')) {
   populateStorage();
 } else {
   setStyles();
diff --git a/files/ru/web/api/storage/removeitem/index.html b/files/ru/web/api/storage/removeitem/index.html
index e0767fa6a8..9984a1316a 100644
--- a/files/ru/web/api/storage/removeitem/index.html
+++ b/files/ru/web/api/storage/removeitem/index.html
@@ -13,7 +13,7 @@ translation_of: Web/API/Storage/removeItem
 
 
    Синтаксис
    
 
-
    storage.removeItem(keyName);
    
+
    storage.removeItem(keyName);
    
 
 
    Параметры
    
 
@@ -30,7 +30,7 @@ translation_of: Web/API/Storage/removeItem
 
 
    Следующая функция создаёт три элемента внутри локального хранилища и потом удаляет элемент с ключом image.
    
 
-
    function populateStorage() {
+
    function populateStorage() {
   localStorage.setItem('bgcolor', 'red');
   localStorage.setItem('font', 'Helvetica');
   localStorage.setItem('image', 'myCat.png');
diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html
index b94cbbaff4..df6bbfbdb1 100644
--- a/files/ru/web/api/storage_access_api/index.html
+++ b/files/ru/web/api/storage_access_api/index.html
@@ -24,7 +24,7 @@ translation_of: Web/API/Storage_Access_API
 
 
    In addition, sandboxed {{htmlelement("iframe")}}s cannot be granted storage access by default for security reasons. The API therefore also adds the allow-storage-access-by-user-activation sandbox token. The embedding website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the API, and execute in an origin that can have cookies:
    
 
-
    <iframe sandbox="allow-storage-access-by-user-activation
+
    <iframe sandbox="allow-storage-access-by-user-activation
                  allow-scripts
                  allow-same-origin">
   ...
diff --git a/files/ru/web/api/touch_events/index.html b/files/ru/web/api/touch_events/index.html
index aaede09e9d..8f54941279 100644
--- a/files/ru/web/api/touch_events/index.html
+++ b/files/ru/web/api/touch_events/index.html
@@ -42,7 +42,7 @@ translation_of: Web/API/Touch_events
 
 
    Создание canvas
    
 
-
    <canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
+
    <canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
   Ваш браузер не поддерживает элемент canvas.
 </canvas>
 <br>
@@ -52,7 +52,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    После загрузки страницы будет вызвана функция startup(), показанная ниже
    
 
-
    function startup() {
+
    function startup() {
   var el = document.getElementById("canvas");
   el.addEventListener("touchstart", handleStart, false);
   el.addEventListener("touchend", handleEnd, false);
@@ -68,12 +68,12 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Рассмотрим касания в действии.
    
 
-
    var ongoingTouches = [];
+
    var ongoingTouches = [];
 
    
 
 
    Когда возникает событие {{event("touchstart")}}, свидетельствующее о новом касании к поверхности, вызывается приведённая ниже функция handleStart().
    
 
-
    function handleStart(evt) {
+
    function handleStart(evt) {
   evt.preventDefault();
   console.log("touchstart.");
   var el = document.getElementById("canvas");
@@ -101,7 +101,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Каждый раз, когда двигается один или несколько пальцев, срабатывает событие {{event("touchmove")}}, в результате чего вызывается наша функция handleMove().В этом примере данная функция ответственна за обновление данных о касании и рисование линии от предыдущей до текущей точки касания.
    
 
-
    function handleMove(evt) {
+
    function handleMove(evt) {
   evt.preventDefault();
   var el = document.getElementById("canvas");
   var ctx = el.getContext("2d");
@@ -141,7 +141,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Когда пользователь убирает палец с сенсорной поверхности, срабатывает событие {{domxref("Element/touchend_event", "touchend")}}. Мы обрабатываем его, вызывая функцию handleEnd(), которая представлена ниже. Её задача - рисовать последний отрезок линии для каждого касания, которое завершилось, и удалять точку касания из текущего списка касаний.
    
 
-
    function handleEnd(evt) {
+
    function handleEnd(evt) {
   evt.preventDefault();
   log("touchend");
   var el = document.getElementById("canvas");
@@ -173,7 +173,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Если палец пользователя перемещается в интерфейс браузера или прикосновение должно быть отменено, отправляется событие {{domxref("Element/touchcancel_event", "touchcancel")}}, и мы вызываем функцию handleCancel(), приведённую ниже.
    
 
-
    function handleCancel(evt) {
+
    function handleCancel(evt) {
   evt.preventDefault();
   console.log("touchcancel.");
   var touches = evt.changedTouches;
@@ -195,7 +195,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Чтобы рисунок каждого касания выглядел по-разному, используется функция colorForTouch(), в которой цвета выбираются на основе уникального идентификатора касаний. Этот идентификатор является скрытым числом, но мы, по крайней мере, можем полагаться на то, что у каждого активного на данный момент касания он уникальный.
    
 
-
    function colorForTouch(touch) {
+
    function colorForTouch(touch) {
   var r = touch.identifier % 16;
   var g = Math.floor(touch.identifier / 3) % 16;
   var b = Math.floor(touch.identifier / 7) % 16;
@@ -214,7 +214,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Некоторые браузеры (например, мобильный Safari) повторно используют объекты касания в разных событиях, поэтому лучше копировать только важные свойства, а не ссылаться на весь объект.
    
 
-
    function copyTouch({ identifier, pageX, pageY }) {
+
    function copyTouch({ identifier, pageX, pageY }) {
   return { identifier, pageX, pageY };
 }
    
 
@@ -222,7 +222,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Приведённая ниже функция ongoingTouchIndexById() сканирует весь массив ongoingTouches, чтобы найти касание, соответствующее данному идентификатору, после чего возвращает в массив индекс этого касания.
    
 
-
    function ongoingTouchIndexById(idToFind) {
+
    function ongoingTouchIndexById(idToFind) {
   for (var i = 0; i < ongoingTouches.length; i++) {
     var id = ongoingTouches[i].identifier;
 
@@ -236,7 +236,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Отображение происходящего
    
 
-
    function log(msg) {
+
    function log(msg) {
   var p = document.getElementById('log');
   p.innerHTML = msg + "\n" + p.innerHTML;
 }
    
@@ -255,7 +255,7 @@ Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
    
 
 
    Данный пример очень упрощён и может привести к странному поведению. Он уместен исключительно как учебный пример.
    
 
-
    function onTouch(evt) {
+
    function onTouch(evt) {
   evt.preventDefault();
   if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
     return;
diff --git a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
index 06015736a0..d9f05fdec0 100644
--- a/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
+++ b/files/ru/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
 
 
    Ниже представлен пример обработчика события {{event("touchmove")}}, вызывающий preventDefault()
    
 
-
    // touchmove handler
+
    // touchmove handler
 function process_touchmove(ev) {
   // Call preventDefault() to prevent any further handling
   ev.preventDefault();
diff --git a/files/ru/web/api/touch_events/using_touch_events/index.html b/files/ru/web/api/touch_events/using_touch_events/index.html
index 45c1cd6245..cfc029b48c 100644
--- a/files/ru/web/api/touch_events/using_touch_events/index.html
+++ b/files/ru/web/api/touch_events/using_touch_events/index.html
@@ -54,7 +54,7 @@ translation_of: Web/API/Touch_events/Using_Touch_Events
 
 
    Назначьте обработчик событий для каждого типа события касания.
    
 
-
    // Назначение обработчика событий касания
+
    // Назначение обработчика событий касания
 someElement.addEventListener('touchstart', process_touchstart, false);
 someElement.addEventListener('touchmove', process_touchmove, false);
 someElement.addEventListener('touchcancel', process_touchcancel, false);
@@ -63,7 +63,7 @@ someElement.addEventListener('touchend', process_touchend, false);
 
 
    Обработчик события, реализующий семантику жестов приложения
    
 
-
    // Обработчик touchstart
+
    // Обработчик touchstart
 function process_touchstart(ev) {
   // Используется данные события, чтобы вызвать соответствующие обработчики жестов
   switch (ev.touches.length) {
@@ -77,7 +77,7 @@ function process_touchstart(ev) {
 
 
    Доступ к атрибутам точки касания.
    
 
-
    // Создание обработчика события "touchstart"
+
    // Создание обработчика события "touchstart"
 someElement.addEventListener('touchstart', function(ev) {
   // Перебор точек события, которые были активированы
   // для этого элемента и обработка каждого целевого элемента события
@@ -89,7 +89,7 @@ someElement.addEventListener('touchstart', function(ev) {
 
 
    Предотвращение эмуляции событий мыши
    
 
-
    // Обработчик события "touchmove"
+
    // Обработчик события "touchmove"
 function process_touchmove(ev) {
   // Вызов "preventDefault()"
   ev.preventDefault();
diff --git a/files/ru/web/api/touchevent/touches/index.html b/files/ru/web/api/touchevent/touches/index.html
index e377e1b8a3..8d76645501 100644
--- a/files/ru/web/api/touchevent/touches/index.html
+++ b/files/ru/web/api/touchevent/touches/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/TouchEvent/touches
 
 
    Синтаксис
    
 
-
    var touches = touchEvent.touches;
+
    var touches = touchEvent.touches;
 
    
 
 
    Возвращаемое значение
    
@@ -27,7 +27,7 @@ translation_of: Web/API/TouchEvent/touches
 
 
    В следующем фрагменте кода обработчик события {{event("touchstart")}} проверяет длину списка {{domxref("TouchEvent.touches")}} для определения количества точек касаний, которые были активированы, а затем вызывает разные обработчики в зависимости от количества таких точек.
    
 
-
    someElement.addEventListener('touchstart', function(e) {
+
    someElement.addEventListener('touchstart', function(e) {
    // Вызов определённого обработчика, в зависимости от
    // количества точек касания
    switch (e.touches.length) {
diff --git a/files/ru/web/api/usb/getdevices/index.html b/files/ru/web/api/usb/getdevices/index.html
index 8b69fce817..a0a61f2a3a 100644
--- a/files/ru/web/api/usb/getdevices/index.html
+++ b/files/ru/web/api/usb/getdevices/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/USB/getDevices
 
 
    Синтаксис
    
 
-
    USB.getDevices()
    
+
    USB.getDevices()
    
 
 
    Параметры
    
 
@@ -31,7 +31,7 @@ translation_of: Web/API/USB/getDevices
 
 
    В следующем примере имена продуктов и серийные номера сопряжённых устройств выводятся в консоль. Для информации о сопряжённых устройствах, смотрите {{DOMxRef("USB.requestDevice","USB.requestDevice()")}}.
    
 
-
    navigator.usb.getDevices()
+
    navigator.usb.getDevices()
 .then(devices => {
   console.log("Total devices: " + devices.length);
   devices.forEach(device => {
diff --git a/files/ru/web/api/usb/onconnect/index.html b/files/ru/web/api/usb/onconnect/index.html
index e0a26c8bac..abe16f16c4 100644
--- a/files/ru/web/api/usb/onconnect/index.html
+++ b/files/ru/web/api/usb/onconnect/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/USB/onconnect
 
 
    Синтаксис
    
 
-
    USB.onconnect = connectFunction
    
+
    USB.onconnect = connectFunction
    
 
 
    Спецификации
    
 
diff --git a/files/ru/web/api/usb/ondisconnect/index.html b/files/ru/web/api/usb/ondisconnect/index.html
index 742d276e88..ce89669aba 100644
--- a/files/ru/web/api/usb/ondisconnect/index.html
+++ b/files/ru/web/api/usb/ondisconnect/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/USB/ondisconnect
 
 
    Синтаксис
    
 
-
    USB.ondisconnect = disconnectFunction
    
+
    USB.ondisconnect = disconnectFunction
    
 
 
    Спецификации
    
 
diff --git a/files/ru/web/api/usb/requestdevice/index.html b/files/ru/web/api/usb/requestdevice/index.html
index 0d3a34f697..fc8257f9f8 100644
--- a/files/ru/web/api/usb/requestdevice/index.html
+++ b/files/ru/web/api/usb/requestdevice/index.html
@@ -17,7 +17,7 @@ translation_of: Web/API/USB/requestDevice
 
 
    Синтаксис
    
 
-
    USB.requestDevice([filters])
    
+
    USB.requestDevice([filters])
    
 
 
    Параметры
    
 
@@ -45,7 +45,7 @@ translation_of: Web/API/USB/requestDevice
 
 
    Количество фильтров не определяет количество устройств, показываемых браузером. Например, если найдено только USB-устройство с product ID 0xa800, браузер отобразит только одно устройство. Но, если браузер определит два устройства, совпадающих с первым фильтром, и ещё одно, совпадающее со вторым, будут показаны все три устройства.
    
 
-
    const filters = [
+
    const filters = [
         {vendorId: 0x1209, productId: 0xa800},
         {vendorId: 0x1209, productId: 0xa850}
       ];
diff --git a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
index 9e3a8044d1..b62150df16 100644
--- a/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
+++ b/files/ru/web/api/web_animations_api/using_the_web_animations_api/index.html
@@ -32,7 +32,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Заметьте, что фон двигается, Алиса крутится и её цвет меняется при вращении. Мы собираемся сосредоточиться только на Алисе в этом уроке. Вот упрощённый код CSS, который управляет движением Алисы.
    
 
-
    #alice {
+
    #alice {
   animation: aliceTumbling infinite 3s linear;
 }
 
@@ -60,7 +60,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    В первую очередь мы должны создать Keyframe Object соответствующего нашему CSS @keyframes блоку:
    
 
-
    var aliceTumbling = [
+
    var aliceTumbling = [
   { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
   { color: '#431236', offset: 0.333},
   { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
@@ -78,7 +78,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Мы также должны создать объекту временные свойства (an {{domxref("AnimationEffectTimingProperties")}} object) соответствующие значению анимации Алисы:
    
 
-
    var aliceTiming = {
+
    var aliceTiming = {
   duration: 3000,
   iterations: Infinity
 }
    
@@ -98,7 +98,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Сейчас соберём все части вместе используя {{domxref("Element.animate()")}} метод:
    
 
-
    document.getElementById("alice").animate(
+
    document.getElementById("alice").animate(
   aliceTumbling,
   aliceTiming
 )
    
@@ -107,7 +107,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    The animate() метод может быть применён на любой DOM-элемент, который может быть анимирован с помощью CSS. И он может быть записан несколькими способами. Вместо того, чтобы делить объекты на ключевые кадры и временные характеристики, мы могли бы просто передать свои значения непосредственно вот так:
    
 
-
    document.getElementById("alice").animate(
+
    document.getElementById("alice").animate(
   [
     { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
     { color: '#431236', offset: 0.333},
@@ -120,7 +120,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Более того, если мы хотели указать только длительность анимации, а не её повторение (по умолчанию анимации повторяется один раз), мы могли бы пройтись только по миллисекундам:
    
 
-
    document.getElementById("alice").animate(
+
    document.getElementById("alice").animate(
   [
     { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
     { color: '#431236', offset: 0.333},
@@ -139,7 +139,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Мы поговорим об анимации Алисы позже, а сейчас посмотрим поближе на анимации кекса:
    
 
-
    var nommingCake = document.getElementById('eat-me_sprite').animate(
+
    var nommingCake = document.getElementById('eat-me_sprite').animate(
 [
   { transform: 'translateY(0)' },
   { transform: 'translateY(-80%)' }
@@ -151,15 +151,15 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Метод {{domxref("Element.animate()")}} будет выполняться сразу же как начнётся игра. Чтобы предотвратить автоматическое поедание кекса до того, как пользователь на него нажмёт, мы вызываем {{domxref("Animation.pause()")}} сразу же как игра открывается, например так:
    
 
-
    nommingCake.pause();
    
+
    nommingCake.pause();
    
 
 
    Теперь мы можем запустить метод {{domxref("Animation.play()")}} когда будем готовы:
    
 
-
    nommingCake.play();
    
+
    nommingCake.play();
    
 
 
    Нам необходимо связать его с анимацией Алисы, чтобы она росла всякий раз, когда съедала кекс. Мы можем сделать это с помощью функции:
    
 
-
    var growAlice = function() {
+
    var growAlice = function() {
 
   // Play Alice's animation.
   aliceChange.play();
@@ -171,7 +171,7 @@ translation_of: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 
 
    Когда пользователь поместит указатель мыши вниз или нажимает пальцем на торт на сенсорном экране, мы можем вызвать growAlice, чтобы выполнить все анимации:
    
 
-
    cake.addEventListener("mousedown", growAlice, false);
+
    cake.addEventListener("mousedown", growAlice, false);
 cake.addEventListener("touchstart", growAlice, false);
    
 
 
    Другие полезные методы.
    
@@ -186,7 +186,7 @@ cake.addEventListener("touchstart", growAlice, false);
    
 
 
    Давайте посмотрим на первый playbackRate— отрицательное значение будет запускать анимацию в обратном направлении. Когда Алиса пьёт из бутылки, она становится меньше. Это происходит потому, что бутылка изменяет её анимацию playbackRate от 1 до -1:
    
 
-
    var shrinkAlice = function() {
+
    var shrinkAlice = function() {
   aliceChange.playbackRate = -1;
   aliceChange.play();
 }
@@ -200,7 +200,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);
    
 
 
    Так как маленькие дети легко устают, в отличии от шахматных фигур, Алиса постоянно замедляется. Мы отобразили это в коде путём ослабления (уменьшения скорости) playbackRate анимации.
    
 
-
    setInterval( function() {
+
    setInterval( function() {
 
   // Make sure the playback rate never falls below .4
   if (redQueen_alice.playbackRate > .4) {
@@ -211,7 +211,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);
    
 
 
    Но постоянно нажимая на них мышью, мы заставляем их ускориться путём умножения playbackRate (скорости анимации)
    
 
-
    var goFaster = function() {
+
    var goFaster = function() {
 
   redQueen_alice.playbackRate *= 1.1;
 
@@ -226,7 +226,7 @@ document.addEventListener("touchstart", goFaster);
    
 
 
    Представьте, что мы могли бы использовать playbackRate, как улучшения доступности сайта для пользователей с вестибулярными расстройствами, позволяя им замедлить анимацию на всех страницах сайта. Это невозможно сделать с помощью CSS без пересчёта длительности в каждом правиле CSS, но с веб-анимации API, мы могли бы использовать в будущем (пока не поддерживается в браузерах!) Метод {{domxref("document.getAnimations()")}} систему циклов по каждой анимации на странице и сократить скорость анимации вот так:
    
 
-
    document.getAnimations().forEach(
+
    document.getAnimations().forEach(
   function (animation) {
     animation.playbackRate *= .5;
   }
@@ -236,11 +236,11 @@ document.addEventListener("touchstart", goFaster);
    
 
 
    Другое дело, что это трудно делать только с CSS Animations, создавать зависимости от значения предусмотренные для других анимации. В примере игры про рост и уменьшение Алисы, вы можете заметить некоторые странности у кекса:
    
 
-
    duration: aliceChange.effect.timing.duration / 2
    
+
    duration: aliceChange.effect.timing.duration / 2
    
 
 
    Чтобы понять, что здесь происходит, давайте посмотрим на анимацию Алисы:
    
 
-
    var aliceChange = document.getElementById('alice').animate(
+
    var aliceChange = document.getElementById('alice').animate(
   [
     { transform: 'translate(-50%, -50%) scale(.5)' },
     { transform: 'translate(-50%, -50%) scale(2)' }
@@ -252,21 +252,21 @@ document.addEventListener("touchstart", goFaster);
    
 
 
    Изменение размера Алисы в два раза происходит за 8 секунд. Затем мы останавливаем её:
    
 
-
    aliceChange.pause();
    
+
    aliceChange.pause();
    
 
 
    Если бы оставили её на паузе в начале анимации , то Алиса увеличилась бы в два раза, когда выпила бы всю бутылку. Мы хотим остановить её анимацию "воспроизведение" в середине, когда она уже на половину выполнена. Мы могли бы это сделать, установив {{domxref("Animation.currentTime")}} 4 секунды, вот так:
    
 
-
    aliceChange.currentTime = 4000;
    
+
    aliceChange.currentTime = 4000;
    
 
 
    Но во время работы над этой анимацией мы можем сильно увеличить её продолжительность. Разве не лучше установить динамическое изменение времени (currentTime), тогда нам не придётся делать два обновления за один раз. Мы можем это сделать с помощью ссылки на изменение свойства размера Алисы (aliceChange) {{domxref("Animation.effect")}} который возвращает все детали и действующие эффекты, содержащиеся в объекте, на Алису:
    
 
-
    aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
    
+
    aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
    
 
 
    эффекты позволяют нам получить доступ к анимации keyframe (кадров) и синхронности объектов - aliceChange.effect.timing , указывающий на время Алисиных элементов (которые имеют тип {{domxref("AnimationEffectTimingReadOnly")}}) — в этом содержится её {{domxref("AnimationEffectTimingReadOnly.duration")}}. Мы можем распределить её длительность на два раза, чтобы получить среднюю точку во временной шкале для установки нормального роста.
    
 
 
    Теперь мы можем запустить её в обратном порядке и играться анимацией в любом направлении, чтобы заставить её расти или уменьшаться
    
 
-
    var drinking = document.getElementById('liquid').animate(
+
    var drinking = document.getElementById('liquid').animate(
 [
   { height: '100%' },
   { height: '0' }
@@ -282,7 +282,7 @@ drinking.pause();
    
 
 
    Мы также можем использовать веб-анимации API, чтобы выяснить Текущее время анимации. Игра заканчивается, когда вы бежите от съеденного торта или выпитой бутылки. Изображение у игрока будет зависеть от анимации Алисы. Стала ли она слишком большой на фоне крошечной двери и не может в неё пройти или слишком маленькой и не может достать ключ, чтобы открыть дверь. Мы можем выяснить, стала она большой или маленький в конце её анимация, получая текущее время её анимации currentTime и разделив её на activeDuration:
    
 
-
    var endGame = function() {
+
    var endGame = function() {
 
   // get Alice's timeline's playhead location
   var alicePlayhead = aliceChange.currentTime;
@@ -325,7 +325,7 @@ drinking.pause();
    
 
 
    Здесь мы устанавливаем колбэк для бутылки, кекса и Алисы, чтобы запустить функцию endGame.
    
 
-
    // When the cake or runs out...
+
    // When the cake or runs out...
 nommingCake.onfinish = endGame;
 drinking.onfinish = endGame;
 
diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html
index c79d753428..39b8c5436e 100644
--- a/files/ru/web/api/web_audio_api/index.html
+++ b/files/ru/web/api/web_audio_api/index.html
@@ -204,7 +204,7 @@ translation_of: Web/API/Web_Audio_API
 
 
    The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.
    
 
-
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
 // Webkit/blink browsers need prefix, Safari won't work without window.
 
 var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
index 5e035e4eb5..bc81da1a4b 100644
--- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
+++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -15,13 +15,13 @@ translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 
 
    Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:
    
 
-
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 
    
 
 
    Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:
    
 
-
    source = audioCtx.createMediaStreamSource(stream);
+
    source = audioCtx.createMediaStreamSource(stream);
 source.connect(analyser);
 analyser.connect(distortion);
 distortion.connect(audioCtx.destination);
    
@@ -42,13 +42,13 @@ distortion.connect(audioCtx.destination);
    
 
 
    Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.
    
 
-
    analyser.fftSize = 2048;
+
    analyser.fftSize = 2048;
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);
    
 
 
    Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:
    
 
-
    analyser.getByteTimeDomainData(dataArray);
    
+
    analyser.getByteTimeDomainData(dataArray);
    
 
 
    Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.
    
 
@@ -58,46 +58,46 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Чтобы визуализировать осциллограф (спасибо Soledad Penadés за код в Voice-change-O-matic), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:
    
 
-
    analyser.fftSize = 2048;
+
    analyser.fftSize = 2048;
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);
    
 
 
    Затем, мы очищаем холст:
    
 
-
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    
+
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    
 
 
    И определяем функцию draw():
    
 
-
    function draw() {
    
+
    function draw() {
    
 
 
    Здесь мы используем requestAnimationFrame() чтобы многократно вызывать эту функцию:
    
 
-
          drawVisual = requestAnimationFrame(draw);
    
+
          drawVisual = requestAnimationFrame(draw);
    
 
 
    Затем мы копируем данные в наш массив:
    
 
-
          analyser.getByteTimeDomainData(dataArray);
    
+
          analyser.getByteTimeDomainData(dataArray);
    
 
 
    Устанавливаем заливку холста
    
 
-
          canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+
          canvasCtx.fillStyle = 'rgb(200, 200, 200)';
       canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
    
 
 
    Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь
    
 
-
          canvasCtx.lineWidth = 2;
+
          canvasCtx.lineWidth = 2;
       canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
 
       canvasCtx.beginPath();
    
 
 
    Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.
    
 
-
          var sliceWidth = WIDTH * 1.0 / bufferLength;
+
          var sliceWidth = WIDTH * 1.0 / bufferLength;
       var x = 0;
    
 
 
    В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:
    
 
-
          for(var i = 0; i < bufferLength; i++) {
+
          for(var i = 0; i < bufferLength; i++) {
 
         var v = dataArray[i] / 128.0;
         var y = v * HEIGHT/2;
@@ -113,13 +113,13 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:
    
 
-
          canvasCtx.lineTo(canvas.width, canvas.height/2);
+
          canvasCtx.lineTo(canvas.width, canvas.height/2);
       canvasCtx.stroke();
     };
    
 
 
    В конце концов, мы вызываем функцию draw() , запускающую весь процесс:
    
 
-
        draw();
    
+
        draw();
    
 
 
    Мы получаем изображение волны, обновляющееся несколько раз в секунду:
    
 
@@ -131,7 +131,7 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи clearRect(). Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.
    
 
-
        analyser.fftSize = 256;
+
        analyser.fftSize = 256;
     var bufferLength = analyser.frequencyBinCount;
     console.log(bufferLength);
     var dataArray = new Uint8Array(bufferLength);
@@ -140,7 +140,7 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Затем мы запускаем функцию draw()  и задаём цикл при помощи requestAnimationFrame() таким образом, чтобы в каждом кадре анимации данные обновлялись.
    
 
-
        function draw() {
+
        function draw() {
       drawVisual = requestAnimationFrame(draw);
 
       analyser.getByteFrequencyData(dataArray);
@@ -152,7 +152,7 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Мы также устанавливаем значение переменных barHeight и x , задающей то, где на холсте должен быть размещён каждый столбец.
    
 
-
          var barWidth = (WIDTH / bufferLength) * 2.5;
+
          var barWidth = (WIDTH / bufferLength) * 2.5;
       var barHeight;
       var x = 0;
    
 
@@ -160,7 +160,7 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: HEIGHT-barHeight/2. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное положение в разность высоты холста и barHeight/2, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.
    
 
-
          for(var i = 0; i < bufferLength; i++) {
+
          for(var i = 0; i < bufferLength; i++) {
         barHeight = dataArray[i]/2;
 
         canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
@@ -172,7 +172,7 @@ var dataArray = new Uint8Array(bufferLength);
    
 
 
    Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.
    
 
-
        draw();
    
+
        draw();
    
 
 
    Этот код даёт нам следующий результат:
    
 
diff --git a/files/ru/web/api/web_authentication_api/index.html b/files/ru/web/api/web_authentication_api/index.html
index 6586d1b01c..026692ad6f 100644
--- a/files/ru/web/api/web_authentication_api/index.html
+++ b/files/ru/web/api/web_authentication_api/index.html
@@ -111,7 +111,7 @@ translation_of: Web/API/Web_Authentication_API
 
     В целях безопасности вызовы Web Authentication API ({{domxref('CredentialsContainer.create','create()')}} и {{domxref('CredentialsContainer.get','get()')}}) отменяются, если браузер теряет фокус до завершения вызова.
    
 
 
-
    // sample arguments for registration
+
    // sample arguments for registration
 var createCredentialDefaultArgs = {
     publicKey: {
         // Relying Party (a.k.a. - Service):
diff --git a/files/ru/web/api/web_speech_api/index.html b/files/ru/web/api/web_speech_api/index.html
index 97a8fc847a..dd8a96da5a 100644
--- a/files/ru/web/api/web_speech_api/index.html
+++ b/files/ru/web/api/web_speech_api/index.html
@@ -85,7 +85,7 @@ translation_of: Web/API/Web_Speech_API
 
 
    To use speech recognition in an app, you need to specify the following permissions in your manifest:
    
 
-
    "permissions": {
+
    "permissions": {
   "audio-capture" : {
     "description" : "Audio capture"
   },
@@ -96,7 +96,7 @@ translation_of: Web/API/Web_Speech_API
 
 
    You also need a privileged app, so you need to include this as well:
    
 
-
      "type": "privileged"
    
+
      "type": "privileged"
    
 
 
    Speech synthesis needs no permissions to be set.
    
 
diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
index c7f7606ae6..c200447752 100644
--- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
+++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -37,7 +37,7 @@ localStorage.setItem('colorSetting', '#a4509b');
 
 
    Функция, которая проверяет браузеры на поддержку и доступность localStorage:
    
 
-
    function storageAvailable(type) {
+
    function storageAvailable(type) {
 	try {
 		var storage = window[type],
 			x = '__storage_test__';
@@ -52,7 +52,7 @@ localStorage.setItem('colorSetting', '#a4509b');
 
 
    Вот как вы бы могли использовать это:
    
 
-
    if (storageAvailable('localStorage')) {
+
    if (storageAvailable('localStorage')) {
 	// Yippee! We can use localStorage awesomeness
 }
 else {
@@ -79,7 +79,7 @@ else {
 
 
    Начнём с main.js, мы проверим был ли уже заполнен объект Storage (т.е страница была ранее доступна)
    
 
-
    if(!localStorage.getItem('bgcolor')) {
+
    if(!localStorage.getItem('bgcolor')) {
   populateStorage();
 } else {
   setStyles();
@@ -93,7 +93,7 @@ else {
 
 
    Как было отмечено выше, значения хранилища могут быть извлечены используя {{domxref("Storage.getItem()")}}. В качестве аргумента функция принимает значение ключа элемента хранилища, а возвращает значение этого элемента. Например:
    
 
-
    function setStyles() {
+
    function setStyles() {
   var currentColor = localStorage.getItem('bgcolor');
   var currentFont = localStorage.getItem('font');
   var currentImage = localStorage.getItem('image');
@@ -113,7 +113,7 @@ else {
 
 
    {{domxref("Storage.setItem()")}} is used both to create new data items, and (if the data item already exists) update existing values. This takes two arguments — the key of the data item to create/modify, and the value to store in it.
    
 
-
    function populateStorage() {
+
    function populateStorage() {
   localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
   localStorage.setItem('font', document.getElementById('font').value);
   localStorage.setItem('image', document.getElementById('image').value);
@@ -125,7 +125,7 @@ else {
 
 
    We've also included an onchange handler on each form element, so that the data and styling is updated whenever a form value is changed:
    
 
-
    bgcolorForm.onchange = populateStorage;
+
    bgcolorForm.onchange = populateStorage;
 fontForm.onchange = populateStorage;
 imageForm.onchange = populateStorage;
    
 
@@ -135,7 +135,7 @@ imageForm.onchange = populateStorage;
    
 
 
    On the events page (see events.js) the only JavaScript is as follows:
    
 
-
    window.addEventListener('storage', function(e) {
+
    window.addEventListener('storage', function(e) {
   document.querySelector('.my-key').textContent = e.key;
   document.querySelector('.my-old').textContent = e.oldValue;
   document.querySelector('.my-new').textContent = e.newValue;
diff --git a/files/ru/web/api/web_workers_api/using_web_workers/index.html b/files/ru/web/api/web_workers_api/using_web_workers/index.html
index c0eae11fe9..e0af292e16 100644
--- a/files/ru/web/api/web_workers_api/using_web_workers/index.html
+++ b/files/ru/web/api/web_workers_api/using_web_workers/index.html
@@ -37,7 +37,7 @@ original_slug: DOM/Using_web_workers
 
 
    Для большего контроля над ошибками и обратной совместимости, рекомендуется обернуть ваш код доступа к worker-у в следующий (main.js):
    
 
-
    if (window.Worker) {
+
    if (window.Worker) {
 
   ...
 
@@ -48,7 +48,7 @@ original_slug: DOM/Using_web_workers
 
    Создание нового worker-а — это легко. Всё что вам нужно это вызвать конструктор {{domxref("Worker.Worker", "Worker()")}}, указав URI скрипта для выполнения в потоке worker-а (main.js):
    
 
 
    
-
    var myWorker = new Worker("worker.js");
+
    var myWorker = new Worker("worker.js");
 
    
 
    
 
@@ -56,7 +56,7 @@ original_slug: DOM/Using_web_workers
 
 
    Магия worker-ов происходит через {{domxref("Worker.postMessage", "postMessage()")}} метод и обработчик событий {{domxref("Worker.onmessage", "onmessage")}}. Когда вы хотите отправить сообщение в worker, вы доставляете сообщение к нему вот так (main.js):
    
 
-
    first.onchange = function() {
+
    first.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
   console.log('Message posted to worker');
 }
@@ -70,7 +70,7 @@ second.onchange = function() {
 
 
    Внутри worker-a мы можем обрабатывать сообщения и отвечать на них при помощи добавления обработчика события onmessage подобным образом (worker.js):
    
 
-
    onmessage = function(e) {
+
    onmessage = function(e) {
   console.log('Message received from main script');
   var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
   console.log('Posting message back to main script');
@@ -81,7 +81,7 @@ second.onchange = function() {
 
 
    Возвращаясь в основной поток, мы используем onmessage снова, чтобы отреагировать на сообщение, отправленное нам назад из worker-а:
    
 
-
    myWorker.onmessage = function(e) {
+
    myWorker.onmessage = function(e) {
   result.textContent = e.data;
   console.log('Message received from worker');
 }
    
@@ -96,7 +96,7 @@ second.onchange = function() {
 
 
    Прекращение работы worker-а главного потока достигается методом {{domxref("Worker", "terminate")}}:
    
 
-
    myWorker.terminate();
    
+
    myWorker.terminate();
    
 
 
    Поток worker-а немедленно уничтожается.
    
 
@@ -125,7 +125,7 @@ second.onchange = function() {
 
 
    Worker потоки имеют доступ к глобальной функции, importScripts(), которая позволяет импортировать скрипты с того же домена в их область видимости. Функция принимает ноль и более URI параметров, как список ссылок на ресурсы для импорта; все нижеприведённые примеры верны:
    
 
-
    importScripts();                        /* imports nothing */
+
    importScripts();                        /* imports nothing */
 importScripts('foo.js');                /* imports just "foo.js" */
 importScripts('foo.js', 'bar.js');      /* imports two scripts */
 
    
@@ -152,7 +152,7 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
 
 
    Запуск разделяемого worker-а очень похож на запуск выделенного worker-а, но используется другой конструктор (см. index.html и index2.html) — в каждом документе необходимо поднять worker, для этого следует написать такой код:
    
 
-
    var myWorker = new SharedWorker("worker.js");
    
+
    var myWorker = new SharedWorker("worker.js");
    
 
 
    Большая разница заключается в том, что с разделяемым worker-ом необходимо взаимодействовать через объект port — явно открыв порт, с помощью которого скрипты могут взаимодействовать с worker-ом (в случае выделенного worker-а это происходит неявно).
    
 
@@ -162,22 +162,22 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
 
    Примечание: Когда используется метод start() чтобы открыть соединение с портом, его необходимо вызывать и в родительском потоке и в потоке worker-а, если необходима двухсторонняя коммуникация.
    
 
 
-
    myWorker.port.start();  // в родительском потоке
    
+
    myWorker.port.start();  // в родительском потоке
    
 
-
    port.start();  // в потоке worker-а, где переменная port является ссылкой на порт
    
+
    port.start();  // в потоке worker-а, где переменная port является ссылкой на порт
    
 
 
    Передача сообщений в/из разделяемого worker-а
    
 
 
    Теперь сообщения могут быть отправлены worker-у, как и прежде, но метод postMessage() должен вызываться из объекта port (ещё раз, вы можете увидеть схожие конструкции в multiply.js и square.js):
    
 
-
    squareNumber.onchange = function() {
+
    squareNumber.onchange = function() {
   myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
   console.log('Message posted to worker');
 }
    
 
 
    Теперь на стороне worker-а. Здесь код немного сложнее (worker.js):
    
 
-
    self.addEventListener('connect', function(e) { // требуется addEventListener()
+
    self.addEventListener('connect', function(e) { // требуется addEventListener()
   var port = e.ports[0];
   port.onmessage = function(e) {
     var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
@@ -194,7 +194,7 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
 
 
    Последний этап — возвращение в основной поток и обработка сообщения от worker‑а (ещё раз, вы можете увидеть схожие конструкции в multiply.js и square.js):
    
 
-
    myWorker.port.onmessage = function(e) {
+
    myWorker.port.onmessage = function(e) {
   result2.textContent = e.data[0];
   console.log('Message received from worker');
 }
    
@@ -213,7 +213,7 @@ importScripts('foo.js', 'bar.js');      /* imports two scripts */
 
 
    Для иллюстрации этого мы создадим функцию emulateMessage(), которая будет имитировать поведение значения, которое клонируется, но не используется совместно при переходе от worker-а к главной странице или наоборот.
    
 
-
    function emulateMessage (vVal) {
+
    function emulateMessage (vVal) {
     return eval("(" + JSON.stringify(vVal) + ")");
 }
 
@@ -255,7 +255,7 @@ alert(emulateMessage(example5).constructor); // Object
    
 
 
    example.html: (главная страница):
    
 
-
    var myWorker = new Worker("my_task.js");
+
    var myWorker = new Worker("my_task.js");
 
 myWorker.onmessage = function (oEvent) {
   console.log("Worker said : " + oEvent.data);
@@ -265,7 +265,7 @@ myWorker.postMessage("ali");
    
 
 
    my_task.js (worker):
    
 
-
    postMessage("I\'m working before postMessage(\'ali\').");
+
    postMessage("I\'m working before postMessage(\'ali\').");
 
 onmessage = function (oEvent) {
   postMessage("Hi " + oEvent.data);
@@ -281,7 +281,7 @@ onmessage = function (oEvent) {
 
 
    В первую очередь мы создаём класс QueryableWorker, который принимает url worker-а, стандартный обработчик событий (defaultListener) и обработчик ошибок. Этот класс будет отслеживать всех обработчиков и поможет нам общаться с воркером.
    
 
-
    function QueryableWorker(url, defaultListener, onError) {
+
    function QueryableWorker(url, defaultListener, onError) {
     var instance = this,
         worker = new Worker(url),
         listeners = {};
@@ -302,7 +302,7 @@ onmessage = function (oEvent) {
 
 
    Затем мы добавляем методы добавления/удаления обработчиков.
    
 
-
    this.addListeners = function(name, listener) {
+
    this.addListeners = function(name, listener) {
     listeners[name] = listener;
 }
 
@@ -313,7 +313,7 @@ this.removeListeners = function(name) {
 
 
    Здесь мы создадим у worker-а два простых события для примера: получение разницы двух чисел и создание оповещения через три секунды. Но сначала нам нужно реализовать метод sendQuery, который проверит есть ли вообще у worker-а обработчик, который мы собираемся вызвать.
    
 
-
    /*
+
    /*
   Эта функция принимает по крайней мере один аргумент: имя метода, который мы хотим вызвать.
   Далее мы можем передать методу необходимые ему аргументы.
  */
@@ -331,7 +331,7 @@ this.sendQuery = function() {
 
 
    Завершим QueryableWorker методом onmessage.  Если worker имеет соответствующий метод, который мы запросили, он также должен вернуть соответствующий обработчик и аргументы, которые нам нужны. Останется лишь найти его в listeners:
    
 
-
    worker.onmessage = function(event) {
+
    worker.onmessage = function(event) {
     if (event.data instanceof Object &&
         event.data.hasOwnProperty('queryMethodListener') &&
         event.data.hasOwnProperty('queryMethodArguments')) {
@@ -344,7 +344,7 @@ this.sendQuery = function() {
 
 
    Теперь к самому worker-у. Сначала следует определить эти два простых метода:
    
 
-
    var queryableFunctions = {
+
    var queryableFunctions = {
     getDifference: function(a, b) {
         reply('printStuff', a - b);
     },
@@ -374,7 +374,7 @@ function defaultReply(message) {
 
 
    И onmessage:
    
 
-
    onmessage = function(event) {
+
    onmessage = function(event) {
     if (event.data instanceof Object &&
         event.data.hasOwnProperty('queryMethod') &&
         event.data.hasOwnProperty('queryMethodArguments')) {
@@ -389,7 +389,7 @@ function defaultReply(message) {
 
 
    example.html (основная страница):
    
 
-
    <!doctype html>
+
    <!doctype html>
   <html>
     <head>
       <meta charset="UTF-8"  />
@@ -480,7 +480,7 @@ function defaultReply(message) {
 
 
    my_task.js (код worker-а):
    
 
-
    var queryableFunctions = {
+
    var queryableFunctions = {
   // пример #1: получить разницу между двумя числами
   getDifference: function(nMinuend, nSubtrahend) {
       reply('printStuff', nMinuend - nSubtrahend);
@@ -518,7 +518,7 @@ onmessage = function(oEvent) {
 
 
    Google Chrome 17+ and Firefox 18+ имеют дополнительную возможность передачи определённых типов объектов (передаваемые объекты реализующие {{domxref("Transferable")}} интерфейс) к или из worker-а с высокой производительностью. Эти объекты передаются из одного контекста в другой без операций копирования, что приводит к значительному повышению производительности при отправке больших наборов данных. Думайте об этом как о передаче по ссылке в мире C/C++. Однако в отличии от передачи по ссылке, "версия" из вызывающего контекста больше недоступна после передачи. Владельцем становится новый контекст.  Для примера, после передачи {{domxref("ArrayBuffer")}} из главной страницы к worker-у,  исходный {{domxref("ArrayBuffer")}} очищается и более недоступен для использования.  Его содержание (в буквальном смысле) переносится в рабочий контекст.
    
 
-
    // Create a 32MB "file" and fill it.
+
    // Create a 32MB "file" and fill it.
 var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
 for (var i = 0; i < uInt8Array.length; ++i) {
   uInt8Array[i] = i;
@@ -535,7 +535,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
 
 
    Не существует утверждённого способа встроить код worker-а в рамках веб-страницы, как элемент {{HTMLElement("script")}} делает для обычных скриптов. Но элемент {{HTMLElement("script")}}, который не имеет атрибута src и атрибута  type, которому не назначен выполняемый MIME type, можно считать блоком данных для использования JavaScript. Блок данных "Data blocks" — это более общее свойство HTML5, может содержать любые текстовые данные. Так, worker может быть встроен следующим образом:
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8" />
@@ -591,7 +591,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
 
 
    Также стоит отметить, что вы также можете преобразовать функцию в BLOB-объект, а затем сгенерировать URL объекта из этого BLOB-объекта. Например:
    
 
-
    function fn2workerURL(fn) {
+
    function fn2workerURL(fn) {
   var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
   return URL.createObjectURL(blob)
 }
@@ -609,7 +609,7 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
 
 
    Следующий код JavaScript хранится в файле "fibonacci.js", на который ссылается HTML в следующем разделе.
    
 
-
    var results = [];
+
    var results = [];
 
 function resultReceiver(event) {
   results.push(parseInt(event.data));
@@ -642,7 +642,7 @@ onmessage = function(event) {
 
 
    HTML код
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8"  />
diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
index 73db097039..2dbda88c71 100644
--- a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
+++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html
@@ -33,7 +33,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 
    First up is the addition of the function sendToOneUser(). As the name suggests, this sends a stringified JSON message to a particular username.
    
 
-
    function sendToOneUser(target, msgString) {
+
    function sendToOneUser(target, msgString) {
   var isUnique = true;
   var i;
 
@@ -49,7 +49,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 
    Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the "connection" message handler:
    
 
-
    if (sendToClients) {
+
    if (sendToClients) {
   var msgString = JSON.stringify(msg);
   var i;
 
@@ -163,7 +163,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 
    The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:
    
 
-
    <div class="flexChild" id="camera-container">
+
    <div class="flexChild" id="camera-container">
   <div class="camera-box">
     <video id="received_video" autoplay></video>
     <video id="local_video" autoplay muted></video>
@@ -187,7 +187,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 
    Throughout our code, we call sendToServer() in order to send messages to the signaling server. This function uses the WebSocket connection to do its work:
    
 
-
    function sendToServer(msg) {
+
    function sendToServer(msg) {
   var msgJSON = JSON.stringify(msg);
 
   connection.send(msgJSON);
@@ -199,7 +199,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 
    The code which handles the "userlist" message calls handleUserlistMsg(). Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose users property is an array of strings specifying the user names of every connected user.
    
 
-
    function handleUserlistMsg(msg) {
+
    function handleUserlistMsg(msg) {
   var i;
   var listElem = document.querySelector(".userlistbox");
 
@@ -230,7 +230,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 
    When the user clicks on a username they want to call, the invite() function is invoked as the event handler for that {{event("click")}} event:
    
 
-
    var mediaConstraints = {
+
    var mediaConstraints = {
   audio: true, // We want an audio track
   video: true // ...and we want a video track
 };
@@ -280,7 +280,7 @@ function invite(evt) {
 
 
    If the promise returned by getUserMedia() concludes in a failure, our handleGetUserMediaError() function performs.
    
 
-
    function handleGetUserMediaError(e) {
+
    function handleGetUserMediaError(e) {
   switch(e.name) {
     case "NotFoundError":
       alert("Unable to open your call because no camera and/or microphone" +
@@ -306,7 +306,7 @@ function invite(evt) {
 
 
    The createPeerConnection() function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by invite() when the caller tries to start a call, and by handleVideoOfferMsg() when the callee receives an offer message from the caller.
    
 
-
    function createPeerConnection() {
+
    function createPeerConnection() {
   myPeerConnection = new RTCPeerConnection({
       iceServers: [     // Information about ICE servers - Use your own!
         {
@@ -358,7 +358,7 @@ function invite(evt) {
 
 
    Once the caller has created its  {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:
    
 
-
    function handleNegotiationNeededEvent() {
+
    function handleNegotiationNeededEvent() {
   myPeerConnection.createOffer().then(function(offer) {
     return myPeerConnection.setLocalDescription(offer);
   })
@@ -406,7 +406,7 @@ function invite(evt) {
 
 
    When the offer arrives, the callee's handleVideoOfferMsg() function is called with the "video-offer" message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.
    
 
-
    function handleVideoOfferMsg(msg) {
+
    function handleVideoOfferMsg(msg) {
   var localStream = null;
 
   targetUsername = msg.name;
@@ -460,7 +460,7 @@ function invite(evt) {
 
 
    Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose candidate property is the SDP describing the candidate (or is null to indicate that the ICE layer has run out of potential configurations to suggest). The contents of candidate are what you need to transmit using your signaling server. Here's our example's implementation:
    
 
-
    function handleICECandidateEvent(event) {
+
    function handleICECandidateEvent(event) {
   if (event.candidate) {
     sendToServer({
       type: "new-ice-candidate",
@@ -491,7 +491,7 @@ function invite(evt) {
 
 
    The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a type property containing the string "new-ice-candidate". Our handleNewICECandidateMsg() function is called by our main WebSocket incoming message code to handle these messages:
    
 
-
    function handleNewICECandidateMsg(msg) {
+
    function handleNewICECandidateMsg(msg) {
   var candidate = new RTCIceCandidate(msg.candidate);
 
   myPeerConnection.addIceCandidate(candidate)
@@ -514,7 +514,7 @@ function invite(evt) {
 
 
    When new tracks are added to the RTCPeerConnection— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the RTCPeerConnection for each track added to the connection. Making use of newly added media requires implementing a handler for the track event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:
    
 
-
    function handleTrackEvent(event) {
+
    function handleTrackEvent(event) {
   document.getElementById("received_video").srcObject = event.streams[0];
   document.getElementById("hangup-button").disabled = false;
 }
    
@@ -527,7 +527,7 @@ function invite(evt) {
 
 
    Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for "removetrack" is:
    
 
-
    function handleRemoveTrackEvent(event) {
+
    function handleRemoveTrackEvent(event) {
   var stream = document.getElementById("received_video").srcObject;
   var trackList = stream.getTracks();
 
@@ -548,7 +548,7 @@ function invite(evt) {
 
 
    When the user clicks the "Hang Up" button to end the call, the hangUpCall() function is called:
    
 
-
    function hangUpCall() {
+
    function hangUpCall() {
   closeVideoCall();
   sendToServer({
     name: myUsername,
@@ -563,7 +563,7 @@ function invite(evt) {
 
 
    The closeVideoCall() function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:
    
 
-
    function closeVideoCall() {
+
    function closeVideoCall() {
   var remoteVideo = document.getElementById("received_video");
   var localVideo = document.getElementById("local_video");
 
@@ -620,7 +620,7 @@ function invite(evt) {
 
 
    {{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).
    
 
-
    function handleICEConnectionStateChangeEvent(event) {
+
    function handleICEConnectionStateChangeEvent(event) {
   switch(myPeerConnection.iceConnectionState) {
     case "closed":
     case "failed":
@@ -636,7 +636,7 @@ function invite(evt) {
 
 
    Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to closed, we likewise close the call out.
    
 
-
    function handleSignalingStateChangeEvent(event) {
+
    function handleSignalingStateChangeEvent(event) {
   switch(myPeerConnection.signalingState) {
     case "closed":
       closeVideoCall();
@@ -652,7 +652,7 @@ function invite(evt) {
 
 
    {{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.
    
 
-
    function handleICEGatheringStateChangeEvent(event) {
+
    function handleICEGatheringStateChangeEvent(event) {
   // Our sample just logs information to console here,
   // but you can do whatever you need.
 }
diff --git a/files/ru/web/api/webvtt_api/index.html b/files/ru/web/api/webvtt_api/index.html
index 9bd0e2eead..2c7869eec6 100644
--- a/files/ru/web/api/webvtt_api/index.html
+++ b/files/ru/web/api/webvtt_api/index.html
@@ -13,7 +13,7 @@ translation_of: Web/API/WebVTT_API
 
 
    Файл WebVTT (.vtt) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:
    
 
-
    WEBVTT
+
    WEBVTT
 
 00:01.000 --> 00:04.000
 Никогда не пейте жидкий азот.
@@ -44,17 +44,17 @@ translation_of: Web/API/WebVTT_API
 
 
    Пример 1 - Простейший возможный файл WEBVTT
    
 
-
    WEBVTT
+
    WEBVTT
 
    
 
 
    Пример 2 - Очень простой файл WebVTT с текстовым заголовком
    
 
-
    WEBVTT - Этот файл не содержит реплик.
+
    WEBVTT - Этот файл не содержит реплик.
 
    
 
 
    Пример 3 - Обычный WebVTT с заголовком и репликами
    
 
-
    WEBVTT - Этот файл содержит реплики.
+
    WEBVTT - Этот файл содержит реплики.
 
 14
 00:01:14.815 --> 00:01:18.114
@@ -75,7 +75,7 @@ translation_of: Web/API/WebVTT_API
 
 
    Давайте вернёмся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.
    
 
-
    WEBVTT
+
    WEBVTT
 
 00:01.000 --> 00:04.000
 - Never drink liquid nitrogen.
@@ -115,12 +115,12 @@ NOTE Это последняя строка в файле
    
 
 
    Example 4 - Common WebVTT example
    
 
-
    NOTE This is a comment
+
    NOTE This is a comment
 
    
 
 
    Example 5 - Multi-line comment
    
 
-
    NOTE
+
    NOTE
 Another comment that is spanning
 more than one line.
 
@@ -130,7 +130,7 @@ across more than one line this way.
 
 
    Example 6 - Common comment usage
    
 
-
    WEBVTT - Translation of that film I like
+
    WEBVTT - Translation of that film I like
 
 NOTE
 This translation was done by Kyle so that
@@ -159,7 +159,7 @@ NOTE This last line may not translate well.
 
 
    В CSS-стилях сайта
    
 
-
    video::cue {
+
    video::cue {
   background-image: linear-gradient(to bottom, dimgray, lightgray);
   color: papayawhip;
 }
@@ -173,7 +173,7 @@ video::cue(b) {
 
 
    Фрагмент HTML, приведённый ниже, отображает видео.
    
 
-
    <video controls autoplay src="video.webm">
+
    <video controls autoplay src="video.webm">
  <track default src="track.vtt">
 </video>
 
    
@@ -182,7 +182,7 @@ video::cue(b) {
 
 
    You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string "STYLE" all by itelf on a line of text, as shown below:
    
 
-
    WEBVTT
+
    WEBVTT
 
 STYLE
 ::cue {
@@ -205,7 +205,7 @@ NOTE style blocks cannot appear after the first cue.
    
 
 
    We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:
    
 
-
    WEBVTT
+
    WEBVTT
 
 1
 00:00.000 --> 00:02.000
@@ -216,12 +216,12 @@ crédit de transcription
 Transcrit par Célestes™
 
    
 
-
    ::cue(#\31) { color: lime; }
+
    ::cue(#\31) { color: lime; }
 ::cue(#crédit\ de\ transcription) { color: red; }
    
 
 
    Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):
    
 
-
    WEBVTT
+
    WEBVTT
 
 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
 Where did he go?
@@ -246,7 +246,7 @@ What are you waiting for?
    
 
 
    Example 7 - Example of a cue
    
 
-
    1 - Title Crawl
+
    1 - Title Crawl
 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
 Some time ago in a place rather distant....
    
 
@@ -256,11 +256,11 @@ Some time ago in a place rather distant....
    
 
 
    Example 8 - Cue identifier from Example 7
    
 
-
    1 - Title Crawl
    
+
    1 - Title Crawl
    
 
 
    Example 9 - Common usage of identifiers
    
 
-
    WEBVTT
+
    WEBVTT
 
 1
 00:00:22.230 --> 00:00:24.606
@@ -331,20 +331,20 @@ Third
 
 
    Example 10 - Basic cue timing examples
    
 
-
    00:22.230 --> 00:24.606
+
    00:22.230 --> 00:24.606
 00:30.739 --> 00:00:34.074
 00:00:34.159 --> 00:35.743
 00:00:35.827 --> 00:00:40.122
    
 
 
    Example 11 - Overlapping cue timing examples
    
 
-
    00:00:00.000 --> 00:00:10.000
+
    00:00:00.000 --> 00:00:10.000
 00:00:05.000 --> 00:01:00.000
 00:00:30.000 --> 00:00:50.000
    
 
 
    Example 12 - Non-overlapping cue timing examples
    
 
-
    00:00:00.000 --> 00:00:10.000
+
    00:00:00.000 --> 00:00:10.000
 00:00:10.000 --> 00:01:00.581
 00:01:00.581 --> 00:02:00.100
 00:02:01.000 --> 00:02:01.000
    
@@ -555,7 +555,7 @@ Third
 
 
    The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.
    
 
-
    00:00:05.000 --> 00:00:10.000
+
    00:00:05.000 --> 00:00:10.000
 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
@@ -628,7 +628,7 @@ Third
   
    
   
    Example 12 - Karaoke style text
    
 
-  
    1
+  
    1
 00:16.500 --> 00:18.500
 When the moon <00:17.500>hits your eye
 
@@ -656,7 +656,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 14 - Class tag
    
 
-  
    <c.classname>text</c>
    
+  
    <c.classname>text</c>
    
   
    
  
    • 
  
  • Italics tag (<i></i>)
@@ -667,7 +667,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 15 - Italics tag
    
 
-  
    <i>text</i>
    
+  
    <i>text</i>
    
   
    
  
    • 
  
  • Bold tag (<b></b>)
@@ -678,7 +678,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 16 - Bold tag
    
 
-  
    <b>text</b>
    
+  
    <b>text</b>
    
   
    
  
    • 
  
  • Underline tag (<u></u>)
@@ -689,7 +689,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 17 - Underline tag
    
 
-  
    <u>text</u>
    
+  
    <u>text</u>
    
   
    
  
    • 
  
  • Ruby tag (<ruby></ruby>)
@@ -700,7 +700,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 18 - Ruby tag
    
 
-  
    <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
    
+  
    <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
    
   
    
  
    • 
  
  • Ruby text tag (<rt></rt>)
@@ -711,7 +711,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 19 - Ruby text tag
    
 
-  
    <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
    
+  
    <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
    
   
    
  
    • 
  
  • Voice tag (<v></v>)
@@ -722,7 +722,7 @@ That's <00:00:21.000>amore
   
    
   
    Example 20 - Voice tag
    
 
-  
    <v Bob>text</v>
    
+  
    <v Bob>text</v>
    
   
    
  
    • 
 

@@ -737,7 +737,7 @@ That's <00:00:21.000>amore
 
 
Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:

 
-
enum AutoKeyword { "auto" };
+
enum AutoKeyword { "auto" };
 enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
 enum LineAlignSetting { "start", "center", "end" };
 enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
@@ -763,7 +763,7 @@ interface VTTCue : enum ScrollSetting { "" /* none */, "up" };
+
enum ScrollSetting { "" /* none */, "up" };
 [Constructor]
 interface VTTRegion {
   attribute double width;
@@ -819,11 +819,11 @@ interface VTTRegion {
  
  • The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.
    • 
 
 
-
    WEBVTT
    
+
    WEBVTT
    
 
 
          3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:
    
 
-
    00:01.000 --> 00:05.000
    
+
    00:01.000 --> 00:05.000
    
 
 
      
  
    1. On the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive.
      2. 
@@ -836,7 +836,7 @@ interface VTTRegion {
 
 
      It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:
      
 
-
      WEBVTT
+
      WEBVTT
 
 04:02.500 --> 04:05.000
 J’ai commencé le basket à l'âge de 13, 14 ans
diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html
index 2c5bc0a27d..74c2ec65e6 100644
--- a/files/ru/web/api/window/beforeunload_event/index.html
+++ b/files/ru/web/api/window/beforeunload_event/index.html
@@ -51,7 +51,7 @@ translation_of: Web/API/Window/beforeunload_event
 
 
      В HTML-спецификации указано, что авторы должны использовать метод {{domxref("Event.preventDefault()")}}, а не {{domxref("Event.returnValue")}}. Однако, это поддерживается не всеми браузерами.
      
 
-
      window.addEventListener('beforeunload', (event) => {
+
      window.addEventListener('beforeunload', (event) => {
   // Отмените событие, как указано в стандарте.
   event.preventDefault();
   // Chrome требует установки возвратного значения.
diff --git a/files/ru/web/api/window/cancelanimationframe/index.html b/files/ru/web/api/window/cancelanimationframe/index.html
index 897d147ae0..9f02501a9a 100644
--- a/files/ru/web/api/window/cancelanimationframe/index.html
+++ b/files/ru/web/api/window/cancelanimationframe/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/Window/cancelAnimationFrame
 
 
      Синтаксис
      
 
-
      window.cancelAnimationFrame(requestID);
+
      window.cancelAnimationFrame(requestID);
 
      
 
 
      Параметры
      
@@ -21,7 +21,7 @@ translation_of: Web/API/Window/cancelAnimationFrame
 
 
      Примеры
      
 
-
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                             window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
 var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
diff --git a/files/ru/web/api/window/ongamepadconnected/index.html b/files/ru/web/api/window/ongamepadconnected/index.html
index db5f8eecd4..5d7c5a5a2c 100644
--- a/files/ru/web/api/window/ongamepadconnected/index.html
+++ b/files/ru/web/api/window/ongamepadconnected/index.html
@@ -11,12 +11,12 @@ translation_of: Web/API/Window/ongamepadconnected
 
 
      Синтаксис
      
 
-
      window.ongamepadconnected = function() { ... };
+
      window.ongamepadconnected = function() { ... };
 
      
 
 
      Пример
      
 
-
      window.ongamepadconnected = function(event) {
+
      window.ongamepadconnected = function(event) {
   // All buttons and axes values can be accessed through
   event.gamepad;
 };
      
diff --git a/files/ru/web/api/window/ongamepaddisconnected/index.html b/files/ru/web/api/window/ongamepaddisconnected/index.html
index 2769b29f4c..acff189b81 100644
--- a/files/ru/web/api/window/ongamepaddisconnected/index.html
+++ b/files/ru/web/api/window/ongamepaddisconnected/index.html
@@ -11,12 +11,12 @@ translation_of: Web/API/Window/ongamepaddisconnected
 
 
      Синтаксис
      
 
-
      window.ongamepaddisconnected = function() { ... };
+
      window.ongamepaddisconnected = function() { ... };
 
      
 
 
      Пример
      
 
-
      window.ongamepaddisconnected = function() {
+
      window.ongamepaddisconnected = function() {
   // A gamepad has been disconnected
 };
      
 
diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html
index 7649842dc6..8f2a58bfae 100644
--- a/files/ru/web/api/window/requestanimationframe/index.html
+++ b/files/ru/web/api/window/requestanimationframe/index.html
@@ -18,7 +18,7 @@ original_slug: DOM/window.requestAnimationFrame
 
 
      Синтаксис
      
 
-
      window.requestAnimationFrame(callback);
      
+
      window.requestAnimationFrame(callback);
      
 
 
      Параметры
      
 
@@ -35,7 +35,7 @@ original_slug: DOM/window.requestAnimationFrame
 
 
      Пример
      
 
-
      var start = null;
+
      var start = null;
 var element = document.getElementById('SomeElementYouWantToAnimate');
 
 function step(timestamp) {
diff --git a/files/ru/web/api/windowclient/index.html b/files/ru/web/api/windowclient/index.html
index 3f05357c09..e5d5134b85 100644
--- a/files/ru/web/api/windowclient/index.html
+++ b/files/ru/web/api/windowclient/index.html
@@ -40,7 +40,7 @@ translation_of: Web/API/WindowClient
 
 
      Пример
      
 
-
      self.addEventListener('notificationclick', function(event) {
+
      self.addEventListener('notificationclick', function(event) {
   console.log('On notification click: ', event.notification.tag);
   event.notification.close();
 
diff --git a/files/ru/web/api/windoweventhandlers/onpopstate/index.html b/files/ru/web/api/windoweventhandlers/onpopstate/index.html
index 5c168c1a61..efcf2ad0d7 100644
--- a/files/ru/web/api/windoweventhandlers/onpopstate/index.html
+++ b/files/ru/web/api/windoweventhandlers/onpopstate/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate
 
 
      Синтаксис
      
 
-
      window.onpopstate = funcRef;
+
      window.onpopstate = funcRef;
 
      
 
 
        
@@ -26,7 +26,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate
 
 
        В качестве примера, страница http://example.com/example.html, исполняя нижеследующий код, сгенерирует всплывающие сообщения, как показано в комментариях:
        
 
-
        window.onpopstate = function(event) {
+
        window.onpopstate = function(event) {
   alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
 };
 
diff --git a/files/ru/web/api/workerglobalscope/importscripts/index.html b/files/ru/web/api/workerglobalscope/importscripts/index.html
index 30e59c5b3e..ef2736acac 100644
--- a/files/ru/web/api/workerglobalscope/importscripts/index.html
+++ b/files/ru/web/api/workerglobalscope/importscripts/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts
 
 
        Синтаксис
        
 
-
        self.importScripts('foo.js');
+
        self.importScripts('foo.js');
 self.importScripts('foo.js', 'bar.js', ...);
        
 
 
        Параметры
        
@@ -41,7 +41,7 @@ self.importScripts('foo.js', 'bar.js', ...);
        
 
 
        Если вы хотите использовать некоторую функциональность, определённую файлом foo.js, необходимо сделать следующее:
        
 
-
        importScripts('foo.js');
        
+
        importScripts('foo.js');
        
 
 
        importScripts() и self.importScripts() по сути эквивалентны — и то и другое вызывает функцию importScripts() в области видимости воркера.
        
 
diff --git a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
index ee92d0ca3e..ebea98c5b5 100644
--- a/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
+++ b/files/ru/web/api/xmlhttprequest/sending_and_receiving_binary_data/index.html
@@ -9,7 +9,7 @@ translation_of: Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data
 
 
        В этом примере изображение считывается как двоичный файл и создаётся 8-разрядный массив целых чисел без знака из необработанных байтов. Обратите внимание, что это не будет декодировать изображение и читать пиксели. Для этого вам понадобится библиотека декодирования png.
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 oReq.open("GET", "/myfile.png", true);
 oReq.responseType = "arraybuffer";
 
@@ -28,7 +28,7 @@ oReq.send(null);
 
 
        Альтернатива вышеуказанному методу использует интерфейс {{domxref("Blob")}} для непосредственного построения Blob с данными arraybuffer.
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 oReq.open("GET", "/myfile.png", true);
 oReq.responseType = "arraybuffer";
 
@@ -42,7 +42,7 @@ oReq.send();
 
 
        Также вы можете прочитать двоичный файл как {{domxref ("Blob")}}, установив строку" blob " в свойство responseType.
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 oReq.open("GET", "/myfile.png", true);
 oReq.responseType = "blob";
 
@@ -57,7 +57,7 @@ oReq.send();
        
 
 
        Функция load_binary_resource(), показанная ниже, загружает двоичные данные из указанного URL, возвращая их вызывающему объекту.
        
 
-
        function load_binary_resource(url) {
+
        function load_binary_resource(url) {
   var req = new XMLHttpRequest();
   req.open('GET', url, false);
   //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
@@ -70,7 +70,7 @@ oReq.send();
        
 
 
        Магия происходит в строке 5, которая переопределяет тип MIME, заставляя браузер рассматривать его как обычный текст, используя пользовательский набор символов. Это говорит браузеру не анализировать его и пропускать байты через необработанные.
        
 
-
        var filestream = load_binary_resource(url);
+
        var filestream = load_binary_resource(url);
 var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
 
        
 
@@ -82,7 +82,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (
 
 
        Библиотека jBinary для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем браузере или Node.js:
        
 
-
        jBinary.load(url).then(function (binary) {
+
        jBinary.load(url).then(function (binary) {
   // здесь аргумент `binary` может использовться для обработки данных
   // в любом формате (строка, массив байтов, структура данных и т. д.)
 });
@@ -94,7 +94,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (
 
 
        В примере ниже на лету создаётся текстовый файл и отправляется методом POST на сервер. Здесь используется обычный текст, но нетрудно представить себе пример с бинарным файлом.
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 oReq.open("POST", url, true);
 oReq.onload = function (oEvent) {
   // Uploaded.
@@ -109,7 +109,7 @@ oReq.send(blob);
 
 
        Точно так же можно отправлять типизированные массивы JavaScript.
        
 
-
        var myArray = new ArrayBuffer(512);
+
        var myArray = new ArrayBuffer(512);
 var longInt8View = new Uint8Array(myArray);
 
 for (var i=0; i< longInt8View.length; i++) {
@@ -133,7 +133,7 @@ xhr.send(myArray);
 
 
        В этом примере двоичные данные передаются асинхронно методом POST и нестандартным методом Firefox's sendAsBinary().
        
 
-
        var req = new XMLHttpRequest();
+
        var req = new XMLHttpRequest();
 req.open("POST", url, true);
 // установите заголовок и тип данных
 req.setRequestHeader("Content-Length", 741);
@@ -148,7 +148,7 @@ req.sendAsBinary(aBody);
 
 
        Кроме того, чтобы отправить бинарные данные можно передать экземпляр {{interface("nsIFileInputStream")}} в метод send(). В этом случае заголовок Content-Length заполнять явно необязательно, поскольку информация получается из потока автоматически:
        
 
-
        // Создание потока из файла.
+
        // Создание потока из файла.
 var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                        .createInstance(Components.interfaces.nsIFileInputStream);
 stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
diff --git a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
index f2628fa1fa..e295b94612 100644
--- a/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
+++ b/files/ru/web/api/xmlhttprequest/using_xmlhttprequest/index.html
@@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
 
 
        Для отправки HTTP-запроса нужно создать XMLHttpRequest-объект, открыть URL и отправить запрос. После выполнения запроса можно получить и обработать тело и статус ответа.
        
 
-
        function reqListener () {
+
        function reqListener () {
   console.log(this.responseText);
 }
 
@@ -54,7 +54,7 @@ oReq.send();
        
 
 
        Хотя обычно XMLHttpRequest используется, чтобы получать и загружать текст, с его помощью можно обмениваться и двоичными данными. Есть несколько проверенных способов заставить XMLHttpRequest посылать двоичные данные. Они используют метод  XMLHttpRequest.overrideMimeType().
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 oReq.open("GET", url, true);
 // получаем необработанные данные в виде двоичной строки
 oReq.overrideMimeType("text/plain; charset=x-user-defined");
@@ -63,7 +63,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined");
 
 
        Спецификация XMLHttpRequest Level 2 добавляет новые атрибуты responseType, значительно облегчающие работу с двоичными данными:
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 
 oReq.open("GET", url, true);
 oReq.responseType = "arraybuffer";
@@ -82,7 +82,7 @@ oReq.send();
 
 
        Отслеживание событий процесса загрузки  следует спецификации Web API progress events: эти события реализуют интерфейс {{domxref("ProgressEvent")}}.
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 
 oReq.addEventListener("progress", updateProgress, false);
 oReq.addEventListener("load", transferComplete, false);
@@ -123,7 +123,7 @@ function transferCanceled(evt) {
 
 
        События progress есть и у входящих, и у исходящих передач. События входящих передач создаются для объекта XMLHttpRequest, как показано в примере выше; исходящих —для XMLHttpRequest.upload:
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 
 oReq.upload.addEventListener("progress", updateProgress, false);
 oReq.upload.addEventListener("load", transferComplete, false);
@@ -147,7 +147,7 @@ oReq.open();
 
 
        Также возможно засечь все три события, завершающие загрузку (abort, load, or error) через событие loadend:
        
 
-
        req.addEventListener("loadend", loadEnd, false);
+
        req.addEventListener("loadend", loadEnd, false);
 
 function loadEnd(e) {
   alert("Передача данных завершена (но мы не знаем, успешно ли).");
@@ -188,14 +188,14 @@ function loadEnd(e) {
  
      • 
   
        Метод: POST; тип кодирования: application/x-www-form-urlencoded (по умолчанию):
        
 
-  
        Content-Type: application/x-www-form-urlencoded
+  
        Content-Type: application/x-www-form-urlencoded
 
 foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A
        
  
        • 
  
      • 
   
        Метод: POST; тип кодирования: text/plain:
        
 
-  
        Content-Type: text/plain
+  
        Content-Type: text/plain
 
 foo=bar
 baz=The first line.
@@ -222,14 +222,14 @@ The second line.
 
 
        Instead, if you are using the GET method, a string like the following will be simply added to the URL:
        
 
-
        ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
        
+
        ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
        
 
 
        Небольшой классический фреймворк
        
 
 
        Все данные эффекты достигаются с помощью веб браузера, когда вы отправляете {{ HTMLElement("form") }}. Но если вам требуется выполнить все операции с помощью лишь JavaScript, то вам придётся проинструктировать интерпретатор обо всех выполняемых операциях. Для, того чтобы отправлять формы с помощью чистого AJAX, потребуется слишком комплексное описание, чтобы тут рассуждать о нем во всех подробностях. В связи с этим, мы опубликовали здесь полный(но все ещё дидактический) фреймворк, который всё же способен использовать все четыре способа отправки и, так же поддерживает файловую загрузку.
        
 
 
        
-
        <!doctype html>
+
        <!doctype html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@@ -475,7 +475,7 @@ var AJAXSubmit = (function () {
 
 
        Для того, чтобы произвести его тест, создайте страницу с названием register.php (и укажите атрибут action одной из данных форм) и добавьте данный минимальный контент
        
 
-
        <?php
+
        <?php
 /* register.php */
 
 header("Content-type: text/plain");
@@ -502,7 +502,7 @@ print_r($_FILES);
 
 
        Синтаксис данного скрипта представлен ниже:
        
 
-
        AJAXSubmit(myForm);
        
+
        AJAXSubmit(myForm);
        
 
 
        Примечание: Данный фреймворк использует FileReader API для передачи загрузочных файлов. Это новый API и его невозможно использовать IE9 и ниже. В связи с этим, загрузки только с использованием AJAX воспринимаются, лишь как экспериментальные. Если вам не требуется загружать бинарные файлы, то данный фреймворк работает в большинстве современных браузерах.
        
 
@@ -515,7 +515,7 @@ print_r($_FILES);
 
        The FormData constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples and explanations of how one can utilize FormData with XMLHttpRequests see the Using FormData Objects page. For didactic purpose only we post here a translation of the previous example transformed so as to make use of the FormData API. Note the brevity of the code:
        
 
 
        
-
        <!doctype html>
+
        <!doctype html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@@ -636,7 +636,7 @@ function AJAXSubmit (oFormElement) {
 
 
        Получить дату последнего изменения
        
 
-
        function getHeaderTime () {
+
        function getHeaderTime () {
   alert(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
 }
 
@@ -649,7 +649,7 @@ oReq.send();
        
 
 
        Let's create these two functions:
        
 
-
        function getHeaderTime () {
+
        function getHeaderTime () {
 
   var
     nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
@@ -673,7 +673,7 @@ function ifHasChanged(sURL, fCallback) {
 
 
        Test:
        
 
-
        /* Let's test the file "yourpage.html"... */
+
        /* Let's test the file "yourpage.html"... */
 
 ifHasChanged("yourpage.html", function (nModif, nVisit) {
   alert("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
@@ -689,7 +689,7 @@ ifHasChanged("yourpage.html", function (nModif, nVisit) {
 
 
        Для кросс-браузерного обхода кеширования в конец URL-запроса достаточно добавить случайную строку в GET-параметры, то есть сразу после «?», например:
        
 
-
        http://foo.com/bar.html -> http://foo.com/bar.html?12345
+
        http://foo.com/bar.html -> http://foo.com/bar.html?12345
 http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
 
        
 
@@ -697,7 +697,7 @@ http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&
 
 
        Автоматизировать этот подход можно следующим сниппетом:
        
 
-
        var oReq = new XMLHttpRequest();
+
        var oReq = new XMLHttpRequest();
 
 oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
 oReq.send(null);
        
@@ -718,12 +718,12 @@ oReq.send(null);
        
 
 
        Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. The best way to work around this is to use the XPCOM component constructor.
        
 
-
        const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+
        const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
 
        
 
 
        Unfortunately in versions of Gecko prior to Gecko 16 there is a bug which can cause requests created this way to be cancelled for no reason.  If you need your code to work on Gecko 15 or earlier, you can get the XMLHttpRequest constructor from the hidden DOM window like so.
        
 
-
        const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+
        const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
                                      .getService(Components.interfaces.nsIAppShellService)
                                      .hiddenDOMWindow;
 var oReq = new XMLHttpRequest();
        
diff --git a/files/ru/web/api/xmlhttprequest/withcredentials/index.html b/files/ru/web/api/xmlhttprequest/withcredentials/index.html
index 6926b01f82..02d872e437 100644
--- a/files/ru/web/api/xmlhttprequest/withcredentials/index.html
+++ b/files/ru/web/api/xmlhttprequest/withcredentials/index.html
@@ -25,7 +25,7 @@ translation_of: Web/API/XMLHttpRequest/withCredentials
 
 
        Пример
        
 
-
        var xhr = new XMLHttpRequest();
+
        var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://example.com/', true);
 xhr.withCredentials = true;
 xhr.send(null);
        
diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html
index 2ad3e71f57..824f55af0e 100644
--- a/files/ru/web/css/_colon_any-link/index.html
+++ b/files/ru/web/css/_colon_any-link/index.html
@@ -18,7 +18,7 @@ translation_of: 'Web/CSS/:any-link'
 
 
        Селектор псевдокласса CSS :any-link представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут href. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.
        
 
-
        /* Выбирает любой элемент, который будет соответствовать:link или :visited */
+
        /* Выбирает любой элемент, который будет соответствовать:link или :visited */
 :any-link {
   color: green;
 }
        
@@ -31,13 +31,13 @@ translation_of: 'Web/CSS/:any-link'
 
 
        HTML
        
 
-
        <a href="https://example.com">External link</a><br>
+
        <a href="https://example.com">External link</a><br>
 <a href="#">Internal target link</a><br>
 <a>Placeholder link (won't get styled)</a>
        
 
 
        CSS
        
 
-
        a:any-link {
+
        a:any-link {
   border: 1px solid blue;
   color: orange;
 }
diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html
index b922f9a29c..de1b0fc481 100644
--- a/files/ru/web/css/_colon_empty/index.html
+++ b/files/ru/web/css/_colon_empty/index.html
@@ -18,12 +18,12 @@ translation_of: 'Web/CSS/:empty'
 
 
        Синтаксис
        
 
-
        <element>:empty { /* стили */ }
+
        <element>:empty { /* стили */ }
 
        
 
 
        Примеры
        
 
-
        .box {
+
        .box {
   background: red;
   height: 200px;
   width: 200px;
@@ -34,7 +34,7 @@ translation_of: 'Web/CSS/:empty'
 }
 
        
 
-
        <div class="box"><!-- Я буду лаймовым --></div>
+
        <div class="box"><!-- Я буду лаймовым --></div>
 <div class="box">Я буду красным</div>
 <div class="box">
     <!-- Я буду красным, так как перед комментарием стоят пробелы -->
diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html
index 82f0a46dbc..5f83d32cd6 100644
--- a/files/ru/web/css/_colon_first/index.html
+++ b/files/ru/web/css/_colon_first/index.html
@@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:first'
 
 
        CSS псевдокласс :first используется с @-правилом  {{cssxref("@page")}}, представляя первую страницу документа при печати.
        
 
-
        /* Выбирает первую страницу при печати */
+
        /* Выбирает первую страницу при печати */
 @page :first {
   margin-left: 50%;
   margin-top: 50%;
@@ -30,14 +30,14 @@ translation_of: 'Web/CSS/:first'
 
 
        HTML
        
 
-
        <p>Первая страница.</p>
+
        <p>Первая страница.</p>
 <p>Вторая страница.</p>
 <button>Напечатать</button>
 
        
 
 
        CSS
        
 
-
        @page :first {
+
        @page :first {
   margin-left: 50%;
   margin-top: 50%;
 }
@@ -49,7 +49,7 @@ p {
 
 
        JavaScript
        
 
-
        document.querySelector("button").onclick = function () {
+
        document.querySelector("button").onclick = function () {
   window.print();
 }
 
        
diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html
index 0947a99d1e..6a60885ae1 100644
--- a/files/ru/web/css/_colon_focus-visible/index.html
+++ b/files/ru/web/css/_colon_focus-visible/index.html
@@ -19,14 +19,14 @@ translation_of: 'Web/CSS/:focus-visible'
 
 
        В этом примере селектор :focus-visible использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью :focus.
        
 
-
        <input value="Default styles"><br>
+
        <input value="Default styles"><br>
 <button>Default styles</button><br>
 <input class="focus-only" value=":focus only"><br>
 <button class="focus-only">:focus only</button><br>
 <input class="focus-visible-only" value=":focus-visible only"><br>
 <button class="focus-visible-only">:focus-visible only</button>
        
 
-
        input, button {
+
        input, button {
   margin: 10px;
 }
 
@@ -45,9 +45,9 @@ translation_of: 'Web/CSS/:focus-visible'
 
 
        Пользовательский элемент управления, такой как кнопка настраиваемого элемента, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.
        
 
-
        <custom-button tabindex="0" role="button">Click Me</custom-button>
        
+
        <custom-button tabindex="0" role="button">Click Me</custom-button>
        
 
-
        custom-button {
+
        custom-button {
   display: inline-block;
   margin: 10px;
 }
diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html
index 1a8c179fab..a60adff99c 100644
--- a/files/ru/web/css/_colon_focus-within/index.html
+++ b/files/ru/web/css/_colon_focus-within/index.html
@@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:focus-within'
 
 
        CSS Псевдо-класс :focus-within соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует :focus. (Включая потомков в shadow trees.)
        
 
-
        /* Выделяет <div> когда один из его потомков находится в фокусе */
+
        /* Выделяет <div> когда один из его потомков находится в фокусе */
 div:focus-within {
   background: cyan;
 }
        
@@ -24,7 +24,7 @@ div:focus-within {
 
 
        HTML
        
 
-
        <p>Try typing into this form.</p>
+
        <p>Try typing into this form.</p>
 
 <form>
   <label for="given_name">Given Name:</label>
@@ -36,7 +36,7 @@ div:focus-within {
 
 
        CSS
        
 
-
        form {
+
        form {
   border: 1px solid;
   color: gray;
   padding: 4px;
diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html
index 19830a0c9c..b285765913 100644
--- a/files/ru/web/css/_colon_host()/index.html
+++ b/files/ru/web/css/_colon_host()/index.html
@@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:host()'
 
        Примечание: Псевдокласс не имеет эффекта вне shadow DOM.
        
 
        
 
-
        /* Выбирает хоста shadow root, только
+
        /* Выбирает хоста shadow root, только
   если он соответствует аргументу селектора */
 :host(.special-custom-element) {
   font-weight: bold;
@@ -34,11 +34,11 @@ translation_of: 'Web/CSS/:host()'
 
 
        В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:
        
 
-
        <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
        
+
        <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
        
 
 
        Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS-правилами:
        
 
-
        let style = document.createElement('style');
+
        let style = document.createElement('style');
 let span = document.createElement('span');
 span.textContent = this.textContent;
 
diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html
index e77d87f70c..e74aaf3846 100644
--- a/files/ru/web/css/_colon_is/index.html
+++ b/files/ru/web/css/_colon_is/index.html
@@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:is'
 
 
        Заметьте, что в данный момент браузеры поддерживают её функциональность как :matches(), или даже как более старый, префиксный псевдокласс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что  :any() требует постановку префиксов и не поддерживает комплексные селекторы.
        
 
-
        /* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
+
        /* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
 :is(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
@@ -52,7 +52,7 @@ footer p:hover {
 
 
        Кроссбраузерный пример
        
 
-
        <header>
+
        <header>
   <p>Это мой параграф в шапке</p>
 </header>
 
@@ -67,7 +67,7 @@ footer p:hover {
   <p>Это мой параграф в подвале</p>
 </footer>
        
 
-
        :-webkit-any(header, main, footer) p:hover {
+
        :-webkit-any(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
 }
@@ -88,7 +88,7 @@ footer p:hover {
 }
 
        
 
-
        let matchedItems;
+
        let matchedItems;
 
 try {
   matchedItems = document.querySelectorAll(':is(header, main, footer) p');
@@ -122,7 +122,7 @@ function applyHandler(elem) {
 
 
        Псевдо-класс :is() может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:
        
 
-
        /* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+
        /* 3-уровневые (или более) неупорядоченные списки используют свойство square */
 ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
 ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
 ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
@@ -141,7 +141,7 @@ dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
 
 
        ... можно заменить на:
        
 
-
        /* 3-уровневые (или более) неупорядоченные списки используют свойство square */
+
        /* 3-уровневые (или более) неупорядоченные списки используют свойство square */
 :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
 :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
 :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
@@ -154,7 +154,7 @@ dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
 
 
        К примеру, без :is(), стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:
        
 
-
        /* Уровень 0 */
+
        /* Уровень 0 */
 h1 {
   font-size: 30px;
 }
@@ -175,7 +175,7 @@ nav section h1, nav article h1, nav aside h1, nav nav h1 {
 
 
        Используя :is(), как видно, это гораздо легче:
        
 
-
        /* Уровень 0 */
+
        /* Уровень 0 */
 h1 {
   font-size: 30px;
 }
@@ -199,13 +199,13 @@ h1 {
 
 
        В отличие от списка селекторов, псевдокласс :is() не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.
        
 
-
        :is(:valid, :unsupported) {
+
        :is(:valid, :unsupported) {
   ...
 }
        
 
 
        Будет по прежнему определяться правильно и соответствовать :valid даже в браузерах, которые не поддерживают :unsupported, в то время как:
        
 
-
        :valid, :unsupported {
+
        :valid, :unsupported {
   ...
 }
        
 
diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html
index c435be2554..2cfcabf12b 100644
--- a/files/ru/web/css/_colon_left/index.html
+++ b/files/ru/web/css/_colon_left/index.html
@@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:left'
 
 
        Псевдокласс CSS :left используется с at-правилом {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.
        
 
-
        /* Выбирает все левые страницы при печати */
+
        /* Выбирает все левые страницы при печати */
 @page :left {
   margin: 2in 3in;
 }
        
@@ -29,7 +29,7 @@ translation_of: 'Web/CSS/:left'
 
 
        Выставляем отступы для левых страниц
        
 
-
        @page :left {
+
        @page :left {
   margin: 2in 3in;
 }
 
        
diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html
index 631182a560..e47bedbdad 100644
--- a/files/ru/web/css/_colon_where/index.html
+++ b/files/ru/web/css/_colon_where/index.html
@@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:where'
 
 
        
 
-
        /* Выбирает любой параграф внутри header, main
+
        /* Выбирает любой параграф внутри header, main
    или footer на который наведён курсор мыши */
 :where(header, main, footer) p:hover {
   color: red;
@@ -36,13 +36,13 @@ footer p:hover {
 
 
        При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании :is() или :where() действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.
        
 
-
        :where(:valid, :unsupported) {
+
        :where(:valid, :unsupported) {
   ...
 }
        
 
 
        Пример выше будет успешно распарсен и для :valid будут применены CSS-правила, даже если в браузере не поддерживается :unsupported, в то время как:
        
 
-
        :valid, :unsupported {
+
        :valid, :unsupported {
   ...
 }
        
 
@@ -56,7 +56,7 @@ footer p:hover {
 
 
        Возьмём следующий HTML-код:
        
 
-
        <article>
+
        <article>
   <h2>:is()-styled links</h2>
   <section class="is-styling">
     <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
@@ -90,7 +90,7 @@ footer p:hover {
 
 
        Теперь при помощи псевдоклассов :is() и :where() зададим цвет для ссылок в простой форме, как в примере ниже:
        
 
-
        html {
+
        html {
   font-family: sans-serif;
   font-size: 150%;
 }
@@ -105,7 +105,7 @@ footer p:hover {
 
 
        Что если позже мы захотим переопределить цвет ссылок в footer'ах используя простой селектор?
        
 
-
        footer a {
+
        footer a {
   color: blue;
 }
        
 
diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html
index 4ff78d9a48..fb8fd111a9 100644
--- a/files/ru/web/css/_doublecolon_cue/index.html
+++ b/files/ru/web/css/_doublecolon_cue/index.html
@@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::cue'
 
 
        Псевдоэлемент CSS ::cue соответствует репликам WebVTT в выбранном элементе. Он может быть использован для задания стилей титров и других реплик в медиа с VTT треками.
        
 
-
        ::cue {
+
        ::cue {
   color: yellow;
   font-weight: bold;
 }
        
@@ -41,7 +41,7 @@ translation_of: 'Web/CSS/::cue'
 
 
        Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.
        
 
-
        ::cue {
+
        ::cue {
   color: #fff;
   background-color: rgba(0, 0, 0, 0.6);
 }
        
diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html
index c64a28eb84..2a7a57109b 100644
--- a/files/ru/web/css/_doublecolon_grammar-error/index.html
+++ b/files/ru/web/css/_doublecolon_grammar-error/index.html
@@ -29,7 +29,7 @@ translation_of: 'Web/CSS/::grammar-error'
 
 
        Синтаксис
        
 
-
        ::grammar-error
        
+
        ::grammar-error
        
 
 
        Примеры
        
 
@@ -39,11 +39,11 @@ translation_of: 'Web/CSS/::grammar-error'
 
 
        HTML
        
 
-
        <p>My friends is coming to the party tonight.</p>
        
+
        <p>My friends is coming to the party tonight.</p>
        
 
 
        CSS
        
 
-
        ::grammar-error  {
+
        ::grammar-error  {
   text-decoration: underline red;
   color: red;
 }
        
diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html
index 37caf3ec01..767ad0a2d7 100644
--- a/files/ru/web/css/_doublecolon_marker/index.html
+++ b/files/ru/web/css/_doublecolon_marker/index.html
@@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::marker'
 
 
        Псевдоэлемент ::marker применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен display: list-item, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.
        
 
-
        ::marker {
+
        ::marker {
   color: blue;
   font-size: 1.2em;
 }
        
@@ -37,7 +37,7 @@ translation_of: 'Web/CSS/::marker'
 
 
        HTML
        
 
-
        <ul>
+
        <ul>
   <li>Peaches</li>
   <li>Apples</li>
   <li>Plums</li>
@@ -45,7 +45,7 @@ translation_of: 'Web/CSS/::marker'
 
 
        CSS
        
 
-
        ul li::marker {
+
        ul li::marker {
   color: red;
   font-size: 1.5em;
 }
        
diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html
index ce536f7fe0..8fde2fd945 100644
--- a/files/ru/web/css/_doublecolon_placeholder/index.html
+++ b/files/ru/web/css/_doublecolon_placeholder/index.html
@@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::placeholder'
 
 
        CSS псевдоэлемент ::placeholder представляет собой текст placeholder в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.
        
 
-
        ::placeholder {
+
        ::placeholder {
   color: blue;
   font-size: 1.5em;
 }
        
@@ -32,11 +32,11 @@ translation_of: 'Web/CSS/::placeholder'
 
 
        HTML
        
 
-
        <input placeholder="Введите что-нибудь!">
        
+
        <input placeholder="Введите что-нибудь!">
        
 
 
        CSS
        
 
-
        input::placeholder {
+
        input::placeholder {
   color: red;
   font-size: 1.2em;
   font-style: italic;
@@ -50,11 +50,11 @@ translation_of: 'Web/CSS/::placeholder'
 
 
        HTML
        
 
-
        <input placeholder="Введите что-нибудь...">
        
+
        <input placeholder="Введите что-нибудь...">
        
 
 
        CSS
        
 
-
        input::placeholder {
+
        input::placeholder {
   color: green;
 }
 
        
@@ -89,7 +89,7 @@ translation_of: 'Web/CSS/::placeholder'
 
 
        В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.
        
 
-
        <label for="user-email">Ваш email адрес</label>
+
        <label for="user-email">Ваш email адрес</label>
 <span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span>
 <input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
 
        
diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html
index 0edc300055..b98d03c2f0 100644
--- a/files/ru/web/css/_doublecolon_slotted/index.html
+++ b/files/ru/web/css/_doublecolon_slotted/index.html
@@ -9,7 +9,7 @@ translation_of: 'Web/CSS/::slotted'
 
 
        Это работает только при использовании внутри CSS, помещённого в shadow DOM. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.
        
 
-
        /* Выбирает любой элемент, помещённый в слот */
+
        /* Выбирает любой элемент, помещённый в слот */
 ::slotted(*) {
   font-weight: bold;
 }
@@ -30,7 +30,7 @@ translation_of: 'Web/CSS/::slotted'
 
 
        В этом демо мы использовали простой шаблон с тремя слотами:
        
 
-
        <template id="person-template">
+
        <template id="person-template">
   <div>
     <h2>Personal ID Card</h2>
     <slot name="person-name">NAME MISSING</slot>
@@ -43,7 +43,7 @@ translation_of: 'Web/CSS/::slotted'
 
 
        Пользовательский элемент — <person-details> — определяется следующим образом:
        
 
-
        customElements.define('person-details',
+
        customElements.define('person-details',
   class extends HTMLElement {
     constructor() {
       super();
@@ -68,7 +68,7 @@ translation_of: 'Web/CSS/::slotted'
 
 
        Элемент выглядит следующим образом при вставке на страницу:
        
 
-
        <person-details>
+
        <person-details>
   <p slot="person-name">Dr. Shazaam</p>
   <span slot="person-age">Immortal</span>
   <span slot="person-occupation">Superhero</span>
diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html
index 9cc517042f..e9225b6f49 100644
--- a/files/ru/web/css/align-content/index.html
+++ b/files/ru/web/css/align-content/index.html
@@ -17,7 +17,7 @@ translation_of: Web/CSS/align-content
 
 
        Синтаксис
        
 
-
        /* Основное позиционное выравнивание */
+
        /* Основное позиционное выравнивание */
 /* align-content не принимает значения left и right */
 align-content: center;     /* Расположить элементы вокруг центра */
 align-content: start;      /* Расположить элементы в начале */
@@ -101,7 +101,7 @@ align-content: unset;
 
 
        CSS
        
 
-
        #container {
+
        #container {
   height:200px;
   width: 240px;
   align-content: center; /* Can be changed in the live sample */
@@ -169,7 +169,7 @@ select {
 
 
        HTML
        
 
-
        <div id="container" class="flex">
+
        <div id="container" class="flex">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
@@ -222,7 +222,7 @@ select {
 
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
@@ -339,7 +339,7 @@ original_slug: >-
 </div>
 
      
 
-
      .box1 {
+
      .box1 {
    grid-area: 1 / 1 / 4 / 2;
 }
 .box2 {
@@ -375,7 +375,7 @@ original_slug: >-
 
      В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
@@ -404,7 +404,7 @@ original_slug: >-
 </div>
 
      
 
-
      .box1 {
+
      .box1 {
    grid-column-start: -1;
    grid-column-end: -2;
    grid-row-start: -1;
@@ -436,7 +436,7 @@ original_slug: >-
 
 
      Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:
      
 
-
      .item {
+
      .item {
   grid-column: 1 / -1;
 }
 
      
@@ -448,7 +448,7 @@ original_slug: >-
 
      Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
@@ -477,7 +477,7 @@ original_slug: >-
 </div>
 
      
 
-
      .box1 {
+
      .box1 {
    grid-column: 1 ;
    grid-row: 1 / 4;
 }
@@ -508,7 +508,7 @@ original_slug: >-
 
 
      Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для grid-row-gap , а второе - для grid-column-gap.
      
 
-
      .wrapper {
+
      .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 100px);
@@ -523,7 +523,7 @@ original_slug: >-
 
      В дополнение к возможности обращаться к начальной и конечной линии по их номерам вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
@@ -552,7 +552,7 @@ original_slug: >-
 </div>
 
      
 
-
      .box1 {
+
      .box1 {
   grid-column: 1;
   grid-row: 1 / span 3;
 }
@@ -574,7 +574,7 @@ original_slug: >-
 
 
      Ключевое слово  span также можно использовать в качестве значения grid-row-start/grid-row-end иgrid-column-start/grid-column-end. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаём начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.
      
 
-
      .box1 {
+
      .box1 {
     grid-column-start: 1;
     grid-row-start: 1;
     grid-row-end: span 3;
@@ -583,7 +583,7 @@ original_slug: >-
 
 
      Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем span 3. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.
      
 
-
      .box1 {
+
      .box1 {
     grid-column-start: 1;
     grid-row-start: span 3;
     grid-row-end: 4;
diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
index fe9d21dcb8..1e8690d0ad 100644
--- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
+++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html
@@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 
      
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
@@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: flex;
    flex-wrap: wrap;
 }
@@ -71,7 +71,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 
      
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
@@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
 }
@@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
      В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство {{cssxref("min-height")}}, и оно задаёт высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение flex-end , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для box1  таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для box2 свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: flex;
    align-items: flex-end;
    min-height: 200px;
@@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
      Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо flex-start и flex-end мы задаём start и end . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: end;
@@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
      В примере ниже мы используем ключевое слово auto-fill вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
 }
@@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
      Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя auto-fill и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаём автозаполненные треки с помощью minmax. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим 1fr. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум 1fr как инструкцию распределить оставшееся свободное пространство между этими блоками.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
@@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
      В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера position: relative , поэтому он становится контекстом позиционирования для нашего третьего элемента.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">
@@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 200px;
@@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
      Задаём .box3 свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига.  В данном случае контекстом позиционирования является грид-область.
      
 
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three
@@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 200px;
@@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 
      
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box box1">
        <div class="nested">a</div>
        <div class="nested">b</div>
@@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
@@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 
 
      
 
 
-
      <div class="wrapper">
+
      <div class="wrapper">
    <div class="box box1">
        <div class="nested">a</div>
        <div class="nested">b</div>
@@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout
 </div>
 
      
 
-
      .wrapper {
+
      .wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto);
diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html
index f39bad2791..1e48ff731e 100644
--- a/files/ru/web/css/custom-ident/index.html
+++ b/files/ru/web/css/custom-ident/index.html
@@ -59,7 +59,7 @@ translation_of: Web/CSS/custom-ident
 
 
      Действительные идентификаторы
      
 
-
      nono79            Состоит из букв и цифр
+
      nono79            Состоит из букв и цифр
 ground-level      Состоит из букв, цифр и дефиса
 -test             Буквы, следующие за одним дефисом
 _internal         Буквы, следующие за нижним подчёркиванием
@@ -69,7 +69,7 @@ bili\.bob         Буквы и экранированная точка
 
 
      Недействительные идентификаторы
      
 
-
      34rem             Не может начинаться с цифры
+
      34rem             Не может начинаться с цифры
 -12rad            Не может начинаться с дефиса, за которым следует цифра
 bili.bob          Только буквы, цифры, _ и - можно не экранириовать
 --toto            Не может начинаться с двух дефисов подряд
diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html
index f1de56062b..10bcafb9b7 100644
--- a/files/ru/web/css/direction/index.html
+++ b/files/ru/web/css/direction/index.html
@@ -21,7 +21,7 @@ translation_of: Web/CSS/direction
 
 
      Syntax
      
 
-
      /* Keyword values */
+
      /* Keyword values */
 direction: ltr;
 direction: rtl;
 
@@ -54,7 +54,7 @@ direction: unset;
 
 
      Setting right-to-left direction
      
 
-
      blockquote {
+
      blockquote {
   direction: rtl;
 }
 
      
diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html
index 339db730a5..fa6ee2b564 100644
--- a/files/ru/web/css/flex-wrap/index.html
+++ b/files/ru/web/css/flex-wrap/index.html
@@ -7,7 +7,7 @@ translation_of: Web/CSS/flex-wrap
 
 
      Свойство CSS flex-wrap задаёт правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.
      
 
-
      flex-wrap: nowrap;
+
      flex-wrap: nowrap;
 flex-wrap: wrap;
 flex-wrap: wrap-reverse;
 
@@ -48,7 +48,7 @@ flex-wrap: unset;
 
      HTML
      
 
 
      
-
      <h4>This is an example for flex-wrap:wrap </h4>
+
      <h4>This is an example for flex-wrap:wrap </h4>
 <div class="content">
   <div class="red">1</div>
   <div class="green">2</div>
@@ -70,7 +70,7 @@ flex-wrap: unset;
 
 
      CSS
      
 
-
      /* Common Styles */
+
      /* Common Styles */
 .content,
 .content1,
 .content2 {
diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html
index 29ca239e00..1640f4b970 100644
--- a/files/ru/web/css/font-variant-ligatures/index.html
+++ b/files/ru/web/css/font-variant-ligatures/index.html
@@ -13,7 +13,7 @@ translation_of: Web/CSS/font-variant-ligatures
 
 
      Синтаксис
      
 
-
      font-variant-ligatures: normal;
+
      font-variant-ligatures: normal;
 font-variant-ligatures: none;
 font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
 font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
@@ -74,7 +74,7 @@ font-variant-ligatures: unset;
 
 
      Примеры
      
 
-
      p {
+
      p {
   font-variant-ligatures: none;
 }
 
      
diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html
index 7f659fc14f..36e1569c4f 100644
--- a/files/ru/web/css/font/index.html
+++ b/files/ru/web/css/font/index.html
@@ -88,7 +88,7 @@ translation_of: Web/CSS/font
 
 
      Примеры
      
 
-
      /* Set the font size to 12px and the line height to 14px.
+
      /* Set the font size to 12px and the line height to 14px.
    Set the font family to sans-serif */
 p { font: 12px/14px sans-serif }
 
@@ -112,7 +112,7 @@ p { font: status-bar }