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) --- files/ru/games/anatomy/index.html | 16 +-- .../index.html | 36 ++--- .../2d_breakout_game_phaser/extra_lives/index.html | 14 +- files/ru/glossary/css/index.html | 2 +- files/ru/glossary/css_selector/index.html | 2 +- files/ru/glossary/idempotent/index.html | 6 +- files/ru/glossary/jquery/index.html | 4 +- files/ru/glossary/safe/index.html | 6 +- files/ru/glossary/truthy/index.html | 2 +- files/ru/glossary/vendor_prefix/index.html | 4 +- .../index.html | 4 +- .../set_up_a_local_testing_server/index.html | 6 +- .../upload_files_to_a_web_server/index.html | 4 +- .../backgrounds_and_borders/index.html | 24 ++-- .../selectors/combinators/index.html | 10 +- .../learn/css/building_blocks/selectors/index.html | 26 ++-- .../pseudo-classes_and_pseudo-elements/index.html | 6 +- .../type_class_and_id_selectors/index.html | 4 +- .../css/building_blocks/the_box_model/index.html | 6 +- .../building_blocks/values_and_units/index.html | 2 +- files/ru/learn/css/css_layout/flexbox/index.html | 34 ++--- files/ru/learn/css/css_layout/floats/index.html | 50 +++---- files/ru/learn/css/css_layout/grids/index.html | 70 +++++----- .../learn/css/css_layout/introduction/index.html | 78 +++++------ .../css_layout/multiple-column_layout/index.html | 42 +++--- .../ru/learn/css/css_layout/normal_flow/index.html | 4 +- .../ru/learn/css/css_layout/positioning/index.html | 56 ++++---- .../css/css_layout/responsive_design/index.html | 24 ++-- .../first_steps/how_css_is_structured/index.html | 56 ++++---- .../learn/css/first_steps/how_css_works/index.html | 16 +-- .../learn/css/styling_text/fundamentals/index.html | 54 ++++---- .../ru/learn/css/styling_text/web_fonts/index.html | 10 +- .../forms/basic_native_form_controls/index.html | 68 ++++----- .../forms/how_to_structure_a_web_form/index.html | 22 +-- .../sending_and_retrieving_form_data/index.html | 22 +-- .../sending_forms_through_javascript/index.html | 16 +-- files/ru/learn/forms/your_first_form/index.html | 16 +-- .../css_basics/index.html | 22 +-- .../html_basics/index.html | 28 ++-- .../javascript_basics/index.html | 46 +++--- .../publishing_your_website/index.html | 12 +- .../the_web_and_web_standards/index.html | 8 +- .../advanced_text_formatting/index.html | 42 +++--- .../creating_hyperlinks/index.html | 30 ++-- .../document_and_website_structure/index.html | 10 +- .../getting_started/index.html | 58 ++++---- .../html_text_fundamentals/index.html | 60 ++++---- .../the_head_metadata_in_html/index.html | 30 ++-- .../adding_vector_graphics_to_the_web/index.html | 18 +-- .../images_in_html/index.html | 30 ++-- .../other_embedding_technologies/index.html | 12 +- .../responsive_images/index.html | 14 +- .../video_and_audio_content/index.html | 12 +- files/ru/learn/html/tables/advanced/index.html | 14 +- files/ru/learn/html/tables/basics/index.html | 16 +-- files/ru/learn/index.html | 6 +- .../javascript/asynchronous/async_await/index.html | 44 +++--- .../javascript/asynchronous/concepts/index.html | 18 +-- .../javascript/asynchronous/introducing/index.html | 22 +-- .../asynchronous/timeouts_and_intervals/index.html | 64 ++++----- .../building_blocks/conditionals/index.html | 54 ++++---- .../javascript/building_blocks/events/index.html | 56 ++++---- .../building_blocks/functions/index.html | 64 ++++----- .../building_blocks/looping_code/index.html | 52 +++---- .../client-side_storage/index.html | 58 ++++---- .../client-side_web_apis/introduction/index.html | 22 +-- .../manipulating_documents/index.html | 38 ++--- .../first_steps/a_first_splash/index.html | 50 +++---- .../first_steps/silly_story_generator/index.html | 2 +- .../javascript/first_steps/strings/index.html | 34 ++--- .../first_steps/useful_string_methods/index.html | 44 +++--- .../javascript/first_steps/variables/index.html | 48 +++---- .../ru/learn/javascript/objects/basics/index.html | 52 +++---- .../javascript/objects/inheritance/index.html | 22 +-- .../objects/object-oriented_js/index.html | 32 ++--- .../objects/object_building_practice/index.html | 24 ++-- .../server-side/django/authentication/index.html | 66 ++++----- .../learn/server-side/django/deployment/index.html | 78 +++++------ .../django/development_environment/index.html | 44 +++--- files/ru/learn/server-side/django/forms/index.html | 38 ++--- .../server-side/django/introduction/index.html | 10 +- .../ru/learn/server-side/django/models/index.html | 36 ++--- .../development_environment/index.html | 46 +++--- .../locallibrary_base_template/index.html | 4 +- .../server-side/express_nodejs/forms/index.html | 16 +-- .../express_nodejs/introduction/index.html | 54 ++++---- .../express_nodejs/skeleton_website/index.html | 60 ++++---- .../first_steps/client-server_overview/index.html | 12 +- .../first_steps/web_frameworks/index.html | 12 +- .../first_steps/website_security/index.html | 6 +- .../react_getting_started/index.html | 42 +++--- .../anatomy_of_a_webextension/index.html | 28 ++-- .../add-ons/webextensions/api/downloads/index.html | 2 +- .../webextensions/api/webrequest/index.html | 2 +- .../intercept_http_requests/index.html | 10 +- .../webextensions/internationalization/index.html | 34 ++--- .../webextensions/modify_a_web_page/index.html | 14 +- files/ru/tools/web_console/index.html | 42 +++--- .../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 +-- files/ru/webassembly/rust_to_wasm/index.html | 38 ++--- 439 files changed, 3297 insertions(+), 3297 deletions(-) (limited to 'files') diff --git a/files/ru/games/anatomy/index.html b/files/ru/games/anatomy/index.html index b3022fa527..019b6276ab 100644 --- a/files/ru/games/anatomy/index.html +++ b/files/ru/games/anatomy/index.html @@ -32,7 +32,7 @@ original_slug: Games/Анатомия

Некоторый код должен выполняться кадр за кадром, так зачем же прикреплять эту функцию к чему-то другому, кроме графика перерисовки браузера? В Web, {{ domxref("window.requestAnimationFrame()") }} будет основой большинства хорошо запрограммированных покадровых основных циклов.  Callback функция должна быть передана ему при вызове. Callback функция будет выполнена в подходящее время перед следующей перерисовкой. Вот пример простого основного цикла:

-
window.main = function () {
+
window.main = function () {
   window.requestAnimationFrame( main );
 
   // Код, который цикл должен выполнить
@@ -56,7 +56,7 @@ main(); // Start the cycle

 
 
У нашего цикла есть две очевидные проблемы: main() загрязняет {{ domxref("window") }} объект (в нем хранятся все глобальные переменные) и код не оставляет нам возможность остановить цикл, если только вся вкладка не будет закрыта или обновлена. Для решения первой проблемы, если нужно, чтобы основной цикл просто выполнялся и вам не нужен лёгкий (прямой) доступ к нему, вы можете поместить его внутрь самовызывающейся Function Expression (IIFE).

 
-
/*
+
/*
 * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
 * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
 * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
@@ -81,7 +81,7 @@ main(); // Start the cycle

 
 
Чтобы остановить основной цикл, вам понадобиться отменить вызов main() с помощью {{ domxref("window.cancelAnimationFrame()") }}. Необходимо передать в cancelAnimationFrame() идентификатор последнего вызова requestAnimationFrame(). Давайте предположим, что функции и переменные вашей игры были определены в пространстве имён, которое вы назвали MyGame.  В таком случае, основной цикл будет выглядеть следующим образом:

 
-
/*
+
/*
 * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
 * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
 * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
@@ -102,7 +102,7 @@ main(); // Start the cycle

 
 
Теперь у нас есть переменная stopMain, объявленная в нашем пространстве имён MyGame, которая содержит идентификатор последнего вызова requestAnimationFrame() нашего основного цикла.  В любой момент мы может остановить основной цикл, сказав браузеру, чтобы тот отменил запрос, соответствующий последнему маркеру.

 
-
window.cancelAnimationFrame( MyGame.stopMain );

+
window.cancelAnimationFrame( MyGame.stopMain );

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

 
@@ -131,12 +131,12 @@ main(); // Start the cycle

 
 
Это значение нельзя использовать само по себе, потому что оно относиться к неинтересному событию, но его можно вычесть из другой временной ветки, чтобы чётко и точно определить, сколько времени прошло между этими двумя точками. Чтобы получить одну из этих временных меток, вы можете вызвать window.performance.now() и сохранить результат в переменную. 

 
-
var tNow = window.performance.now();
+
var tNow = window.performance.now();
 

 
 
Возвращаемся к основному циклу. Часто вам понадобиться узнать, когда ваша основная функция  была вызвана. Это обычное дело, window.requestAnimationFrame() при выполнении всегда предоставляет метку DOMHighResTimeStamp в качестве аргумента для колбэк-функций. Это приводит к очередному улучшению нашего основного цикла. 

 
-
/*
+
/*
 * Начинаем с точки с запятой в случае, если какая-либо строка кода выше данного примера
 * полагается на автоматическую вставку точки с запятой (ASI). Браузер может случайно решить,
 * что весь этот код начинается с предыдущей строки. Первая точка с запятой отмечает начало
@@ -172,7 +172,7 @@ main(); // Start the cycle

 
 
If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.

 
-
/*
+
/*
 * Starting with the semicolon is in case whatever line of code above this example
 * relied on automatic semicolon insertion (ASI). The browser could accidentally
 * think this whole example continues from the previous line. The leading semicolon
@@ -244,7 +244,7 @@ main(); // Start the cycle

 
Note: This example, specifically, is in need of technical review.

 
 
-
/*
+
/*
 * Starting with the semicolon is in case whatever line of code above this example
 * relied on automatic semicolon insertion (ASI). The browser could accidentally
 * think this whole example continues from the previous line. The leading semicolon
diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
index 8c89ecc871..da8c8b434c 100644
--- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
+++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
@@ -31,7 +31,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 
Здесь находится HTML структура, которую мы будем использовать:

 
-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
@@ -60,7 +60,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 
Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядеть одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.

 
-
var renderer = new THREE.WebGLRenderer({antialias:true});
+
var renderer = new THREE.WebGLRenderer({antialias:true});
 renderer.setSize(WIDTH, HEIGHT);
 renderer.setClearColor(0xDDDDDD, 1);
 document.body.appendChild(renderer.domElement);
@@ -74,7 +74,7 @@ document.body.appendChild(renderer.domElement);
 
 
Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект Scene. Давайте создадим его, добавив следующих код:

 
-
var scene = new THREE.Scene();
+
var scene = new THREE.Scene();
 

 
 
Позже, мы будем использовать метод .add() для добавления объектов в сцену.

@@ -83,7 +83,7 @@ document.body.appendChild(renderer.domElement);
 
 
У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:

 
-
var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+
var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
 camera.position.z = 50;
 scene.add(camera);
 

@@ -108,7 +108,7 @@ scene.add(camera);
 
 
Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция render() выполнит эту работу с небольшой помощью requestAnimationFrame(), которая заставляет сцену постоянно перерисовываться в каждом кадре:

 
-
function render() {
+
function render() {
 	requestAnimationFrame(render);
 	renderer.render(scene, camera);
 }
@@ -123,7 +123,7 @@ render();
 
 
Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the render() function:

 
-
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
 

 
 
In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.

@@ -132,7 +132,7 @@ render();
 
 
A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:

 
-
var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+
var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
 

 
 
Add this line below the previously added.

@@ -143,7 +143,7 @@ render();
 
 
To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:

 
-
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
 

 
 
Again, add this line below the one you previously added.

@@ -152,12 +152,12 @@ render();
 
 
Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы должны сделать - добавить куб на сцену. Добавьте в код эту строку:

 
-
scene.add(cube);
+
scene.add(cube);
 

 
 
Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон.  Добавить в конец кода эту строку:

 
-
cube.rotation.set(0.4, 0.2, 0);
+
cube.rotation.set(0.4, 0.2, 0);
 

 
 
Поздравляю, вы создали объект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:

@@ -174,12 +174,12 @@ render();
 
 
Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:

 
-
cube.position.x = -25;
+
cube.position.x = -25;
 

 
 
Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.

 
-
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
 var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
 var torus = new THREE.Mesh(torusGeometry, phongMaterial);
 scene.add(torus);
@@ -189,7 +189,7 @@ scene.add(torus);
 
 
We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:

 
-
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
 var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
 var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
 dodecahedron.position.x = 25;
@@ -204,7 +204,7 @@ scene.add(dodecahedron);
 
 
There are various types of light sources available in Three.js. The most basic is PointLight, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:

 
-
var light = new THREE.PointLight(0xFFFFFF);
+
var light = new THREE.PointLight(0xFFFFFF);
 light.position.set(-10, 15, 50);
 scene.add(light);
 

@@ -223,7 +223,7 @@ scene.add(light);
 
 
Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавьте эту строку кода сразу после: requestAnimationFrame() invocation inside the render function:

 
-
cube.rotation.y += 0.01;
+
cube.rotation.y += 0.01;
 

 
 
This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.

@@ -232,12 +232,12 @@ scene.add(light);
 
 
We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called t, for counting elapsed time. Add it right before the render() function:

 
-
var t = 0;
+
var t = 0;
 

 
 
Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the requestAnimationFrame() invocation:

 
-
t += 0.01;
+
t += 0.01;
 torus.scale.y = Math.abs(Math.sin(t));
 

 
@@ -249,7 +249,7 @@ torus.scale.y = Math.abs(Math.sin(t));
 
 
Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our requestAnimationFrame() invocation:

 
-
dodecahedron.position.y = -7*Math.sin(t*2);
+
dodecahedron.position.y = -7*Math.sin(t*2);
 

 
 
This will move the dodecahedron up and down, by applying the sin() value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.

diff --git a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
index b01d6bf0ac..e4602cb279 100644
--- a/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
+++ b/files/ru/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html
@@ -20,7 +20,7 @@ original_slug: Games/Tutorials/Создание_2D_Breakout_игры_на_Phaser
 
 
Добавьте следующие переменные сразу после всех наших текущих определений переменных:

 
-
var lives = 3;
+
var lives = 3;
 var livesText;
 var lifeLostText;
 

@@ -31,7 +31,7 @@ var lifeLostText;
 
 
Надписи мы уже определяли, когда реализовывали систему очков. Добавьте следующие строки кода в после определения надписи scoreText в функции create():

 
-
livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
+
livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
 livesText.anchor.set(1,0);
 lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' });
 lifeLostText.anchor.set(0.5);
@@ -46,12 +46,12 @@ lifeLostText.visible = false;
 
 
Как вы могли заметить, мы используем одинаковые стили для всех надписей: scoreText, livesText и lifeLostText. Однако, налицо копирование кода и если мы, когда-либо, захотим изменить размер шрифта или цвет, то нам придётся делать это в нескольких местах. Чтобы избежать этого, мы вынесем стиль в отдельную переменную. Напишите следующую строку сразу после всех наших текущих определений переменных:

 
-
var textStyle = { font: '18px Arial', fill: '#0095DD' };
+
var textStyle = { font: '18px Arial', fill: '#0095DD' };
 

 
 
Теперь мы можем использовать эту переменную для нашего текста — обновите ваш код и замените повторяющиеся участки со стилем текста на переменную.

 
-
scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
+
scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
 livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle);
 livesText.anchor.set(1,0);
 lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle);
@@ -65,7 +65,7 @@ lifeLostText.visible = false;
 
 
Чтобы реализовать жизнь в нашей игре, давайте сначала изменим функцию шара, связанную с событием onOutOfBounds. Вместо того, чтобы выполнять анонимную функцию и сразу показывать сообщение:

 
-
ball.events.onOutOfBounds.add(function(){
+
ball.events.onOutOfBounds.add(function(){
     alert('Game over!');
     location.reload();
 }, this);
@@ -73,12 +73,12 @@ lifeLostText.visible = false;
 
 
Мы объявим новую функцию ballLeaveScreen; Удалим предыдущий обработчик (зачёркнутый код сверху) и заменим его следующей линией:

 
-
ball.events.onOutOfBounds.add(ballLeaveScreen, this);
+
ball.events.onOutOfBounds.add(ballLeaveScreen, this);
 

 
 
Мы будем уменьшать количество жизней каждый раз, когда шар выйдет за пределы окна Canvas. Добавьте функцию ballLeaveScreen() в конец кода:

 
-
function ballLeaveScreen() {
+
function ballLeaveScreen() {
     lives--;
     if(lives) {
         livesText.setText('Lives: '+lives);
diff --git a/files/ru/glossary/css/index.html b/files/ru/glossary/css/index.html
index b6f9240e80..8fda8f3e8b 100644
--- a/files/ru/glossary/css/index.html
+++ b/files/ru/glossary/css/index.html
@@ -14,7 +14,7 @@ original_slug: Глоссарий/CSS
 
 
CSS-правило состоит из {{Glossary("selector","селектора")}} и набора {{Glossary("CSS Property","свойств")}} с их значениями. В этом примере все HTML параграфы будут иметь текст жёлтого цвета на чёрном фоне:

 
-
/* Селектор "p" означает, что данное правило будет применено ко всем параграфам в документе */
+
/* Селектор "p" означает, что данное правило будет применено ко всем параграфам в документе */
 p {
   /* Свойство "color" определяет цвет текста, в данном случае желтый. */
   color: yellow;
diff --git a/files/ru/glossary/css_selector/index.html b/files/ru/glossary/css_selector/index.html
index 83d5e61929..d0024eab62 100644
--- a/files/ru/glossary/css_selector/index.html
+++ b/files/ru/glossary/css_selector/index.html
@@ -12,7 +12,7 @@ original_slug: Глоссарий/CSS_Selector
 ---
 
CSS-селектор это часть CSS-правила, которая позволяет вам указать, к какому элементу (элементам) применить стиль. Например:

 
-
***HTML***
+
***HTML***
 <div> I am inside of a div element. </div>
 <p> I am inside of a paragraph element. </p>
 
diff --git a/files/ru/glossary/idempotent/index.html b/files/ru/glossary/idempotent/index.html
index 25308782f9..fe7ac4dd64 100644
--- a/files/ru/glossary/idempotent/index.html
+++ b/files/ru/glossary/idempotent/index.html
@@ -15,7 +15,7 @@ original_slug: Глоссарий/Idempotent
 
 
GET /pageX HTTP/1.1 идемпотентен. Вызвавший несколько раз подряд этот запрос, клиент получит тот же результат:

 
-
GET /pageX HTTP/1.1
+
GET /pageX HTTP/1.1
 GET /pageX HTTP/1.1
 GET /pageX HTTP/1.1
 GET /pageX HTTP/1.1
@@ -23,14 +23,14 @@ GET /pageX HTTP/1.1
 
 
POST /add_row HTTP/1.1 не идемпотентен; если его вызвать несколько раз, то он добавит несколько строк:

 
-
POST /add_row HTTP/1.1
+
POST /add_row HTTP/1.1
 POST /add_row HTTP/1.1   -> Adds a 2nd row
 POST /add_row HTTP/1.1   -> Adds a 3rd row
 

 
 
DELETE /idX/delete HTTP/1.1 идемпотентен, даже если возвращаемый код отличается:

 
-
DELETE /idX/delete HTTP/1.1   -> Returns 200 if idX exists
+
DELETE /idX/delete HTTP/1.1   -> Returns 200 if idX exists
 DELETE /idX/delete HTTP/1.1   -> Returns 404 as it just got deleted
 DELETE /idX/delete HTTP/1.1   -> Returns 404

 
diff --git a/files/ru/glossary/jquery/index.html b/files/ru/glossary/jquery/index.html
index 5703bcb19c..bf56ff7cbc 100644
--- a/files/ru/glossary/jquery/index.html
+++ b/files/ru/glossary/jquery/index.html
@@ -8,14 +8,14 @@ original_slug: Глоссарий/jQuery
 
 
jQuery синтаксис использования $(selector).action() позволяет выбранному селектору совершить действие.Пример:

 
-
$(document).ready(function(){
+
$(document).ready(function(){
   alert("Hello World!");
 });
 

 
 
JQuery имеет аналогичный эффект, что и следующий код JavaScript:

 
-
window.onload = function() {
+
window.onload = function() {
   alert( "Hello World!" );
 };
 

diff --git a/files/ru/glossary/safe/index.html b/files/ru/glossary/safe/index.html
index 5cba85f6ff..23c6ced6a7 100644
--- a/files/ru/glossary/safe/index.html
+++ b/files/ru/glossary/safe/index.html
@@ -17,16 +17,16 @@ original_slug: Глоссарий/safe
 
 
Вызов безопасного метода, не меняющего состояния сервера:

 
-
GET /pageX.html HTTP/1.1
+
GET /pageX.html HTTP/1.1
 

 
 
Вызов небезопасного метода, который может поменять состояние сервера:

 
-
POST /pageX.html HTTP/1.1 

+
POST /pageX.html HTTP/1.1 

 
 
Вызов идемпотентного, но небезопасного метода:

 
-
DELETE /idX/delete HTTP/1.1

+
DELETE /idX/delete HTTP/1.1

 
 
Материалы для изучения

 
diff --git a/files/ru/glossary/truthy/index.html b/files/ru/glossary/truthy/index.html
index d6323960ac..c1ecc2b86b 100644
--- a/files/ru/glossary/truthy/index.html
+++ b/files/ru/glossary/truthy/index.html
@@ -15,7 +15,7 @@ original_slug: Глоссарий/Truthy
 
 
Примеры истинных значений в JavaScript (которые будут приведены к true в булевых выражениях, и таким образом выполниться блок if):

 
-
if (true)
+
if (true)
 if ({})
 if ([])
 if (42)
diff --git a/files/ru/glossary/vendor_prefix/index.html b/files/ru/glossary/vendor_prefix/index.html
index 60d2281041..d81304c644 100644
--- a/files/ru/glossary/vendor_prefix/index.html
+++ b/files/ru/glossary/vendor_prefix/index.html
@@ -25,7 +25,7 @@ original_slug: Глоссарий/Vendor_Prefix
 
 
Sample usage:

 
-
-webkit-transition: all 4s ease;
+
-webkit-transition: all 4s ease;
 -moz-transition: all 4s ease;
 -ms-transition: all 4s ease;
 -o-transition: all 4s ease;
@@ -59,7 +59,7 @@ transition: all 4s ease; 

 
 
Sample usage:

 
-
var requestAnimationFrame = window.requestAnimationFrame ||
+
var requestAnimationFrame = window.requestAnimationFrame ||
                             window.mozRequestAnimationFrame ||
                             window.webkitRequestAnimationFrame ||
                             window.oRequestAnimationFrame ||
diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
index 449e24f887..273618ce86 100644
--- a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
+++ b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
@@ -45,10 +45,10 @@ translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_Ap
   Code Editor from Cloud Shell toolbar
  
  • С помощью drag and drop разместите папку sample-app в левой панели редактора кода.
    • 
  
  • Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения:
-  
    cd sample-app
    
+  
    cd sample-app
    
  
    • 
  
  • Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine:
-  
    gcloud app deploy
    
+  
    gcloud app deploy
    
  
    • 
  
  • Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.
    • 
  
  • Нажмите Y для подтверждения.
    • 
diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html
index d5d0f440ba..67059b421c 100644
--- a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html
+++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html
@@ -59,12 +59,12 @@ translation_of: Learn/Common_questions/set_up_a_local_testing_server
  
  • 
   
    Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:
    
 
-  
    python -V
    
+  
    python -V
    
  
    • 
  
  • 
   
    Система вернёт вам номер версии установленной программы. В случае успешного выполнения команды python -V  нужно перейти в директорию с вашим проектом, используя команду cd:
    
 
-  
    # include the directory name to enter it, for example
+  
    # include the directory name to enter it, for example
 cd Desktop
 # use two dots to jump up one directory level if you need to
 cd ..
    
@@ -72,7 +72,7 @@ cd ..
    
  
  • 
   
    Введите команду для запуска сервера в том каталоге:
    
 
-  
    # If Python version returned above is 3.X
+  
    # If Python version returned above is 3.X
 python -m http.server
 # If Python version returned above is 2.X
 python -m SimpleHTTPServer
    
diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html
index cd1ce35f94..a4b5bc0706 100644
--- a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html
+++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html
@@ -124,7 +124,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server
 
 
    It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:
    
 
-
    rsync [-options] SOURCE user@x.x.x.x:DESTINATION
    
+
    rsync [-options] SOURCE user@x.x.x.x:DESTINATION
    
 
 
      
  
    • -options is a dash followed by a one or more letters, for example -v for verbose error messages, and -b to make backups. You can see the full list at the rsync man page (search for "Options summary").
      • 
@@ -140,7 +140,7 @@ translation_of: Learn/Common_questions/Upload_files_to_a_web_server
 
 
      Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the -e option. For example:
      
 
-
      rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
      
+
      rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
      
 
 
      You can find more details of what is needed at How To Copy Files With Rsync Over SSH.
      
 
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
index ab427b275c..555908dac6 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
      
 
-
      .box {
+
      .box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
   url(big-star.png) center no-repeat, rebeccapurple;
 } 
@@ -116,7 +116,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):
      
 
-
      .box {
+
      .box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top center;
@@ -125,7 +125,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      Допустимы значения длины и процентные:
      
 
-
      .box {
+
      .box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
@@ -134,7 +134,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      Вы также можете смешивать значения ключевых слов с длинами или процентами, например:
      
 
-
      .box {
+
      .box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px;
@@ -142,7 +142,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
      
 
-
      .box {
+
      .box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
@@ -178,7 +178,7 @@ translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 
 
      Другие свойства background- * также могут иметь значения, разделённые запятыми,  как и background-image:
      
 
-
      background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+
      background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
 background-position: 10px 20px,  top right;
      
 
@@ -229,19 +229,19 @@ background-position: 10px 20px,  top right;
      
 
 
      Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:
      
 
-
      .box {
+
      .box {
   border: 1px solid black;
 } 
      
 
 
      Или мы можем нацеливаться на один край блока, например:
      
 
-
      .box {
+
      .box {
   border-top: 1px solid black;
 } 
      
 
 
      Индивидуальные свойства этих сокращений будут следующими:
      
 
-
      .box {
+
      .box {
   border-width: 1px;
   border-style: solid;
   border-color: black;
@@ -249,7 +249,7 @@ background-position: 10px 20px,  top right;
      
 
 
      И более детально:
      
 
-
      .box {
+
      .box {
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: black;
@@ -269,13 +269,13 @@ background-position: 10px 20px,  top right;
      
 
 
      Например, чтобы сделать все четыре угла блока радиусом 10px:
      
 
-
      .box {
+
      .box {
   border-radius: 10px;
 } 
      
 
 
      Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:
      
 
-
      .box {
+
      .box {
   border-top-right-radius: 1em 10%;
 } 
      
 
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html
index e06ed6222c..2f82593f1f 100644
--- a/files/ru/learn/css/building_blocks/selectors/combinators/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html
@@ -29,7 +29,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
      Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.
      
 
-
      body article p
      
+
      body article p
      
 
 
      В приведённом ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.
      
 
@@ -39,7 +39,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
      Дочерний комбинатор (>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селектор пишется так:
      
 
-
      article > p
      
+
      article > p
      
 
 
      Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.
      
 
@@ -51,7 +51,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
      Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :
      
 
-
      p + img
      
+
      p + img
      
 
 
      Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.
      
 
@@ -63,7 +63,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
      Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:
      
 
-
      p ~ img
      
+
      p ~ img
      
 
 
      В приведённом ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идёт после него, будет выбран.
      
 
@@ -73,7 +73,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 
 
      Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:
      
 
-
      ul > li[class="a"]  {  }
      
+
      ul > li[class="a"]  {  }
      
 
 
      Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.
      
 
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html
index 090f134d91..5bf4b0576c 100644
--- a/files/ru/learn/css/building_blocks/selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/index.html
@@ -47,7 +47,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
      Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:
      
 
-
      h1 {
+
      h1 {
   color: blue;
 }
 
@@ -57,13 +57,13 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
      А могу написать короче — просто отделив селекторы запятыми:
      
 
-
      h1, .special {
+
      h1, .special {
   color: blue;
 } 
      
 
 
      Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:
      
 
-
      h1,
+
      h1,
 .special {
   color: blue;
 } 
      
@@ -76,7 +76,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
      В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.
      
 
-
      h1 {
+
      h1 {
   color: blue;
 }
 
@@ -86,7 +86,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
      Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.
      
 
-
      h1, ..special {
+
      h1, ..special {
   color: blue;
 } 
      
 
@@ -98,41 +98,41 @@ original_slug: Learn/CSS/Building_blocks/Селекторы
 
 
      К этой группе относятся селекторы HTML-элементов, таких как <h1>.
      
 
-
      h1 { }
      
+
      h1 { }
      
 
 
      К группе относятся и селекторы классов:
      
 
-
      .box { }
      
+
      .box { }
      
 
 
      или селекторы идентификаторов (ID):
      
 
-
      #unique { }
      
+
      #unique { }
      
 
 
      Селекторы атрибутов
      
 
 
      Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:
      
 
-
      a[title] { }
      
+
      a[title] { }
      
 
 
      или основываясь на значении атрибута:
      
 
-
      a[href="https://example.com"] { }
      
+
      a[href="https://example.com"] { }
      
 
 
      Псевдоклассы, псевдоэлементы
      
 
 
      К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши
      
 
-
      a:hover { }
      
+
      a:hover { }
      
 
 
      К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.
      
 
-
      p::first-line { }
      
+
      p::first-line { }
      
 
 
      Комбинаторы
      
 
 
      И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):
      
 
-
      article > p { }
      
+
      article > p { }
      
 
 
      Продолжение
      
 
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
index 0dca8d3f9d..dccba5ef04 100644
--- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
@@ -35,7 +35,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
 
 
      Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
      
 
-
      :pseudo-class-name
      
+
      :pseudo-class-name
      
 
 
      Простой пример псевдокласса
      
 
@@ -74,7 +74,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
 
 
      Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.
      
 
-
      ::pseudo-element-name
      
+
      ::pseudo-element-name
      
 
 
      
 
      Примечание: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.
      
@@ -94,7 +94,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_p
 
 
      Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.
      
 
-
      article p:first-child::first-line {
+
      article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
 }
      
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
index 6494749f95..9898ab544a 100644
--- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
@@ -48,7 +48,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se
 
 
      Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 
      
 
-
      article :first-child {
+
      article :first-child {
   font-weight: bold;
 }
      
 
@@ -56,7 +56,7 @@ original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Se
 
 
      Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:
      
 
-
      article *:first-child {
+
      article *:first-child {
   font-weight: bold;
 } 
      
 
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.html
index 3fb706e69e..64aca4b04d 100644
--- a/files/ru/learn/css/building_blocks/the_box_model/index.html
+++ b/files/ru/learn/css/building_blocks/the_box_model/index.html
@@ -128,7 +128,7 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
      Предположим, что в элементе есть следующий CSS определяющий width, height, margin, border, и padding:
      
 
-
      .box {
+
      .box {
   width: 350px;
   height: 150px;
   margin: 10px;
@@ -153,13 +153,13 @@ translation_of: Learn/CSS/Building_blocks/The_box_model
 
 
      По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство box-sizing: border-box. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.
      
 
-
      .box {
+
      .box {
   box-sizing: border-box;
 } 
      
 
 
      Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство box-sizing для элемента <html>, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью the CSS Tricks article on box-sizing.
      
 
-
      html {
+
      html {
   box-sizing: border-box;
 }
 *, *::before, *::after {
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.html
index d495b04979..689292d9fc 100644
--- a/files/ru/learn/css/building_blocks/values_and_units/index.html
+++ b/files/ru/learn/css/building_blocks/values_and_units/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/CSS/Building_blocks/Values_and_units
 
 
      В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию  rgb():
      
 
-
      h1 {
+
      h1 {
   color: black;
   background-color: rgb(197,93,161);
 } 
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html
index 101646aea2..b675a1ec01 100644
--- a/files/ru/learn/css/css_layout/flexbox/index.html
+++ b/files/ru/learn/css/css_layout/flexbox/index.html
@@ -52,7 +52,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
      Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):
      
 
-
      section {
+
      section {
   display: flex;
 }
      
 
@@ -85,7 +85,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
      Попробуйте добавить следующую строчку в ваш файл:
      
 
-
      flex-direction: column
      
+
      flex-direction: column
      
 
 
      Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.
      
 
@@ -101,7 +101,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
      Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:
      
 
-
      flex-wrap: wrap
      
+
      flex-wrap: wrap
      
 
 
      Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:
      
 
@@ -115,12 +115,12 @@ translation_of: Learn/CSS/CSS_layout/Flexbox
 
 
      На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить
      
 
-
      flex-direction: row;
+
      flex-direction: row;
 flex-wrap: wrap;
      
 
 
      на
      
 
-
      flex-flow: row wrap;
      
+
      flex-flow: row wrap;
      
 
 
      Гибкое изменение размеров flex элементов
      
 
@@ -128,7 +128,7 @@ flex-wrap: wrap;
      
 
 
      Прежде всего, добавим следующее правило в конец вашего CSS кода:
      
 
-
      article {
+
      article {
   flex: 1;
 }
      
 
@@ -136,7 +136,7 @@ flex-wrap: wrap;
      
 
 
      Теперь добавьте следующее правило в строку после предыдущего:
      
 
-
      article:nth-of-type(3) {
+
      article:nth-of-type(3) {
   flex: 2;
 }
      
 
@@ -144,7 +144,7 @@ flex-wrap: wrap;
      
 
 
      Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:
      
 
-
      article {
+
      article {
   flex: 1 200px;
 }
 
@@ -180,7 +180,7 @@ article:nth-of-type(3) {
 
 
      Теперь добавьте следующую строку в низ кода CSS:
      
 
-
      div {
+
      div {
   display: flex;
   align-items: center;
   justify-content: space-around;
@@ -198,7 +198,7 @@ article:nth-of-type(3) {
 
 
      Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:
      
 
-
      button:first-child {
+
      button:first-child {
   align-self: flex-end;
 }
      
 
@@ -222,7 +222,7 @@ article:nth-of-type(3) {
 
 
      Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:
      
 
-
      button:first-child {
+
      button:first-child {
   order: 1;
 }
      
 
@@ -237,7 +237,7 @@ article:nth-of-type(3) {
 
 
      Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:
      
 
-
      button:last-child {
+
      button:last-child {
   order: -1;
 }
      
 
@@ -249,7 +249,7 @@ article:nth-of-type(3) {
 
 
      HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.
      
 
-
      section - article
+
      section - article
           article
           article - div - button
                     div   button
@@ -261,13 +261,13 @@ article:nth-of-type(3) {
 
 
      Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.
      
 
-
      section {
+
      section {
   display: flex;
 }
      
 
 
      Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.
      
 
-
      article {
+
      article {
   flex: 1 200px;
 }
 
@@ -280,7 +280,7 @@ article:nth-of-type(3) {
 
 
      Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.
      
 
-
      article:nth-of-type(3) div:first-child {
+
      article:nth-of-type(3) div:first-child {
   flex: 1 100px;
   display: flex;
   flex-flow: row wrap;
@@ -290,7 +290,7 @@ article:nth-of-type(3) {
 
 
      Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.
      
 
-
      button {
+
      button {
   flex: 1;
   margin: 5px;
   font-size: 18px;
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html
index 195ffe4374..3106fe50a2 100644
--- a/files/ru/learn/css/css_layout/floats/index.html
+++ b/files/ru/learn/css/css_layout/floats/index.html
@@ -38,7 +38,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
      Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:
      
 
-
      <h1>Simple float example</h1>
+
      <h1>Simple float example</h1>
 
 <div class="box">Float</div>
 
@@ -50,7 +50,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
      А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл .css — на ваше усмотрение):
      
 
-
      body {
+
      body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -67,7 +67,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
 
      Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:
      
 
-
      .box {
+
      .box {
   float: left;
   margin-right: 15px;
   width: 150px;
@@ -83,7 +83,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
 
    
 
-
    function expensiveOperation() {
+
    function expensiveOperation() {
   for(let i = 0; i < 1000000; i++) {
     ctx.fillStyle = 'rgba(0,0,255, 0.2)';
     ctx.beginPath();
@@ -102,24 +102,24 @@ alertBtn.addEventListener('click', () =>
 
 
    Под потоком, обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:
    
 
-
    Task A --> Task B --> Task C
    
+
    Task A --> Task B --> Task C
    
 
 
    Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.
    
 
 
    Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:
    
 
-
    Thread 1: Task A --> Task B
+
    Thread 1: Task A --> Task B
 Thread 2: Task C --> Task D
    
 
 
    JavaScript однопоточный
    
 
 
    JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом основной поток. Наш пример выше, выполняется следующим образом:
    
 
-
    Main thread: Render circles to canvas --> Display alert()
    
+
    Main thread: Render circles to canvas --> Display alert()
    
 
 
    В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. Web workers позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.
    
 
-
      Main thread: Task A --> Task C
+
      Main thread: Task A --> Task C
 Worker thread: Expensive task B
    
 
 
    Помня об этом, выполните наш следующий пример simple-sync-worker.html (посмотреть пример в действии), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.
    
@@ -130,18 +130,18 @@ Worker thread: Expensive task B
    
 
 
    Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:
    
 
-
    Main thread: Task A --> Task B
    
+
    Main thread: Task A --> Task B
    
 
 
    В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.
    
 
-
      Main thread: Task A --> Task B --> |Task D|
+
      Main thread: Task A --> Task B --> |Task D|
 Worker thread: Task C -----------> |      |
    
 
 
    Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.
    
 
 
    Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как Promises позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:
    
 
-
    Main thread: Task A                   Task B
+
    Main thread: Task A                   Task B
     Promise:      |__async operation__|
    
 
 
    Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.
    
diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html
index 2d457b6888..0b53770834 100644
--- a/files/ru/learn/javascript/asynchronous/introducing/index.html
+++ b/files/ru/learn/javascript/asynchronous/introducing/index.html
@@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing
 
 
    Большая часть функциональности, которую мы рассматривали в предыдущих обучающих модулях, является синхронной — вы запускаете какой-то код, а результат возвращается, как только браузер может его вернуть. Давайте рассмотрим простой пример ( посмотрите онлайн, как это работает и посмотрите исходный код):
    
 
-
    const btn = document.querySelector('button');
+
    const btn = document.querySelector('button');
 btn.addEventListener('click', () => {
   alert('You clicked me!');
 
@@ -65,7 +65,7 @@ btn.addEventListener('click', () => {
 
    Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:
    
 
 
 
 
    {{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}
    
@@ -80,7 +80,7 @@ btn.addEventListener('click', () => {
 
 
    Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:
    
 
-
    let response = fetch('myImage.png');
+
    let response = fetch('myImage.png');
 let blob = response.blob();
 // display your image blob in the UI somehow
    
 
@@ -94,7 +94,7 @@ let blob = response.blob();
 
 
    Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):
    
 
-
    btn.addEventListener('click', () => {
+
    btn.addEventListener('click', () => {
   alert('You clicked me!');
 
   let pElem = document.createElement('p');
@@ -108,7 +108,7 @@ let blob = response.blob();
 
 
    Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):
    
 
-
    function loadAsset(url, type, callback) {
+
    function loadAsset(url, type, callback) {
   let xhr = new XMLHttpRequest();
   xhr.open('GET', url);
   xhr.responseType = type;
@@ -136,7 +136,7 @@ loadAsset('coffee.jpg', 'blob', displayImage);
    
 
 
    Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (запустите пример, и посмотрите исходный код):
    
 
-
    const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
    const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
 
 gods.forEach(function (eachName, index){
   console.log(index + '. ' + eachName);
@@ -148,7 +148,7 @@ gods.forEach(function (eachName, index){
 
 
    Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является fetch() API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи Fetching data from the server:
    
 
-
    fetch('products.json').then(function(response) {
+
    fetch('products.json').then(function(response) {
   return response.json();
 }).then(function(json) {
   products = json;
@@ -195,7 +195,7 @@ gods.forEach(function (eachName, index){
 
 
    Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (запустите пример, и посмотреть исходный код). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.
    
 
-
    console.log ('Starting');
+
    console.log ('Starting');
 let image;
 
 fetch('coffee.jpg').then((response) => {
@@ -226,7 +226,7 @@ console.log ('All done!');
    
 
 
    Если вы запутались, рассмотрим следующий небольшой пример:
    
 
-
    console.log("registering click handler");
+
    console.log("registering click handler");
 
 button.addEventListener('click', () => {
   console.log("get click");
@@ -240,11 +240,11 @@ console.log("all done");
    
 
 
    Чтобы увидеть это в действии, попробуйте взять локальную копию нашего примера и измените третий вызов console.log () следующим образом:
    
 
-
    console.log ('All done! ' + image + 'displayed.');
    
+
    console.log ('All done! ' + image + 'displayed.');
    
 
 
    Теперь вместо третьего сообщения должна возникнуть следующая ошибка:
    
 
-
    TypeError: image is undefined; can't access its "src" property
    
+
    TypeError: image is undefined; can't access its "src" property
    
 
 
    Это происходит потому, что в то же время браузер пытается запустить третий console.log(), блок fetch() ещё не закончил выполнение, поэтому переменная image ещё не имеет значения.
    
 
diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
index 8d00ba98af..19019a19a9 100644
--- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -64,13 +64,13 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва
 
 
    В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (живой пример, и исходный код):
    
 
-
    let myGreeting = setTimeout(function() {
+
    let myGreeting = setTimeout(function() {
   alert('Hello, Mr. Universe!');
 }, 2000)
    
 
 
    Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:
    
 
-
    // С именованной функцией
+
    // С именованной функцией
 let myGreeting = setTimeout(function sayHi() {
   alert('Hello, Mr. Universe!');
 }, 2000)
@@ -92,19 +92,19 @@ let myGreeting = setTimeout(sayHi, 2000);
    
 
 
    Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:
    
 
-
    function sayHi(who) {
+
    function sayHi(who) {
   alert(`Hello ${who}!`);
 }
    
 
 
    Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:
    
 
-
    let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
    
+
    let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');
    
 
 
    Очистка таймаутов
    
 
 
    Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав clearTimeout(), передав ему идентификатор вызова setTimeout() в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:
    
 
-
    clearTimeout(myGreeting);
    
+
    clearTimeout(myGreeting);
    
 
 
    
 
    Note: См.greeter-app.html для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (см. исходный код).
    
@@ -118,7 +118,7 @@ let myGreeting = setTimeout(sayHi, 2000);
    
 
 
    Давайте посмотрим на пример. Следующая функция создаёт новый объект Date(), с помощью toLocaleTimeString() извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью setInterval(), создавая эффект цифровых часов, которые обновляются раз в секунду ( реальный пример, и исходный код):
    
 
-
    function displayTime() {
+
    function displayTime() {
    let date = new Date();
    let time = date.toLocaleTimeString();
    document.getElementById('demo').textContent = time;
@@ -132,7 +132,7 @@ const createClock = setInterval(displayTime, 1000);
    
 
 
    setInterval () выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете timeouts - передавая идентификатор, возвращаемый вызовом setInterval (), в функцию clearInterval ():
    
 
-
    const myInterval = setInterval(myFunction, 2000);
+
    const myInterval = setInterval(myFunction, 2000);
 
 clearInterval(myInterval);
    
 
@@ -182,7 +182,7 @@ clearInterval(myInterval);
    
 
 
    В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:
    
 
-
    let i = 1;
+
    let i = 1;
 
 setTimeout(function run() {
   console.log(i);
@@ -192,7 +192,7 @@ setTimeout(function run() {
 
 
    Сравните приведённый выше пример со следующим - здесь используется setInterval () для достижения того же эффекта:
    
 
-
    let i = 1;
+
    let i = 1;
 
 setInterval(function run() {
   console.log(i);
@@ -217,7 +217,7 @@ setInterval(function run() {
 
 
    Например, код приведённый ниже (рабочий код) выводит alert содержащий "Hello", затем alert содержащий "World" как только вы нажмёте ОК в первом alert.
    
 
-
    setTimeout(function() {
+
    setTimeout(function() {
   alert('World');
 }, 0);
 
@@ -243,7 +243,7 @@ alert('Hello');
    
 
 
    Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:
    
 
-
    function draw() {
+
    function draw() {
    // Drawing code goes here
    requestAnimationFrame(draw);
 }
@@ -272,7 +272,7 @@ draw();
    
 
 
    Давайте поговорим ещё немного о том, чем метод requestAnimationFrame () отличается от других методов, используемых ранее. Глядя на наш код сверху:
    
 
-
    function draw() {
+
    function draw() {
    // Drawing code goes here
    requestAnimationFrame(draw);
 }
@@ -281,7 +281,7 @@ draw();
    
 
 
    Такой же код с использованием setInterval():
    
 
-
    function draw() {
+
    function draw() {
    // Drawing code goes here
 }
 
@@ -297,7 +297,7 @@ setInterval(draw, 17);
    
 
 
    Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:
    
 
-
    let startTime = null;
+
    let startTime = null;
 
 function draw(timestamp) {
     if (!startTime) {
@@ -337,7 +337,7 @@ draw();
    
  
  • 
   
    Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <body> равную 100% высоты {{htmlelement("html")}} , и центрирует <div> внутри <body>, по горизонтали и вертикали.
    
 
-  
    html {
+  
    html {
   background-color: white;
   height: 100%;
 }
@@ -362,7 +362,7 @@ div {
  
  • 
   
    Разместите следующий JavaScript-код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете для переменной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливаете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().
    
 
-  
    const spinner = document.querySelector('div');
+  
    const spinner = document.querySelector('div');
 let rotateCount = 0;
 let startTime = null;
 let rAF;
@@ -371,14 +371,14 @@ let rAF;
  
  • 
   
    Под предыдущим кодом вставьте функцию draw() которая будет использоваться для хранения нашего кода анимации, который включает параметр timestamp :
    
 
-  
    function draw(timestamp) {
+  
    function draw(timestamp) {
 
 }
    
  
    • 
  
  • 
   
    Внутри draw () добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра rotateCount значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):
    
 
-  
      if (!startTime) {
+  
      if (!startTime) {
    startTime = timestamp;
   }
 
@@ -388,22 +388,22 @@ let rAF;
  
  • 
   
    Под предыдущей строкой внутри draw () добавьте следующий блок - он проверяет, превышает ли значение rotateCount 359 (например, 360, полный круг). Если это так, он устанавливает значение по модулю 360 (то есть остаток, оставшийся после деления значения на 360), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до 359 градусов, чем со значениями типа «128000 градусов».
    
 
-  
    if (rotateCount > 359) {
+  
    if (rotateCount > 359) {
   rotateCount %= 360;
 }
    
  
    • 
  
  • Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner:
-  
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    
+  
    spinner.style.transform = `rotate(${rotateCount}deg)`;
    
  
    • 
  
  • 
   
    В самом низу внутри функции draw () вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов requestAnimation (), который принимает функцию draw () в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию draw () со скоростью, близкой к 60 FPS.
    
 
-  
    rAF = requestAnimationFrame(draw);
    
+  
    rAF = requestAnimationFrame(draw);
    
  
    • 
  
  • 
   
    Ниже, вызовите функцию draw() для запуска анимации.
    
 
-  
    draw();
    
+  
    draw();
    
  
    • 
 
 
@@ -417,7 +417,7 @@ let rAF;
 
 
    Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:
    
 
-
    cancelAnimationFrame(rAF);
    
+
    cancelAnimationFrame(rAF);
    
 
 
    Активное обучение: запуск и остановка нашей анимации
    
 
@@ -444,7 +444,7 @@ let rAF;
 
 
    В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:
    
 
-
    if (posX % 13 === 0) {
+
    if (posX % 13 === 0) {
   if (sprite === 5) {
     sprite = 0;
   } else {
@@ -456,7 +456,7 @@ let rAF;
 
 
    ... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:
    
 
-
    if (posX > width/2) {
+
    if (posX > width/2) {
   newStartPos = -( (width/2) + 102 );
   posX = Math.ceil(newStartPos / 13) * 13;
   console.log(posX);
@@ -485,7 +485,7 @@ let rAF;
  
  • 
   
    Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:
    
 
-  
    const spinner = document.querySelector('.spinner p');
+  
    const spinner = document.querySelector('.spinner p');
 const spinnerContainer = document.querySelector('.spinner');
 let rotateCount = 0;
 let startTime = null;
@@ -508,7 +508,7 @@ const result = document.querySelector('.result');
    
  
  • 
   
    Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.
    
 
-  
    function random(min,max) {
+  
    function random(min,max) {
   var num = Math.floor(Math.random()*(max-min)) + min;
   return num;
 }
    
@@ -516,7 +516,7 @@ const result = document.querySelector('.result');
    
  
  • 
   
    Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:
    
 
-  
    function draw(timestamp) {
+  
    function draw(timestamp) {
   if(!startTime) {
    startTime = timestamp;
   }
@@ -534,13 +534,13 @@ const result = document.querySelector('.result');
    
  
  • 
   
    Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью display: none ;.
    
 
-  
    result.style.display = 'none';
+  
    result.style.display = 'none';
 spinnerContainer.style.display = 'none';
    
  
    • 
  
  • 
   
    Затем определите функцию reset (), которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:
    
 
-  
    function reset() {
+  
    function reset() {
   btn.style.display = 'block';
   result.textContent = '';
   result.style.display = 'none';
@@ -549,7 +549,7 @@ spinnerContainer.style.display = 'none';
    
  
  • 
   
    Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция start () вызывает draw (), чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов setTimeout (), который выполняется функция setEndgame () по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции start () при её нажатии.
    
 
-  
    btn.addEventListener('click', start);
+  
    btn.addEventListener('click', start);
 
 function start() {
   draw();
@@ -569,7 +569,7 @@ function start() {
  
  • 
   
    Добавьте в свой код следующую функцию:
    
 
-  
    function setEndgame() {
+  
    function setEndgame() {
   cancelAnimationFrame(rAF);
   spinnerContainer.style.display = 'none';
   result.style.display = 'block';
diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.html
index 6f0b70c1bf..868702ca03 100644
--- a/files/ru/learn/javascript/building_blocks/conditionals/index.html
+++ b/files/ru/learn/javascript/building_blocks/conditionals/index.html
@@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
 
 
    Базовый if...else синтаксис выглядит как {{glossary("pseudocode")}}:
    
 
-
    if (condition) {
+
    if (condition) {
   code to run if condition is true
 } else {
   run some other code instead
@@ -66,7 +66,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
 
 
    Стоит заметить, что  else и второй блок скобок { } не обязателен — следующий код так же будет работать:
    
 
-
    if (condition) {
+
    if (condition) {
   код, который должен выполнить, если условие истина
 }
 
@@ -76,7 +76,7 @@ translation_of: Learn/JavaScript/Building_blocks/conditionals
 
 
    И, наконец, иногда вы можете встретить код if...else без фигурных скобок в сокращённой форме:
    
 
-
    if (condition) code to run if condition is true
+
    if (condition) code to run if condition is true
 else run some other code instead
    
 
 
    Это абсолютно рабочий код, но он менее читаем, лучше использовать фигурные скобки, новые строки и отступы.
    
@@ -85,7 +85,7 @@ else run some other code instead
    
 
 
    Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: 
    
 
-
    var shoppingDone = false;
+
    var shoppingDone = false;
 
 if (shoppingDone === true) {
   var childsAllowance = 10;
@@ -105,7 +105,7 @@ if (shoppingDone === true) {
 
 
    Существует способ привязать дополнительные варианты/результаты к вашему if...else — использоватьelse if. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между if() { ... } и else { ... } — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:
    
 
-
    <label for="weather">Выберите тип погоды сегодня: </label>
+
    <label for="weather">Выберите тип погоды сегодня: </label>
 <select id="weather">
   <option value="">--Сделайте выбор--</option>
   <option value="sunny">Солнечно</option>
@@ -116,7 +116,7 @@ if (shoppingDone === true) {
 
 <p></p>
    
 
-
    var select = document.querySelector('select');
+
    var select = document.querySelector('select');
 var para = document.querySelector('p');
 
 select.addEventListener('change', setWeather);
@@ -168,7 +168,7 @@ function setWeather() {
 
 
    Мы хотели бы особо обратить внимание на проверку булевых значений (true/false),  и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть  false, undefined, null, 0, NaN, или пустая строка ('') фактически возвращает true при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она true, или существует (т. е. переменная не равна undefined). Например:
    
 
-
    var cheese = 'Cheddar';
+
    var cheese = 'Cheddar';
 
 if (cheese) {
   console.log('Ура! Есть сыр для приготовления бутерброда.');
@@ -178,7 +178,7 @@ if (cheese) {
 
 
    И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:
    
 
-
    var shoppingDone = false;
+
    var shoppingDone = false;
 
 if (shoppingDone) { // не нужно явно указывать '=== true'
   var childsAllowance = 10;
@@ -190,7 +190,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    Вполне нормально использовать один условный оператор if...else внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:
    
 
-
    if (choice === 'sunny') {
+
    if (choice === 'sunny') {
   if (temperature < 86) {
     para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
   } else if (temperature >= 86) {
@@ -211,7 +211,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:
    
 
-
    if (choice === 'sunny' && temperature < 86) {
+
    if (choice === 'sunny' && temperature < 86) {
   para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
 } else if (choice === 'sunny' && temperature >= 86) {
   para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
@@ -221,7 +221,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    Давайте посмотрим на быстрый пример оператора ИЛИ:
    
 
-
    if (iceCreamVanOutside || houseStatus === 'в огне') {
+
    if (iceCreamVanOutside || houseStatus === 'в огне') {
   //если подъехал фургон с мороженым или дом горит
   console.log('Вы должны быстро покинуть дом.');
 } else {
@@ -230,7 +230,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    Последний тип логического оператора НЕ, выраженный ! оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:
    
 
-
    if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+
    if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
   console.log('Вероятно, можно в нем оставаться.');
 } else {
   console.log('Вы должны быстро покинуть дом.');
@@ -240,19 +240,19 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:
    
 
-
    if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+
    if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
   // код выполняется
 }
    
 
 
    Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами || (ИЛИ). Например.
    
 
-
    if (x === 5 || 7 || 10 || 20) {
+
    if (x === 5 || 7 || 10 || 20) {
   // выполнить код
 }
    
 
 
    В данном примере условие в if(...)  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:
    
 
-
    if (x === 5 || x === 7 || x === 10 ||x === 20) {
+
    if (x === 5 || x === 7 || x === 10 ||x === 20) {
   // выполнить код
 }
    
 
@@ -262,7 +262,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    В этом случае нам поможет оператор switch – он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:
    
 
-
    switch (выражение) {
+
    switch (выражение) {
   case choice1:
     выполнить этот код
     break;
@@ -297,7 +297,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 
    Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:
    
 
-
    <label for="weather">Выберите тип погоды сегодня: </label>
+
    <label for="weather">Выберите тип погоды сегодня: </label>
 <select id="weather">
   <option value="">--Сделайте выбор--</option>
   <option value="sunny">Солнечно</option>
@@ -308,7 +308,7 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
 <p></p>
    
 
-
    var select = document.querySelector('select');
+
    var select = document.querySelector('select');
 var para = document.querySelector('p');
 
 select.addEventListener('change', setWeather);
@@ -345,11 +345,11 @@ function setWeather() {
 
 
    Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. Тернарный или условный оператор имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является true, и другое значение/выражение, если условие является false. Часто это очень удобная альтернатива блоку if...else, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия true/false. Общая схема оператора:
    
 
-
    ( условие) ? выполнить этот код : выполнить этот код вместо первого
    
+
    ( условие) ? выполнить этот код : выполнить этот код вместо первого
    
 
 
    Приведём простой пример:
    
 
-
    var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
    
+
    var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
    
 
 
    У нас есть переменная isBirthday , если она true, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.
    
 
@@ -357,7 +357,7 @@ function setWeather() {
 
 
    При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.
    
 
-
    <label for="theme">Выберите тему: </label>
+
    <label for="theme">Выберите тему: </label>
 <select id="theme">
   <option value="white">Белая</option>
   <option value="black">Чёрная</option>
@@ -365,7 +365,7 @@ function setWeather() {
 
 <h1>Это мой веб-сайт</h1>
    
 
-
    var select = document.querySelector('select');
+
    var select = document.querySelector('select');
 var html = document.querySelector('html');
 document.body.style.padding = '10px';
 
@@ -422,7 +422,7 @@ select.onchange = function() {
 
    • 
  
  • 
   
    {{domxref("Storage.getItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите получить - и возвращает значение элемента. Теперь введите эти строки в вашу консоль JavaScript:
    
 
-  
    var myName = localStorage.getItem('name');
+  
    var myName = localStorage.getItem('name');
 myName
    
 
   
    После ввода во второй строке вы должны увидеть, что переменная myName теперь содержит значение элемента данных name.
    
@@ -111,7 +111,7 @@ myName
    
  
  • 
   
    {{domxref("Storage.removeItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите удалить, - и удаляет этот элемент из веб-хранилища. Введите следующие строки в вашу консоль JavaScript:
    
 
-  
    localStorage.removeItem('name');
+  
    localStorage.removeItem('name');
 var myName = localStorage.getItem('name');
 myName
    
 
@@ -130,7 +130,7 @@ myName
    
  
  • 
   
    Введите эти строки в консоль JavaScript браузера:
    
 
-  
    localStorage.setItem('name','Chris');
+  
    localStorage.setItem('name','Chris');
 var myName = localStorage.getItem('name');
 myName
    
 
@@ -142,7 +142,7 @@ myName
    
  
  • 
   
    Введите следующий код:
    
 
-  
    var myName = localStorage.getItem('name');
+  
    var myName = localStorage.getItem('name');
 myName
    
 
   
    Вы должны увидеть, что значение всё ещё доступно, даже после закрытия / открытия браузера.
    
@@ -175,7 +175,7 @@ myName
    
  
  • 
   
    Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:
    
 
-  
    // create needed constants
+  
    // create needed constants
 const rememberDiv = document.querySelector('.remember');
 const forgetDiv = document.querySelector('.forget');
 const form = document.querySelector('form');
@@ -189,7 +189,7 @@ const personalGreeting = document.querySelector('.personal-greeting');
    
  
  • 
   
    Далее нам нужно включить небольшой обработчик событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:
    
 
-  
    // Stop the form from submitting when a button is pressed
+  
    // Stop the form from submitting when a button is pressed
 form.addEventListener('submit', function(e) {
   e.preventDefault();
 });
    
@@ -197,7 +197,7 @@ form.addEventListener('submit', function(e) {
  
  • 
   
    Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью setItem(), затем запускаем функцию nameDisplayCheck(), которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: 
    
 
-  
    // run function when the 'Say hello' button is clicked
+  
    // run function when the 'Say hello' button is clicked
 submitBtn.addEventListener('click', function() {
   // store the entered name in web storage
   localStorage.setItem('name', nameInput.value);
@@ -209,7 +209,7 @@ submitBtn.addEventListener('click', function() {
  
  • 
   
    На этом этапе нам также необходим обработчик событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную name из веб-хранилища используя removeItem(), затем снова запускаем nameDisplayCheck() для обновления. Добавьте этот код в конец:
    
 
-  
    // run function when the 'Forget' button is clicked
+  
    // run function when the 'Forget' button is clicked
 forgetBtn.addEventListener('click', function() {
   // Remove the stored name from web storage
   localStorage.removeItem('name');
@@ -221,7 +221,7 @@ forgetBtn.addEventListener('click', function() {
  
  • 
   
    Самое время для определения самой функции nameDisplayCheck(). Здесь мы проверяем была ли переменная name сохранена в веб-хранилище с помощью localStorage.getItem('name') в качестве условия. Если переменная name была сохранена, то вызов вернёт - true; если же нет, то - false. Если true, мы показываем персональное приветствие, отображаем кнопку «Forget», и скрываем кнопку «Say hello». Если же false, мы отображаем общее приветствие и делаем обратное. Опять же, добавьте следующий код в конец:
    
 
-  
    // define the nameDisplayCheck() function
+  
    // define the nameDisplayCheck() function
 function nameDisplayCheck() {
   // check whether the 'name' data item is stored in web Storage
   if(localStorage.getItem('name')) {
@@ -245,7 +245,7 @@ function nameDisplayCheck() {
  
  • 
   
    Последнее но не менее важное, нам необходимо запускать функцию nameDisplayCheck() при каждой загрузке страницы. Если мы не сделаем этого, персональное приветствие не будет сохранятся после перезагрузки страницы. Добавьте следующий фрагмент в конец вашего кода:
    
 
-  
    document.body.onload = nameDisplayCheck;
    
+  
    document.body.onload = nameDisplayCheck;
    
  
    • 
 
 
@@ -291,7 +291,7 @@ function nameDisplayCheck() {
  
  • 
   
    Below the constant declarations, add the following lines:
    
 
-  
    // Create an instance of a db object for us to store the open database in
+  
    // Create an instance of a db object for us to store the open database in
 let db;
    
 
   
    Here we are declaring a variable called db — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.
    
@@ -299,7 +299,7 @@ let db;
    
  
  • 
   
    Next, add the following to the bottom of your code:
    
 
-  
    window.onload = function() {
+  
    window.onload = function() {
 
 };
    
 
@@ -308,7 +308,7 @@ let db;
    
  
  • 
   
    Inside the window.onload handler, add the following:
    
 
-  
    // Open our database; it is created if it doesn't already exist
+  
    // Open our database; it is created if it doesn't already exist
 // (see onupgradeneeded below)
 let request = window.indexedDB.open('notes', 1);
    
 
@@ -323,7 +323,7 @@ let request = window.indexedDB.open('notes', 1);
    
  
  • 
   
    Now add the following event handlers just below your previous addition — again inside the window.onload handler:
    
 
-  
    // onerror handler signifies that the database didn't open successfully
+  
    // onerror handler signifies that the database didn't open successfully
 request.onerror = function() {
   console.log('Database failed to open');
 };
@@ -346,7 +346,7 @@ request.onsuccess = function() {
  
  • 
   
    Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:
    
 
-  
    // Setup the database tables if this has not already been done
+  
    // Setup the database tables if this has not already been done
 request.onupgradeneeded = function(e) {
   // Grab a reference to the opened database
   let db = e.target.result;
@@ -372,7 +372,7 @@ request.onupgradeneeded = function(e) {
 
 
    So with this simple database schema set up, when we start adding records to the database each one will be represented as an object along these lines:
    
 
-
    {
+
    {
   title: "Buy milk",
   body: "Need both cows milk and soya.",
   id: 8
@@ -384,12 +384,12 @@ request.onupgradeneeded = function(e) {
 
 
    Below your previous event handler (but still inside the window.onload handler), add the following line, which sets up an onsubmit handler that runs a function called addData() when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):
    
 
-
    // Create an onsubmit handler so that when the form is submitted the addData() function is run
+
    // Create an onsubmit handler so that when the form is submitted the addData() function is run
 form.onsubmit = addData;
    
 
 
    Now let's define the addData() function. Add this below your previous line:
    
 
-
    // Define the addData() function
+
    // Define the addData() function
 function addData(e) {
   // prevent default - we don't want the form to submit in the conventional way
   e.preventDefault();
@@ -439,7 +439,7 @@ function addData(e) {
 
 
    We've referenced displayData() twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:
    
 
-
    // Define the displayData() function
+
    // Define the displayData() function
 function displayData() {
   // Here we empty the contents of the list element each time the display is updated
   // If you ddn't do this, you'd get duplicates listed each time a new note is added
@@ -516,7 +516,7 @@ function displayData() {
 
 
    As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the deleteItem() function, which looks like so:
    
 
-
    // Define the deleteItem() function
+
    // Define the deleteItem() function
 function deleteItem(e) {
   // retrieve the name of the task we want to delete. We need
   // to convert it to a number before trying it use it with IDB; IDB key
@@ -566,7 +566,7 @@ function deleteItem(e) {
  
  • 
   
    For this simple example, we've stored the names of the videos to fetch in an array of objects:
    
 
-  
    const videos = [
+  
    const videos = [
   { 'name' : 'crystal' },
   { 'name' : 'elf' },
   { 'name' : 'frog' },
@@ -580,7 +580,7 @@ function deleteItem(e) {
 
   
    If each video is found in the database (easily checked by seeing whether request.result evaluates to true — if the record is not present, it will be undefined), its video files (stored as blobs) and the video name are passed straight to the displayVideo() function to place them in the UI. If not, the video name is passed to the fetchVideoFromNetwork() function to ... you guessed it — fetch the video from the network.
    
 
-  
    function init() {
+  
    function init() {
   // Loop through the video names one by one
   for(let i = 0; i < videos.length; i++) {
     // Open transaction, get object store, and get() each video by name
@@ -607,7 +607,7 @@ function deleteItem(e) {
 
   
    When all those promises have fulfilled, the all() promise fulfills with an array containing all the individual fulfillment values. Inside the all() block, you can see that we then call the displayVideo() function like we did before to display the videos in the UI, then we also call the storeVideo() function to store those videos inside the database.
    
 
-  
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
+  
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
   response.blob()
 );
 let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
@@ -625,7 +625,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
  
  • 
   
    Let's look at storeVideo() first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a readwrite transaction and get an object store reference our videos, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.
    
 
-  
    function storeVideo(mp4Blob, webmBlob, name) {
+  
    function storeVideo(mp4Blob, webmBlob, name) {
   // Open transaction, get object store; make it a readwrite so we can write to the IDB
   let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
   // Create a record to add to the IDB
@@ -645,7 +645,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
  
  • 
   
    Last but not least, we have displayVideo(), which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <video> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the vaues of our {{htmlelement("source")}} element's src attributes, and it works fine.
    
 
-  
    function displayVideo(mp4Blob, webmBlob, title) {
+  
    function displayVideo(mp4Blob, webmBlob, title) {
   // Create object URLs out of the blobs
   let mp4URL = URL.createObjectURL(mp4Blob);
   let webmURL = URL.createObjectURL(webmBlob);
@@ -694,7 +694,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
    Первое, что нужно заметить, это дополнительный кусок кода, расположенный в основном JavaScript файле (см. index.js). Первое,что мы делаем, это проверка на то, что serviceWorker доступен в объекте {{domxref("Navigator")}}. Если этот так, тогда мы знаем, что как минимум, базовые функции сервис-воркера доступны. Внутри проверки мы используем метод {{domxref("ServiceWorkerContainer.register()")}} для регистрации сервис-воркера, находящегося в файле sw.js на текущем источнике, таким образом, он может управлять страницами в текущей или внутренних директориях. Когда промис выполнится, сервис-воркер считается зарегистрированным.
    
 
-
      // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне
+
      // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне
 
   if('serviceWorker' in navigator) {
     navigator.serviceWorker
@@ -716,7 +716,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
    Здесь мы видим Cache API в действии. Мы используем метод {{domxref("CacheStorage.open()")}} для открытия нового объекта кеша, в котором ответы могут быть сохранены (похоже на объект хранилища IndexedDB). Промис выполнится с объектом {{domxref("Cache")}}, представляющим собой кеш video-store . Затем мы используем метод {{domxref("Cache.addAll()")}} для получения ресурсов и добавления ответов в кеш.
    
 
-
    self.addEventListener('install', function(e) {
+
    self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('video-store').then(function(cache) {
      return cache.addAll([
@@ -743,7 +743,7 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
 
 
    Если совпадение нашлось, то просто возвращаем его как особый ответ. В противном случае, используем fetch() для запроса ресурса из сети.
    
 
-
    self.addEventListener('fetch', function(e) {
+
    self.addEventListener('fetch', function(e) {
   console.log(e.request.url);
   e.respondWith(
     caches.match(e.request).then(function(response) {
diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html
index 32cf39bfb3..da08302bc6 100644
--- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html
+++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.html
@@ -116,7 +116,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 
 
    Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример maps-example.html (see it live also), вы увидите следующий код:
    
 
-
    navigator.geolocation.getCurrentPosition(function(position) {
+
    navigator.geolocation.getCurrentPosition(function(position) {
   var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
   var myOptions = {
     zoom: 8,
@@ -133,11 +133,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 
 
    Во-первых, мы хотим использовать метод {{domxref("Geolocation.getCurrentPosition()")}}, чтобы получить текущее положение нашего устройства. Доступ к объекту браузера {{domxref("Geolocation")}} производится с помощью свойства {{domxref("Navigator.geolocation")}}, так что мы начнём с
    
 
-
    navigator.geolocation.getCurrentPosition(function(position) { ... });
    
+
    navigator.geolocation.getCurrentPosition(function(position) { ... });
    
 
 
    Это эквивалентно следующему коду
    
 
-
    var myGeo = navigator.geolocation;
+
    var myGeo = navigator.geolocation;
 myGeo.getCurrentPosition(function(position) { ... });
    
 
 
    Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.
    
@@ -150,22 +150,22 @@ myGeo.getCurrentPosition(function(position) { ... });
    
 
 
    Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (asynchronous operations). Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:
    
 
-
    var position = navigator.geolocation.getCurrentPosition();
+
    var position = navigator.geolocation.getCurrentPosition();
 var myLatitude = position.coords.latitude;
    
 
 
    Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием {{glossary("callback function")}}, или более современной системы промисов, которая появилась в ECMAScript 6 и широко используются в новых API.
    
 
 
    Мы совмещаем API Геолокации со сторонним API - Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое  getCurrentPosition() , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:
    
 
-
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
    
+
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
    
 
 
    Чтобы использовать этот API, во-первых создадим объект LatLng с помощью конструктора google.maps.LatLng() , принимающим данные геолокации {{domxref("Coordinates.latitude")}} и {{domxref("Coordinates.longitude")}} :
    
 
-
    var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    
+
    var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    
 
 
    Этот объект сам является значением свойства center объекта настроек (options), который мы назвали myOptions. Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор google.maps.Map() и передавая ему два параметра — ссылку на элемент {{htmlelement("div")}}, на котором мы хотим отрисовывать карту (с ID map_canvas), и объект настроек (options), который мы определили выше.
    
 
-
    var myOptions = {
+
    var myOptions = {
   zoom: 8,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.TERRAIN,
@@ -193,19 +193,19 @@ var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
 
 
    Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект {{domxref("Document")}}, или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:
    
 
-
    var em = document.createElement('em'); // создаёт новый элемент em
+
    var em = document.createElement('em'); // создаёт новый элемент em
 var para = document.querySelector('p'); // ссылка на существующий элемент p
 em.textContent = 'Hello there!'; // присвоение текстового содержимого
 para.appendChild(em); // встроить em внутрь para
    
 
 
    Точки входа других API немного сложнее, часто подразумевается создание особого контекста, в котором будет написан код API. Например, объект контекста Canvas API создаётся получением ссылки на элемент {{htmlelement("canvas")}}, на котором вы хотите рисовать, а затем необходимо вызвать метод {{domxref("HTMLCanvasElement.getContext()")}}:
    
 
-
    var canvas = document.querySelector('canvas');
+
    var canvas = document.querySelector('canvas');
 var ctx = canvas.getContext('2d');
    
 
 
    Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром {{domxref("CanvasRenderingContext2D")}}), например:
    
 
-
    Ball.prototype.draw = function() {
+
    Ball.prototype.draw = function() {
   ctx.beginPath();
   ctx.fillStyle = this.color;
   ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
@@ -224,7 +224,7 @@ var ctx = canvas.getContext('2d');
    
 
 
    Следующий код содержит простой пример использования событий:
    
 
-
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
 var request = new XMLHttpRequest();
 request.open('GET', requestURL);
 request.responseType = 'json';
diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html
index 9c45929f87..61d208d98f 100644
--- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html
+++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html
@@ -51,7 +51,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 
    Мы создали простую страницу примера в dom-example.html (см. также live). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -95,13 +95,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
  
  • Возьмите локальную копию страницы dom-example.html page и изображение, которое вместе с ним.
    • 
  
  • Добавьте элемент <script></script> чуть выше закрывающего тега </body>.
    • 
  
  • Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку:
-  
    var link = document.querySelector('a');
    
+  
    var link = document.querySelector('a');
    
  
    • 
  
  • Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей:
-  
    link.textContent = 'Mozilla Developer Network';
    
+  
    link.textContent = 'Mozilla Developer Network';
    
  
    • 
  
  • Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу:
-  
    link.href = 'https://developer.mozilla.org';
    
+  
    link.href = 'https://developer.mozilla.org';
    
  
    • 
 
 
@@ -124,20 +124,20 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
 
 
      
  
    1. Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками):
-  
      var sect = document.querySelector('section');
      
+  
      var sect = document.querySelector('section');
      
  
      2. 
  
    2. Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше:
-  
      var para = document.createElement('p');
+  
      var para = document.createElement('p');
 para.textContent = 'We hope you enjoyed the ride.';
      
  
      3. 
  
    3. Теперь вы можете добавить новый абзац в конце раздела, используя {{domxref("Node.appendChild()")}}:
-  
      sect.appendChild(para);
      
+  
      sect.appendChild(para);
      
  
      4. 
  
    4. Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}:
-  
      var text = document.createTextNode(' — the premier source for web development knowledge.');
      
+  
      var text = document.createTextNode(' — the premier source for web development knowledge.');
      
  
      5. 
  
    5. Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел:
-  
      var linkPara = document.querySelector('p');
+  
      var linkPara = document.querySelector('p');
 linkPara.appendChild(text);
      
  
      6. 
 
    
@@ -150,17 +150,17 @@ linkPara.appendChild(text);
    
 
 
    Если бы мы хотели переместить абзац со ссылкой внутри него в нижней части раздела, мы могли бы просто сделать это:
    
 
-
    sect.appendChild(linkPara);
    
+
    sect.appendChild(linkPara);
    
 
 
    Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - linkPara - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.
    
 
 
    Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:
    
 
-
    sect.removeChild(linkPara);
    
+
    sect.removeChild(linkPara);
    
 
 
    Он становится немного сложнее, если вы хотите удалить узел, основанный только на ссылке на себя, что довольно распространено. Нет способа сообщить узлу удалить себя, поэтому вам нужно будет сделать следующее.
    
 
-
    linkPara.parentNode.removeChild(linkPara);
    
+
    linkPara.parentNode.removeChild(linkPara);
    
 
 
    Попробуйте добавить вышеуказанные строки в свой код.
    
 
@@ -174,14 +174,14 @@ linkPara.appendChild(text);
    
 
 
      
  
    1. В качестве примера попробуйте добавить эти строки в наш текущий пример:
-  
      para.style.color = 'white';
+  
      para.style.color = 'white';
 para.style.backgroundColor = 'black';
 para.style.padding = '10px';
 para.style.width = '250px';
 para.style.textAlign = 'center';
      
  
      2. 
  
    2. Перезагрузите страницу, и вы увидите, что стили были применены к абзацу. Если вы посмотрите на этот параграф в инспекторе Page Inspector/DOM inspector вашего браузера, вы увидите, что эти строки действительно добавляют встроенные стили в документ:
-  
      <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
      
+  
      <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
      
  
      3. 
 
    
 
@@ -194,7 +194,7 @@ para.style.textAlign = 'center';
    
 
      
  
    1. Удалите предыдущие пять строк, добавленных в JavaScript.
      2. 
  
    2. Добавьте в свой HTML-код следующее: {{htmlelement("head")}}:
-  
      <style>
+  
      <style>
 .highlight {
   color: white;
   background-color: black;
@@ -205,7 +205,7 @@ para.style.textAlign = 'center';
      
 </style>
      
  
      3. 
  
    3. Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце:
-  
      para.setAttribute('class', 'highlight');
      
+  
      para.setAttribute('class', 'highlight');
      
  
      4. 
  
    4. Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.
      5. 
 
    
@@ -230,17 +230,17 @@ para.style.textAlign = 'center';
    
 
 
      
  
    1. Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}:
-  
      var div = document.querySelector('div');
+  
      var div = document.querySelector('div');
 var WIDTH = window.innerWidth;
 var HEIGHT = window.innerHeight;
      
  
      2. 
  
    2. Затем мы динамически изменяем ширину и высоту div, равную ширине окна просмотра. Добавьте следующие две строки ниже своих первых:
-  
      div.style.width = WIDTH + 'px';
+  
      div.style.width = WIDTH + 'px';
 div.style.height = HEIGHT + 'px';
      
  
      3. 
  
    3. Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.
      4. 
  
    4. Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода:
-  
      window.onresize = function() {
+  
      window.onresize = function() {
   WIDTH = window.innerWidth;
   HEIGHT = window.innerHeight;
   div.style.width = WIDTH + 'px';
diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.html
index 6da71e0814..e6a210e0d5 100644
--- a/files/ru/learn/javascript/first_steps/a_first_splash/index.html
+++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.html
@@ -49,7 +49,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
 
 
-
      for (var i = 1 ; i < 21 ; i++) { console.log(i) }
      
+
      for (var i = 1 ; i < 21 ; i++) { console.log(i) }
      
 
 
      Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):
      
  Начальное значение: в этом случае мы начинаем подсчёт c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.
      
 
 
      Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:
      
 
-
      var resetParas = document.querySelectorAll('.resultParas p');
+
      var resetParas = document.querySelectorAll('.resultParas p');
 for (var i = 0 ; i < resetParas.length ; i++) {
   resetParas[i].textContent = '';
 }
      
@@ -625,7 +625,7 @@ for (var i = 0 ; i < resetParas.length ; i++) {
 
 
      Давайте добавим ещё одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже var resetButton; в верхней части вашего JavaScript, затем сохраните файл:
      
 
-
      guessField.focus();
      
+
      guessField.focus();
      
 
 
      Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.
      
 
@@ -633,13 +633,13 @@ for (var i = 0 ; i < resetParas.length ; i++) {
 
 
      В нашем примере мы сначала создали переменную guessField, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:
      
 
-
      var guessField = document.querySelector('.guessField');
      
+
      var guessField = document.querySelector('.guessField');
      
 
 
      Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. querySelector() "берет" одну часть информации -  CSS selector, который выбирает нужный элемент.
      
 
 
      Поскольку guessField теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:
      
 
-
      guessField.focus();
      
+
      guessField.focus();
      
 
 
      Для переменных, которые не содержат ссылок на элементы формы, не будет доступен focus(). Например, переменная guesses содержит ссылку на элемент {{htmlelement ("p")}}, а guessCount содержит число.
      
 
@@ -652,17 +652,17 @@ for (var i = 0 ; i < resetParas.length ; i++) {
  
    5. Далее, откройте инструменты разработчика в вашем браузере, и убедитесь, что вы перешли во вкладку с консолью JavaScript.
      6. 
  
    6. Введите guessField и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!
      7. 
  
    7. Теперь введите следующее:
-  
      guessField.value = 'Hello';
      
+  
      guessField.value = 'Hello';
      
   Свойство value представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!
      8. 
  
    8. Попробуйте ввести guesses и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.
      9. 
  
    9. Теперь попробуйте ввести:
-  
      guesses.value
      
+  
      guesses.value
      
   Браузер вернёт вам undefined, потому что value не существует в параграфах.
      10. 
  
    10. Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте:
-  
      guesses.textContent = 'Where is my paragraph?';
      
+  
      guesses.textContent = 'Where is my paragraph?';
      
  
      11. 
  
    11. Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой:
-  
      guesses.style.backgroundColor = 'yellow';
+  
      guesses.style.backgroundColor = 'yellow';
 guesses.style.fontSize = '200%';
 guesses.style.padding = '10px';
 guesses.style.boxShadow = '3px 3px 6px black';
      
diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html
index 042b6e844d..2cfbea95b2 100644
--- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html
+++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.html
@@ -125,7 +125,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Создатель_глу
 
        
  
      • Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.
        • 
  
      • Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента {{htmlelement ("html")}} красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно:
-  
        document.querySelector('html').style.backgroundColor = 'red';
        
+  
        document.querySelector('html').style.backgroundColor = 'red';
        
  
        • 
  
      • Math.round() - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.
        • 
 
      
diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.html
index 9acead263a..b63ccbcc82 100644
--- a/files/ru/learn/javascript/first_steps/strings/index.html
+++ b/files/ru/learn/javascript/first_steps/strings/index.html
@@ -37,17 +37,17 @@ original_slug: Learn/JavaScript/Первые_шаги/Строки
 
 
        
  
      1. Для начала введите следующие строки:
-  
        var string = 'The revolution will not be televised.';
+  
        var string = 'The revolution will not be televised.';
 string;
        
  
        2. 
  
      2. Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. 
        3. 
  
      3. Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки:
-  
        var badString = This is a test;
+  
        var badString = This is a test;
 var badString = 'This is a test;
 var badString = This is a test';
        
   Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
        4. 
  
      4. Следующий код будет выполнен только в том случае, если ранее была объявлена переменная string — убедитесь сами:
-  
        var badString = string;
+  
        var badString = string;
 badString;
        
   В настоящее время строка badString имеет то же значение, что и строка string.
        5. 
 
      
@@ -56,22 +56,22 @@ badString;
      
 
 
        
  
      1. В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально:
-  
        var sgl = 'Single quotes.';
+  
        var sgl = 'Single quotes.';
 var dbl = "Double quotes";
 sgl;
 dbl;
        
  
        2. 
  
      2. Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример:
-  
        var badQuotes = 'What on earth?";
        
+  
        var badQuotes = 'What on earth?";
        
  
        3. 
  
      3. Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет):
-  
        var sglDbl = 'Would you eat a "fish supper"?';
+  
        var sglDbl = 'Would you eat a "fish supper"?';
 var dblSgl = "I'm feeling blue.";
 sglDbl;
 dblSgl;
        
  
        4. 
  
      4. Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается:
-  
        var bigmouth = 'I've got no right to take my place...';
        
+  
        var bigmouth = 'I've got no right to take my place...';
        
   Что приводит нас к следующей теме.
        5. 
 
      
 
@@ -79,7 +79,7 @@ dblSgl;
      12. 
 
 
      Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:
      
 
-
      var bigmouth = 'I\'ve got no right to take my place...';
+
      var bigmouth = 'I\'ve got no right to take my place...';
 bigmouth;
      
 
 
      Так лучше. Таким же образом можно экранировать и другие символы, например "\. Кроме того существуют специальные коды. Для дополнительной информации см. Escape notation.
      
@@ -89,17 +89,17 @@ bigmouth;
      
 
        
  
      1. Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.
        2. 
  
      2. 
-  
        var one = 'Hello, ';
+  
        var one = 'Hello, ';
 var two = 'how are you?';
 var joined = one + two;
 joined;
        
   Результат этой программы - это переменная joined, содержащая значение "Hello, how are you?".
        3. 
  
      3. В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите + между ними. Попробуйте это:
-  
        var multiple = one + one + one + one + two;
+  
        var multiple = one + one + one + one + two;
 multiple;
        
  
        4. 
  
      4. Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это:
-  
        var response = one + 'I am fine — ' + two;
+  
        var response = one + 'I am fine — ' + two;
 response;
        
  
        5. 
 
      
@@ -112,9 +112,9 @@ response;
      
 
 
      Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:
      
 
-
      <button>Press me</button>
      
+
      <button>Press me</button>
      
 
-
      var button = document.querySelector('button');
+
      var button = document.querySelector('button');
 
 button.onclick = function() {
   var name = prompt('What is your name?');
@@ -129,22 +129,22 @@ button.onclick = function() {
 
 
        
  
      1. Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли:
-  
        'Front ' + 242;
+  
        'Front ' + 242;
 
        
   Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
        2. 
  
      2. Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор typeof для того, чтобы установить является ли переменная числом или строкой):
-  
        var myDate = '19' + '67';
+  
        var myDate = '19' + '67';
 typeof myDate;
        
  
        3. 
  
      3. Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции:
   
          
    
        • Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее:
-    
          var myString = '123';
+    
          var myString = '123';
 var myNum = Number(myString);
 typeof myNum;
          
    
          • 
    
        • С другой стороны, каждое число имеет метод, называемый toString(), который преобразует его в эквивалентную строку. Попробуй это:
-    
          var myNum = 123;
+    
          var myNum = 123;
 var myString = myNum.toString();
 typeof myString;
          
    
          • 
diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html
index 722895282b..90450169e7 100644
--- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html
+++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.html
@@ -39,7 +39,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods
 
 
          Почти всё в JavaScript является объектами. Когда вы создаёте строку, например: 
          
 
-
          let string = 'This is my string';
          
+
          let string = 'This is my string';
          
 
 
          ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!
          
 
@@ -51,7 +51,7 @@ original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods
 
 
          Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:
          
 
-
          let browserType = 'mozilla';
+
          let browserType = 'mozilla';
 browserType.length;
          
 
 
          Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.
          
@@ -60,11 +60,11 @@ browserType.length;
          
 
 
          Вы можете вернуть любой символ внутри строки, используя обозначение в квадратных скобках. Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:
          
 
-
          browserType[0];
          
+
          browserType[0];
          
 
 
          Компьютеры считают от 0, а не 1! Чтобы получить последний символ любой строки, мы могли бы использовать следующую строку, объединив эту технику с свойством length:
          
 
-
           browserType[browserType.length-1];
          
+
           browserType[browserType.length-1];
          
 
 
          Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна length-1. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.
          
 
@@ -72,17 +72,17 @@ browserType.length;
      
 
 
        
  
      1. Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите:
-  
        browserType.indexOf('zilla');
        
+  
        browserType.indexOf('zilla');
        
   Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
        2. 
 
      
 
 
        
  
      1. Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее:
-  
        browserType.indexOf('vanilla');
        
+  
        browserType.indexOf('vanilla');
        
   Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
        
   
        
   Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):
-  
        if(browserType.indexOf('mozilla') === -1) {
+  
        if(browserType.indexOf('mozilla') === -1) {
   // сделать что-то, если 'mozilla'
   // не является частью этой строки
 }
@@ -93,10 +93,10 @@ if(browserType.indexOf('mozilla') !== -1) {
 }
        
  
        2. 
  
      2. Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}}  для извлечения. Попробуйте следующее:
-  
        browserType.slice(0,3);
        
+  
        browserType.slice(0,3);
        
   Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку. Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её (помним, что счёт идёт с 0, а не с 1). Также можно сказать, что второй параметр равен длине возвращаемой строки.
        3. 
  
      3. Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите:
-  
        browserType.slice(2);
        
+  
        browserType.slice(2);
        
   Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.
        4. 
 
      
 
@@ -110,7 +110,7 @@ if(browserType.indexOf('mozilla') !== -1) {
 
 
      Попробуем ввести следующие строки, чтобы узнать, что происходит:
      
 
-
      var radData = 'My NaMe Is MuD';
+
      var radData = 'My NaMe Is MuD';
 radData.toLowerCase();
 radData.toUpperCase();
      
 
@@ -120,7 +120,7 @@ radData.toUpperCase();
      
 
 
      Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:
      
 
-
      browserType.replace('moz','van');
      
+
      browserType.replace('moz','van');
      
 
 
      Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: browserType = browserType.replace('moz','van');
      
 
@@ -143,7 +143,7 @@ radData.toUpperCase();
      
 
    
 
-
    __MSG_ + messageName + __
    
+
    __MSG_ + messageName + __
    
 
 
    Локализация по умолчанию
    
 
 
    Ещё одно поле. которое нужно указать в manifest.json — это default_locale:
    
 
-
    "default_locale": "en"
    
+
    "default_locale": "en"
    
 
 
    Этот параметр устанавливает локализацию по умолчанию, используемую, если расширение не поддерживает локализацию браузера пользователя. Любые сообщения, недоступные в текущей локализации, будут браться из той локализации, которая установлена по умолчанию. There are some more details to be aware of in terms of how the browser selects strings — see {{anch("Выбор локализованной строки")}}.
    
 
@@ -150,7 +150,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац
 
 
    Локализованные строки также можно получить из CSS-файлов расширения. Например, вы можете создать поля CSS, зависящие от локализации, так:
    
 
-
    header {
+
    header {
   background-image: url(../images/__MSG_extensionName__/header.png);
 }
    
 
@@ -168,12 +168,12 @@ original_slug: Mozilla/Add-ons/WebExtensions/Интернационализац
 
 
    В нашем примере notify-link-clicks-i18n , фоновый скрипт содержит следующие строки:
    
 
-
    var title = browser.i18n.getMessage("notificationTitle");
+
    var title = browser.i18n.getMessage("notificationTitle");
 var content = browser.i18n.getMessage("notificationContent", message.url);
    
 
 
    Первая из них получает поле notificationTitle message из доступного файла messages.json, соответствующее наиболее подходящей локализации . Вторая строка похожа на первую, но в ней метод принимает URL в качестве второго параметра. Зачем? С помощью этого параметра мы указываем, на что нужно заменить заполнитель $URL$ в поле notificationContent message:
    
 
-
    "notificationContent": {
+
    "notificationContent": {
   "message": "You clicked $URL$.",
   "description": "Tells the user which link they clicked.",
   "placeholders": {
@@ -189,17 +189,17 @@ var content = browser.i18n.getMessage("notificationContent", message.url);
    
 
 
    Давайте посмотрим на пример: изначально сообщение notificationContent в файле en/messages.json такое:
    
 
-
    You clicked $URL$.
    
+
    You clicked $URL$.
    
 
 
    Пусть эта ссылка указывает на https://developer.mozilla.org. После вызова {{WebExtAPIRef("i18n.getMessage()")}}, содержание второго параметра становится доступно в messages.json в качестве значения $1, замещающего $URL$, так как это указано в заполнителе  "url". Таким образом, итоговое значение строки:
    
 
-
    You clicked https://developer.mozilla.org.
    
+
    You clicked https://developer.mozilla.org.
    
 
 
    Прямое использование заполнителей
    
 
 
    Переменные ($1, $2, $3, и т. д.) можно вставлять напрямую в сообщения. Например, можно переписать объект "notificationContent" следующим образом:
    
 
-
    "notificationContent": {
+
    "notificationContent": {
   "message": "You clicked $1.",
   "description": "Tells the user which link they clicked."
 }
    
@@ -210,7 +210,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);
    
 
 
    Значения заполнителей можно задавать вручную, если вы хотите, чтобы каждый раз это значение было одним и тем же, а не определялось переменной в коде. Например:
    
 
-
    "mdn_banner": {
+
    "mdn_banner": {
   "message": "For more information on web technologies, go to $MDN$.",
   "description": "Tell the user about MDN",
   "placeholders": {
@@ -286,11 +286,11 @@ var content = browser.i18n.getMessage("notificationContent", message.url);
    
 
 
    Модуль i18n module предоставляет заранее определённые сообщения, которые можно вызвать таким же образом, как мы это делали в разделе {{anch("Интернационализация manifest.json")}}. Например:
    
 
-
    __MSG_extensionName__
    
+
    __MSG_extensionName__
    
 
 
    Заранее определённые сообщения используют такой же синтаксис, за исключением @@ перед именем сообщения, например:
    
 
-
    __MSG_@@ui_locale__
    
+
    __MSG_@@ui_locale__
    
 
 
    Следующая таблица содержит различные заранее определённые сообщения:
    
 
@@ -337,7 +337,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);
    
 
 
    Возвращаясь к нашему примеру, лучше было бы написать:
    
 
-
    header {
+
    header {
   background-image: url(../images/__MSG_@@ui_locale__/header.png);
 }
    
 
@@ -345,7 +345,7 @@ var content = browser.i18n.getMessage("notificationContent", message.url);
    
 
 
    Давайте рассмотрим пример использования сообщений @@bidi_* в файле CSS:
    
 
-
    body {
+
    body {
   direction: __MSG_@@bidi_dir__;
 }
 
@@ -360,14 +360,14 @@ div#header {
 
 
    Для языков, в которых текст читается слева направо, таких как английский, правила CSS, использующие заранее определённые сообщения, сверху задают такие значения:
    
 
-
    direction: ltr;
+
    direction: ltr;
 padding-left: 0;
 padding-right: 1.5em;
 
    
 
 
    Для языков, читающихся справа налево, значения будут следующими:
    
 
-
    direction: rtl;
+
    direction: rtl;
 padding-right: 0;
 padding-left: 1.5em;
    
 
diff --git a/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html
index 3a726aeaaa..169be48be8 100644
--- a/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html
+++ b/files/ru/mozilla/add-ons/webextensions/modify_a_web_page/index.html
@@ -31,7 +31,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/модификация_веб_ст
 
 
    Прежде всего создадим новую директорию, назовём её "modify-page". В этой директории, создадим файл "manifest.json", со следующим содержимым:
    
 
-
    {
+
    {
 
   "manifest_version": 2,
   "name": "modify-page",
@@ -58,7 +58,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/модификация_веб_ст
 
 
    Далее, создадим файл "page-eater.js", внутри директории "modify-page":
    
 
-
    document.body.textContent = "";
+
    document.body.textContent = "";
 
 var header = document.createElement('h1');
 header.textContent = "Эта страница была съедена";
@@ -78,7 +78,7 @@ document.body.appendChild(header);
    
 
 
    Для начала обновим "manifest.json":
    
 
-
    {
+
    {
 
   "manifest_version": 2,
   "name": "modify-page",
@@ -104,7 +104,7 @@ document.body.appendChild(header);
    
 
 
    Давайте создадим этот файл. Создадим новый файл "background.js" в директории "modify-page" и поместим в него следующий код:
    
 
-
    browser.contextMenus.create({
+
    browser.contextMenus.create({
   id: "eat-page",
   title: "Съесть эту страницу"
 });
@@ -122,7 +122,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) {
 
 
    На данном этапе расширение должно иметь следующий вид:
    
 
-
    modify-page/
+
    modify-page/
     background.js
     manifest.json
     page-eater.js
    
@@ -163,7 +163,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) {
 
 
    Изменим "background.js" :
    
 
-
    browser.contextMenus.create({
+
    browser.contextMenus.create({
   id: "eat-page",
   title: "Съесть эту страницу"
 });
@@ -193,7 +193,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) {
 
 
    Далее, обновим "page-eater.js":
    
 
-
    function eatPage(request, sender, sendResponse) {
+
    function eatPage(request, sender, sendResponse) {
   document.body.textContent = "";
 
   var header = document.createElement('h1');
diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html
index a40b8982ae..f0d7363d14 100644
--- a/files/ru/tools/web_console/index.html
+++ b/files/ru/tools/web_console/index.html
@@ -196,7 +196,7 @@ translation_of: Tools/Web_Console
 
 
    Тем не менее, если какой-то JavaScript-код читает что стиль был изменён, то браузер должен выполнить синхронное переформатирование в порядке вычисленным расчётом стиля чтобы вернуться. Например, код как этот хочет  вызвать немедленное, синхронное, переформатирование, когда вызовет window.getComputedStyle(thing).height:
    
 
-
    var thing = document.getElementById("the-thing");
+
    var thing = document.getElementById("the-thing");
 thing.style.display = "inline-block";
 var thingHeight = window.getComputedStyle(thing).height;
    
 
@@ -301,12 +301,12 @@ var thingHeight = window.getComputedStyle(thing).height;
    
    
     
    The argument to error().
    
 
-    
    +    
     console.error("an error");
    
     
     
    The console will display a full stack trace for errors:
    
 
-    
    +    
     function error() {
   console.error("an error");
 }
@@ -329,12 +329,12 @@ call_error();
    
    
     
    If the assertion succeeds, nothing. If the assertion fails, the argument:
    
 
-    
    +    
     console.assert(false, "My assertion always fails");
    
     
     
    The console will display a full stack trace for assertions:
    
 
-    
    +    
     function assertion() {
   console.assert(false, "assertion failed");
 }
@@ -366,7 +366,7 @@ call_assertion();
    
    
     
    The argument to warn().
    
 
-    
    +    
     console.warn("a warning");
    
     
   
@@ -388,7 +388,7 @@ console.warn("a warning");
    
    
     
    The argument to info().
    
 
-    
    +    
     console.info("some info");
    
     
   
@@ -410,7 +410,7 @@ console.info("some info");
    
    
     
    The label supplied, if any, and the number of times this occurrence of count() has been called with the given label:
    
 
-    
    +    
     console.count(user.value);
    
 
     
    
@@ -421,7 +421,7 @@ console.count(user.value);
    
    
     
    Listing of the object's properties:
    
 
-    
    +    
     var user = document.getElementById('user');
 console.dir(user);
    
     
@@ -435,7 +435,7 @@ console.dir(user);
    
    
     
    The argument to log().
    
 
-    
    +    
     console.log("logged");
    
     
 
@@ -456,7 +456,7 @@ console.log("logged");
    
    
     
    Notification that the specified timer started.
    
 
-    
    +    
     console.time("t");
    
     
   
@@ -465,7 +465,7 @@ console.time("t");
    
    
     
    Duration for the specified timer.
    
 
-    
    +    
     console.timeEnd("t");
    
     
   
@@ -474,7 +474,7 @@ console.timeEnd("t");
    
    
     
    Stack trace:
    
 
-    
    +    
     console.trace();
    
     
   
@@ -489,7 +489,7 @@ console.trace();
    
 
 
    Начиная с Firefox 31, вы можете использовать спецификатор формата "%c" для стилизации консольных сообщений:
    
 
-
    console.log("%cMy stylish message", "color: red; font-style: italic");
    
+
    console.log("%cMy stylish message", "color: red; font-style: italic");
    
 
 
    
 
@@ -572,26 +572,26 @@ console.trace();
    
 
 
    Вы можете передать DOM-элемент для определённого iframe :
    
 
-
    var frame = document.getElementById("frame1");
+
    var frame = document.getElementById("frame1");
 cd(frame);
    
 
 
    Вы можете передать CSS селектор для определённого iframe:
    
 
-
    cd("#frame1");
    
+
    cd("#frame1");
    
 
 
    Вы можете передать глобальный объект Window для определённого iframe:
    
 
-
    var frame = document.getElementById("frame1");
+
    var frame = document.getElementById("frame1");
 cd(frame.contentWindow);
 
    
 
 
    Для переключения контекста видимости обратно к окну верхнего уровня, введите cd() без аргументов:
    
 
-
    cd();
    
+
    cd();
    
 
 
    Предположим у нас есть документ, который содержит iframe:
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
@@ -603,7 +603,7 @@ cd(frame.contentWindow);
 
 
    В этом iframe определена новая функция:
    
 
-
    <!DOCTYPE html>
+
    <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
@@ -619,7 +619,7 @@ cd(frame.contentWindow);
 
 
    Вы можете переключиться на контекст iframe например так:
    
 
-
    cd("#frame1");
    
+
    cd("#frame1");
    
 
 
    Сейчас вы сможете видеть, что глобальный объект Window это теперь наш iframe:
    
 
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 }