{"id":415039,"date":"2024-06-30T00:07:09","date_gmt":"2024-06-30T00:07:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=415039"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=415039","title":{"rendered":"<span>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0442\u0440\u044e\u043a\u0438 HTML, CSS \u0438 JS<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/731960\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/37\/5c\/dl\/375cdlu-p9edhlc4ziu9i8wblcq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/37\/5c\/dl\/375cdlu-p9edhlc4ziu9i8wblcq.png\"\/><\/div>\n<p><\/a><br \/>  \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0443 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f HTML\/CSS\/JS. \u0415\u0441\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439, \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u0442\u0438 \u0445\u0430\u043a\u0438 \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/i>. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u044e\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b Google \u0438 \u0434\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f (\u0438\u043b\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u044e\u0442 \u0431\u0430\u0433\u0438 \u0438 \u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u044f\u0442 \u0438\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c). \u0414\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Chrome, Firefox \u0438 \u0442.\u00a0\u0434.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u041e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432<\/font><\/h2>\n<p>  \u041c\u0430\u0440\u043a\u0435\u0442\u043e\u043b\u043e\u0433 \u0438 SEO-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440 \u0414\u044d\u043d \u041f\u0435\u0442\u0440\u043e\u0432\u0438\u0447 <a href=\"https:\/\/dejanmarketing.com\/competitor-hack\/\">\u043d\u0430\u0448\u0451\u043b \u0441\u043f\u043e\u0441\u043e\u0431<\/a>, \u043a\u0430\u043a \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043e\u043b\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044f\u0445 \u0441\u0435\u0441\u0441\u0438\u0439 \u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f\u0445 \u043a\u043b\u0430\u0432\u0438\u0448. \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0432\u0435\u0431-\u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0447\u0443\u0436\u043e\u043c \u0441\u0430\u0439\u0442\u0435, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0435\u0451 \u043a \u0441\u0435\u0431\u0435 \u043f\u043e \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u0435. \u0412\u0441\u0451 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u0434\u0434\u0435\u043b\u043a\u0438 \u0447\u0443\u0436\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0438 \u0437\u0430\u043c\u0430\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u044e\u0437\u0435\u0440\u043e\u0432 \u043d\u0430 \u044d\u0442\u043e \u0437\u0435\u0440\u043a\u0430\u043b\u043e. \u0421\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u044d\u0442\u0438\u0447\u043d\u044b\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445.<\/p>\n<p>  \u0410\u043b\u0433\u043e\u0440\u0438\u0442\u043c:<\/p>\n<ol>\n<li>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u0437 \u043f\u043e\u0438\u0441\u043a\u0430 (referrer: google).\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/vu\/pi\/kx\/vupikxuems2f1p20vj5qiz9vqhi.png\" data-src=\"https:\/\/habrastorage.org\/webt\/vu\/pi\/kx\/vupikxuems2f1p20vj5qiz9vqhi.png\"\/><\/p>\n<\/li>\n<li>\u041d\u0430\u0448\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u041d\u0430\u0437\u0430\u0434\u00bb \u0432 Chrome \u0438 \u043f\u043e\u0434\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e <i>\u043d\u0430\u0448\u0443 \u043a\u043e\u043f\u0438\u044e<\/i> \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0432\u044b\u0434\u0430\u0447\u0438 Google.\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/j4\/ml\/kl\/j4mlklifxi-gkr4akh46afb3hi8.gif\" data-src=\"https:\/\/habrastorage.org\/webt\/j4\/ml\/kl\/j4mlklifxi-gkr4akh46afb3hi8.gif\"\/><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/fh\/eb\/vz\/fhebvzchjcun7toh0e1apezi2wk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/fh\/eb\/vz\/fhebvzchjcun7toh0e1apezi2wk.png\"\/><\/p>\n<\/li>\n<li>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u043e \u043b\u044e\u0431\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 \u043d\u0430 \u0441\u0430\u0439\u0442 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u0430 \u0432\u0435\u0434\u0451\u0442 \u043d\u0430 <i>\u043d\u0430\u0448\u0435 \u0437\u0435\u0440\u043a\u0430\u043b\u043e<\/i> \u0441\u0430\u0439\u0442\u0430 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u0430.\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sf\/zj\/7q\/sfzj7qjy5do1ikw2ok01q8zzzjs.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sf\/zj\/7q\/sfzj7qjy5do1ikw2ok01q8zzzjs.png\"\/><\/p>\n<\/li>\n<li>\u041d\u0430 \u0441\u0432\u043e\u0451\u043c \u0437\u0435\u0440\u043a\u0430\u043b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0445\u0435\u0442\u043c\u0430\u043f\u044b, \u0441\u043a\u0440\u043e\u043b\u043b\u043c\u0430\u043f\u044b, \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0448, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0430\u0439\u0442\u044b \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0443\u043f\u043a\u0438). \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442.<\/li>\n<\/ol>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 1<\/i>. \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0437\u0435\u0440\u043a\u0430\u043b\u043e \u0447\u0443\u0436\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430\u00a0\u2014 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0443\u044e \u0440\u0435\u043a\u043b\u0430\u043c\u0443. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043f\u043e\u043b\u043d\u043e \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u0445 \u043a\u043e\u043f\u0438\u0439 (\u0437\u0435\u0440\u043a\u0430\u043b) \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0425\u0430\u0431\u0440\u0430, \u043a\u0443\u0434\u0430 \u0437\u0430\u0445\u043e\u0434\u044f\u0442 \u0442\u044b\u0441\u044f\u0447\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438\u0437 \u043f\u043e\u0438\u0441\u043a\u0430, \u043d\u0435 \u043f\u043e\u0434\u043e\u0437\u0440\u0435\u0432\u0430\u044f \u043e \u043f\u043e\u0434\u0434\u0435\u043b\u043a\u0435.<\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 2<\/i>. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0430 \u0437\u0432\u043e\u043d\u043a\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e \u0444\u0435\u0439\u043a\u043e\u0432\u044b\u0445 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0439 \u043d\u0430 Google Maps \u0441\u043e \u0441\u0432\u043e\u0438\u043c \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043d\u044b\u043c \u043d\u043e\u043c\u0435\u0440\u043e\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043d\u043e\u043c\u0435\u0440\u043e\u0432 \u0424\u0411\u0420 \u0438 \u0421\u0435\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u043b\u0443\u0436\u0431\u044b \u0421\u0428\u0410.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/rg\/xj\/ok\/rgxjokhwmaroqynkocvbcits0te.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/rg\/xj\/ok\/rgxjokhwmaroqynkocvbcits0te.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0437\u0432\u043e\u043d\u044f\u0442 \u043f\u043e \u043d\u0430\u0448\u0438\u043c \u043d\u043e\u043c\u0435\u0440\u0430\u043c \u0438 \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0441\u043b\u0443\u0436\u0431\u0430\u043c.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b HTML<\/font><\/h2>\n<p>  \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 <code>DesignMode ON\/OFF<\/code> <a href=\"https:\/\/jfhr.me\/document.designmode\/\">\u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439<\/a>. \u041d\u0443\u0436\u043d\u0430 \u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0430 JavaScript \u0432 \u043a\u043e\u0434\u0435:<\/p>\n<pre><code class=\"javascript\">document.designMode = \"on\";<\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0434\u0440\u0435\u0432\u043d\u0438\u0435 API \u043f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c 25 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434, \u043d\u043e \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0413\u0440\u0430\u043c\u043e\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 &lt;picture><\/font><\/h2>\n<p>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0441\u0436\u0430\u0442\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 AVIF \u0438 WebP (\u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, 10\u00a0\u0434\u0435\u043a\u0430\u0431\u0440\u044f 2022 \u0433\u043e\u0434\u0430 Google <a href=\"https:\/\/chromium-review.googlesource.com\/c\/chromium\/src\/+\/4081749\">\u0443\u0434\u0430\u043b\u0438\u043b\u0430<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 JPEG XL \u0438\u0437 Chromium, \u0442\u0430\u043a \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0430\u043a\u0442\u0443\u0430\u043b\u0435\u043d). \u041c\u043e\u0436\u043d\u043e \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0442\u0440\u0430\u0444\u0438\u043a \u0441\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u0435\u0441\u043b\u0438 <a href=\"https:\/\/jfhr.me\/optimizing-images-with-the-html-picture-tag\/\">\u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e<\/a> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 <code>&lt;picture><\/code>.<\/p>\n<p>  \u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c AVIF \u0438 WebP \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442.<\/p>\n<ol>\n<li>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u0440\u043e\u0441\u0441\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u043e\u0439 \u0443\u0442\u0438\u043b\u0438\u0442\u044b <a href=\"https:\/\/imagemagick.org\/index.php\">imagemagick<\/a> \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 <a href=\"https:\/\/avif.io\/\">avif.io<\/a>.\n<pre><code class=\"bash\">$ magick convert image.jpg image.avif<\/code><\/pre>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0443\u044e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u0430\u0440\u044b \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 (jpg\/avif, jpg\/webp).<\/p>\n<\/li>\n<li>\u0412\u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e <code>&lt;img><\/code>, \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0433 <code>&lt;picture><\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 URL \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041f\u0435\u0440\u0432\u044b\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c AVIF \u043a\u0430\u043a \u0441\u0430\u043c\u044b\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442 \u0435\u0433\u043e, \u0430 <a href=\"https:\/\/caniuse.com\/?search=avif\">Edge \u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 AVIF<\/a>, \u043f\u043e\u0439\u0434\u0443\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e \u0441\u043f\u0438\u0441\u043a\u0443: WebP \u0438 JPEG.\n<pre><code class=\"xml\">&lt;picture> &lt;source srcset=\"\/document.avif\" type=\"image\/avif\"> &lt;source srcset=\"\/document.webp\" type=\"image\/webp\"> &lt;img src=\"\/document.jpeg\" alt=\"\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\" width=\"375\" height=\"153\" class=\"border\"> &lt;\/picture><\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u0442\u0435\u0433\u0435 <code>&lt;source><\/code>, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0432 \u0442\u0435\u0433\u0435 <code>&lt;img><\/code>.<\/p>\n<\/li>\n<li>\u0418\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u00a0\u2014 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP\/2_Server_Push\">HTTP\/2 Server Push<\/a> \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0438\u0441\u044c \u0441\u0440\u0430\u0437\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 HTML. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 <code>&lt;picture><\/code> \u043d\u0435 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0443 \u0432\u0441\u0451 \u043f\u043e\u0434\u0440\u044f\u0434. \u041b\u0443\u0447\u0448\u0435 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u044e\u0437\u0435\u0440-\u0430\u0433\u0435\u043d\u0442 \u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0443\u0448\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430. \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u043f\u043e\u043b\u0435 <code>Accept<\/code> \u0432 user-agent. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 Firefox \u0432\u044b\u0441\u044b\u043b\u0430\u0435\u0442 <code>Accept<\/code> \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0438\u0434\u0430:\n<p>  <code>Accept: text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/avif,image\/webp,\/;q=0.8<\/code><\/li>\n<\/ol>\n<p>  <\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0425\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 URL<\/font><\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043b\u044e\u0434\u044f\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043d\u0451\u043c <b><font color=\"#3AC1EF\">\u0431\u0435\u0437 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438<\/font><\/b> \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u0445\u0430\u043a: <a href=\"https:\/\/www.scottantipa.com\/store-app-state-in-urls\">\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 URL<\/a>, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u00ab\u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f\u00bb, \u0430 \u043f\u043e\u0437\u0436\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 (\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445). \u0422\u0430\u043a\u0436\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0443\u0442\u0451\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 URL.<\/p>\n<p>  \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014\u00a0\u0444\u0430\u0439\u043b JSON, \u043e\u043d \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0440\u043e\u043a\u0443, \u043f\u043e\u0442\u043e\u043c \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0431\u0430\u0439\u0442\u044b Base64, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 URL \u043f\u043e\u0441\u043b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 `\/g\/a#`. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <code>\u043d\u0430\u0448_\u0441\u0430\u0439\u0442.com\/g\/a#N4IgzgpgTglghgGxgLwnARgiAxA9lAWxAC5QA7X...<\/code><\/p>\n<p>  \u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">const stateString = JSON.stringify(appState); \/\/ appState \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 JSON const compressed = compress(stateString); const encoded = Base64.encode(compressed); \/\/ \u041f\u0443\u0448\u0438\u043c \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 url \/\/ ...\u041f\u043e\u0437\u0436\u0435 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 undo\/redo \u0447\u0438\u0442\u0430\u0435\u043c url \u0438 \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 const decoded = Base64.decode(encoded); \/\/ \u0432 \u0442\u043e\u0439 \u0436\u0435 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0435, \u0447\u0442\u043e \u0438 \u0432\u044b\u0448\u0435, \u043d\u043e \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u0437 url const uncompressed = uncompress(decoded); const newState = JSON.parse(uncompressed); \/\/ \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043d\u043e\u0432\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c newState<\/code><\/pre>\n<p>  URL \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u043e\u043c \u0438\u0437 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u0440\u0438\u043c\u0435\u0440\u044b, \u043a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442: \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u0431\u043b\u043e\u043a-\u0441\u0445\u0435\u043c <a href=\"https:\/\/www.knotend.com\/\">knotend<\/a> \u0438 <a href=\"https:\/\/mermaid.live\/\">mermaid.live<\/a>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/sj\/9o\/1m\/sj9o1mw7pz8wuelvfrj4vudhip8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/sj\/9o\/1m\/sj9o1mw7pz8wuelvfrj4vudhip8.png\"\/><\/p>\n<p>  \u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u0436\u0430\u0442\u0438\u044f\/\u0434\u0435\u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/github.com\/pieroxy\/lz-string\">lz-stirng<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/nodeca\/pako\">pako<\/a>.<\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043d\u0443\u0441\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u00ab\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e\u00bb \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c undo\/redo \u0438\u0437 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e \u0441\u0442\u0435\u043a\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044e\u044e \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 embed&#8217;\u044b.<\/p>\n<p>  \u041c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a Yahoo! Finance \u0445\u0440\u0430\u043d\u0438\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 URL:<\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">finance.yahoo.com<\/b>                         <\/p>\n<div class=\"spoiler_text\"><code>https:\/\/finance.yahoo.com\/quote\/F\/chart?p=F#eyJpbnRlcnZhbCI6IndlZWsiLCJwZXJpb2RpY2l0eSI6MSwidGltZVVuaXQiOm51bGwsImNhbmRsZVdpZHRoIjo0LjM0ODY1OTAwMzgzMTQxNzUsImZsaXBwZWQiOmZhbHNlLCJ2b2x1bWVVbmRlcmxheSI6dHJ1ZSwiYWRqIjp0cnVlLCJjcm9zc2hhaXIiOnRydWUsImNoYXJ0VHlwZSI6ImxpbmUiLCJleHRlbmRlZCI6ZmFsc2UsIm1hcmtldFNlc3Npb25zIjp7fSwiYWdncmVnYXRpb25UeXBlIjoib2hsYyIsImNoYXJ0U2NhbGUiOiJsaW5lYXIiLCJzdHVkaWVzIjp7IuKAjHZvbCB1bmRy4oCMIjp7InR5cGUiOiJ2b2wgdW5kciIsImlucHV0cyI6eyJpZCI6IuKAjHZvbCB1bmRy4oCMIiwiZGlzcGxheSI6IuKAjHZvbCB1bmRy4oCMIn0sIm91dHB1dHMiOnsiVXAgVm9sdW1lIjoiIzAwYjA2MSIsIkRvd24gVm9sdW1lIjoiI2ZmMzMzYSJ9LCJwYW5lbCI6ImNoYXJ0IiwicGFyYW1ldGVycyI6eyJ3aWR0aEZhY3RvciI6MC40NSwiY2hhcnROYW1lIjoiY2hhcnQifX19LCJwYW5lbHMiOnsiY2hhcnQiOnsicGVyY2VudCI6MSwiZGlzcGxheSI6IkYiLCJjaGFydE5hbWUiOiJjaGFydCIsImluZGV4IjowLCJ5QXhpcyI6eyJuYW1lIjoiY2hhcnQiLCJwb3NpdGlvbiI6bnVsbH0sInlheGlzTEhTIjpbXSwieWF4aXNSSFMiOlsiY2hhcnQiLCLigIx2b2wgdW5kcuKAjCJdfX0sInNldFNwYW4iOnsibXVsdGlwbGllciI6NSwiYmFzZSI6InllYXIiLCJwZXJpb2RpY2l0eSI6eyJwZXJpb2QiOjEsImludGVydmFsIjoid2VlayJ9fSwibGluZVdpZHRoIjoyLCJzdHJpcGVkQmFja2dyb3VuZCI6dHJ1ZSwiZXZlbnRzIjp0cnVlLCJjb2xvciI6IiMwMDgxZjIiLCJzdHJpcGVkQmFja2dyb3VkIjp0cnVlLCJldmVudE1hcCI6eyJjb3Jwb3JhdGUiOnsiZGl2cyI6dHJ1ZSwic3BsaXRzIjp0cnVlfSwic2lnRGV2Ijp7fX0sImN1c3RvbVJhbmdlIjpudWxsLCJzeW1ib2xzIjpbeyJzeW1ib2wiOiJGIiwic3ltYm9sT2JqZWN0Ijp7InN5bWJvbCI6IkYiLCJxdW90ZVR5cGUiOiJFUVVJVFkiLCJleGNoYW5nZVRpbWVab25lIjoiQW1lcmljYS9OZXdfWW9yayJ9LCJwZXJpb2RpY2l0eSI6MSwiaW50ZXJ2YWwiOiJ3ZWVrIiwidGltZVVuaXQiOm51bGwsInNldFNwYW4iOnsibXVsdGlwbGllciI6NSwiYmFzZSI6InllYXIiLCJwZXJpb2RpY2l0eSI6eyJwZXJpb2QiOjEsImludGVydmFsIjoid2VlayJ9fX1dfQ--<\/code><\/div>\n<\/p><\/div>\n<p>  <\/p>\n<div class=\"spoiler\" role=\"button\" tabindex=\"0\">                         <b class=\"spoiler_title\">\u0421\u0442\u0440\u043e\u043a\u0430 \u0432 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435<\/b>                         <\/p>\n<div class=\"spoiler_text\"><code>{\"interval\":\"week\",\"periodicity\":1,\"timeUnit\":null,\"candleWidth\":4.3486590038314175,\"flipped\":false,\"volumeUnderlay\":true,\"adj\":true,\"crosshair\":true,\"chartType\":\"line\",\"extended\":false,\"marketSessions\":{},\"aggregationType\":\"ohlc\",\"chartScale\":\"linear\",\"studies\":{\" vol undr \":{\"type\":\"vol undr\",\"inputs\":{\"id\":\" vol undr \",\"display\":\" vol undr \"},\"outputs\":{\"Up Volume\":\"#00b061\",\"Down Volume\":\"#ff333a\"},\"panel\":\"chart\",\"parameters\":{\"widthFactor\":0.45,\"chartName\":\"chart\"}}},\"panels\":{\"chart\":{\"percent\":1,\"display\":\"F\",\"chartName\":\"chart\",\"index\":0,\"yAxis\":{\"name\":\"chart\",\"position\":null},\"yaxisLHS\":[],\"yaxisRHS\":[\"chart\",\" vol undr \"]}},\"setSpan\":{\"multiplier\":5,\"base\":\"year\",\"periodicity\":{\"period\":1,\"interval\":\"week\"}},\"lineWidth\":2,\"stripedBackground\":true,\"events\":true,\"color\":\"#0081f2\",\"stripedBackgroud\":true,\"eventMap\":{\"corporate\":{\"divs\":true,\"splits\":true},\"sigDev\":{}},\"customRange\":null,\"symbols\":[{\"symbol\":\"F\",\"symbolObject\":{\"symbol\":\"F\",\"quoteType\":\"EQUITY\",\"exchangeTimeZone\":\"America\/New_York\"},\"periodicity\":1,\"interval\":\"week\",\"timeUnit\":null,\"setSpan\":{\"multiplier\":5,\"base\":\"year\",\"periodicity\":{\"period\":1,\"interval\":\"week\"}}}]}<\/code><\/div>\n<\/p><\/div>\n<p>  \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0442\u0443\u0442 \u043c\u043d\u043e\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u043d\u043e \u0441\u0430\u043c \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u043d\u044f\u0442\u0435\u043d.<\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/i>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435 URL, \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0446\u0435\u043b\u0435\u0439 \u043d\u0430\u0434\u0451\u0436\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 <a href=\"https:\/\/en.wikipedia.org\/wiki\/URI_fragment\">URI-\u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u043e\u0432<\/a> (\u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u043d\u0430\u043a\u0430 <code>#<\/code>). \u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, \u0432\u0441\u0451 \u043d\u043e\u0432\u043e\u0435\u00a0\u2014 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u0430\u0431\u044b\u0442\u043e\u0435 \u0441\u0442\u0430\u0440\u043e\u0435. \u041a\u0440\u0438\u043f\u0442\u043e\u0445\u043e\u0441\u0442\u0438\u043d\u0433 <i>Mega.co.nz<\/i> \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u044d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f <a href=\"https:\/\/help.mega.io\/security\/data-protection\/zero-knowledge-encryption\">\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043a\u043b\u044e\u0447\u0430 \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0438<\/a> \u0440\u043e\u0432\u043d\u043e \u0434\u0435\u0441\u044f\u0442\u044c \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435 API \u0441\u043e\u043e\u0431\u0449\u0430\u044e\u0442 \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0443 \u0441\u0430\u0439\u0442\u0430 \u043e \u043f\u0430\u0434\u0435\u043d\u0438\u044f\u0445 \u043d\u0430 \u0435\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/font><\/h2>\n<p>  \u041f\u0430\u0440\u0443 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 Chrome \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 <a href=\"https:\/\/developer.chrome.com\/articles\/reporting-api\/\">Reporting API<\/a>, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0437\u043d\u0430\u044e\u0442 \u043d\u0435 \u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/br\/g_\/1g\/brg_1ginerqly5zckikh5d4tfkk.png\" data-src=\"https:\/\/habrastorage.org\/webt\/br\/g_\/1g\/brg_1ginerqly5zckikh5d4tfkk.png\"\/><\/p>\n<p>  \u0427\u0435\u0440\u0435\u0437 \u044d\u0442\u0438 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430\u00a0\u0438 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0435\u0442 \u043e\u0442\u0447\u0451\u0442\u044b \u043f\u043e \u043f\u0430\u0434\u0435\u043d\u0438\u044f\u043c\/\u043e\u0448\u0438\u0431\u043a\u0430\u043c \u0441 \u0438\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044f JSON \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 URL.<\/p>\n<p>  \u041f\u0440\u0430\u0432\u0434\u0430, \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 Chrome <a href=\"https:\/\/developer.chrome.com\/blog\/reporting-api-migration\/\">\u0434\u0432\u0435 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 API<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a\u0443\u044e \u0438\u0437 \u0432\u0435\u0440\u0441\u0438\u0439 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u0438\u043c API \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/neugierig.org\/software\/blog\/2023\/01\/browser-crashes.html\">\u0447\u0430\u0441\u0442\u044b\u0435 \u043f\u0430\u0434\u0435\u043d\u0438\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438\u0437-\u0437\u0430 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/a>. \u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0435\u043f\u043e\u0441\u0438\u043b\u044c\u043d\u044b \u0434\u043b\u044f \u0441\u0442\u0430\u0440\u044b\u0445 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432\u00a0\u2014 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0432\u044b\u043b\u0435\u0442\u0430\u0435\u0442 \u0438\u0437-\u0437\u0430 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430 RAM.<\/p>\n<h2><font color=\"#3AC1EF\">\u258d \u0422\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 CSS<\/font><\/h2>\n<p>  \u0415\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0437\u0430\u0448\u043b\u0430 \u043e CSS, \u0442\u043e \u043f\u0430\u0440\u0443 \u043c\u0435\u0441\u044f\u0446\u0435\u0432 \u043d\u0430\u0437\u0430\u0434 \u0432\u0441\u0435 \u0432\u0435\u0434\u0443\u0449\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 <a href=\"https:\/\/web.dev\/css-trig-functions\/\">\u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/a>.<\/p>\n<p>  \u041c\u043d\u043e\u0433\u0438\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 CSS \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/web.dev\/learn\/css\/functions\/#mathematical-expressions\">\u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/a>: \u043e\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 <code>calc()<\/code> \u0434\u043e \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>min()<\/code>, <code>max()<\/code> \u0438 <code>clamp()<\/code>.<\/p>\n<p>  \u0410 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 Chrome\u00a0111, Firefox 108 \u0438 Safari 15.4 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0435\u0449\u0451 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 <code>sin()<\/code>, <code>cos()<\/code>, <code>tan()<\/code>, <code>asin()<\/code>, <code>acos()<\/code>, <code>atan()<\/code> \u0438 <code>atan2()<\/code>. \u0412\u0441\u0435 \u043e\u043d\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445 <a href=\"https:\/\/www.w3.org\/TR\/css-values-4\/#trig-funcs\">CSS Values and Units Module Level 4<\/a>.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/codepen.io\/web-dot-dev\/pen\/ExePgOg\">\u0432\u043e\u0442 \u043a\u043e\u0434<\/a> \u0434\u043b\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438 \u043f\u043e \u043a\u0440\u0443\u0433\u0443 \u0432\u043e\u043a\u0440\u0443\u0433 \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438:<\/p>\n<pre><code class=\"css\">:root {   --radius: 20vmin; }  .dot {   --angle: 30deg;   translate: \/* Translation on X-axis *\/              calc(cos(var(--angle)) * var(--radius))               \/* Translation on Y-axis *\/              calc(sin(var(--angle)) * var(--radius) * -1)   ; }<\/code><\/pre>\n<p>  <a href=\"https:\/\/codepen.io\/web-dot-dev\/pen\/ExePgOg\">\u0414\u0435\u043c\u043e<\/a>:<\/p>\n<p>  <a href=\"https:\/\/codepen.io\/web-dot-dev\/pen\/ExePgOg\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/yv\/db\/oz\/yvdboztgw7lys4lmynntkedvxpu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/yv\/db\/oz\/yvdboztgw7lys4lmynntkedvxpu.png\"\/><\/a><\/p>\n<p>  \u0421\u043c. \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/codepen.io\/thebabydino\/pen\/wvybyMo\">\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u044c\u0446\u043e \u041c\u0451\u0431\u0438\u0443\u0441\u0430 \u043d\u0430 \u0441\u0438\u043d\u0443\u0441\u0430\u0445 \u0438 \u043a\u043e\u0441\u0438\u043d\u0443\u0441\u0430\u0445<\/a>.<\/p>\n<p>  <i>P. S.<\/i> \u041e \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f HTML\/CSS\/JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0441 \u0443\u0434\u0438\u0432\u0438\u043b\u0438, \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0438\u043b\u0438 \u0432 \u043b\u0438\u0447\u043a\u0443.<\/p>\n<blockquote><p><b><font color=\"#3AC1EF\"><a href=\"https:\/\/habr.com\/ru\/specials\/731732\/\">\u041f\u043e\u043b-\u043b\u0438\u043c\u043e\u043d\u0430 \u043f\u043e\u0434\u0430\u0440\u043a\u043e\u0432 \u043e\u0442 RUVDS. \u041e\u0442\u0432\u0435\u0447\u0430\u0439 \u043d\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0439 \u043f\u0440\u0438\u0437\u044b ?<\/a><\/font><\/b><\/p><\/blockquote>\n<p><a href=\"http:\/\/ruvds.com\/ru-rub?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=alizar&amp;utm_content=interesnye_tryuki_html_i_css\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/_p\/_h\/lv\/_p_hlvd2tv0cv9tny8tdytzfhje.png\" data-src=\"https:\/\/habrastorage.org\/webt\/_p\/_h\/lv\/_p_hlvd2tv0cv9tny8tdytzfhje.png\"\/><\/a><\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/731960\/\"> https:\/\/habr.com\/ru\/articles\/731960\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/731960\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/37\/5c\/dl\/375cdlu-p9edhlc4ziu9i8wblcq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/37\/5c\/dl\/375cdlu-p9edhlc4ziu9i8wblcq.png\"\/><\/div>\n<p><\/a><br \/>  \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043d\u0430\u0439\u0434\u0451\u0442\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0443 \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f HTML\/CSS\/JS. \u0415\u0441\u043b\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439, \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u0442\u0438 \u0445\u0430\u043a\u0438 \u043d\u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/i>. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u044e\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b Google \u0438 \u0434\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f (\u0438\u043b\u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442, \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u044e\u0442 \u0431\u0430\u0433\u0438 \u0438 \u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u044f\u0442 \u0438\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c). \u0414\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439 Chrome, Firefox \u0438 \u0442.\u00a0\u0434.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-415039","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/415039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=415039"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/415039\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=415039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=415039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=415039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}