{"id":460178,"date":"2025-05-19T15:00:58","date_gmt":"2025-05-19T15:00:58","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=460178"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=460178","title":{"rendered":"<span>\u0412\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043d\u0430 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u043c HTML, CSS \u0438 JavaScript: \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0441\u0430\u0439\u0442\u044b<\/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\/910734\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/div>\n<p><\/a><br \/> \u042d\u0442\u043e \u0432\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0437 \u0446\u0438\u043a\u043b\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u0432 \u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 \u0447\u0438\u0441\u0442\u044b\u0445 (\u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0445) \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u2014 \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e\u043b\u044c\u043a\u043e HTML, CSS \u0438 JavaScript. \u0412 <a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/909390\/\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432. \u0412 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043f\u043b\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432, \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438.<a name=\"habracut\"><\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 CSS<\/font><\/h2>\n<p> \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0431\u043e\u0433\u0430\u0442\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 CSS, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0430\u043a\u0435\u0442\u043e\u0432 NPM \u0438 \u044d\u0442\u0430\u043f\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438. \u0412\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0435 \u0436\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u043f\u0443\u0442\u044c, \u043e\u0442\u043a\u0430\u0437\u0430\u0432\u0448\u0438\u0441\u044c \u043e\u0442 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u0438\u043a \u0441 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u043c CSS \u0438 \u0432\u044b\u0431\u0440\u0430\u0432 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438.<\/p>\n<h2><font color=\"#3AC1EF\">\u0421\u0431\u0440\u043e\u0441<\/font><\/h2>\n<p> \u0421\u0431\u0440\u043e\u0441 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043e \u043e\u0431\u0449\u0435\u0433\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u2014 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435, \u0438 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u044d\u0442\u043e\u043c \u043d\u0438\u0447\u0435\u043c \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p> \u041c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u0430\u0439\u0442\u043e\u043c:<\/p>\n<p> <code>reset.css<\/code><\/p>\n<pre><code class=\"css\">\/* \u043e\u0431\u043e\u0431\u0449\u0451\u043d\u043d\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441 CSS    \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0435\u043d\u0438\u044f: https:\/\/www.digitalocean.com\/community\/tutorials\/css-minimal-css-reset *\/  :root {     box-sizing: border-box;     line-height: 1.4;     \/* https:\/\/kilianvalkhof.com\/2022\/css-html\/your-css-reset-needs-text-size-adjust-probably\/ *\/     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none; }  *, *::before, *::after {     box-sizing: inherit; }  body, h1, h2, h3, h4, h5, h6, p {     margin: 0;     padding: 0;     font-weight: normal; }  img {     max-width:100%;     height:auto; }<\/code><\/pre>\n<p> \u0412\u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u044e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<p> <a href=\"https:\/\/github.com\/sindresorhus\/modern-normalize\">modern-normalize<\/a> \u2014 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 CSS \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. <a href=\"https:\/\/www.jsdelivr.com\/package\/npm\/modern-normalize\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 CDN<\/a><\/p>\n<p> <a href=\"https:\/\/cferdinandi.github.io\/kraken\/\">Kraken<\/a> \u2014 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430. \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0441\u0431\u0440\u043e\u0441 CSS, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, \u0441\u0435\u0442\u043a\u0443 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. <a href=\"https:\/\/cdnjs.com\/libraries\/Kraken\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 CDN<\/a><\/p>\n<p> <a href=\"https:\/\/picocss.com\/\">Pico CSS<\/a> \u2014 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e HTML, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0434\u043b\u044f \u0441\u0431\u0440\u043e\u0441\u0430 CSS. <a href=\"https:\/\/picocss.com\/docs#usage-from-cdn\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 CDN<\/a><\/p>\n<p> <a href=\"https:\/\/tailwindcss.com\/\">Tailwind<\/a> \u2014 \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Tailwind, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0431\u0440\u043e\u0441 CSS. <a href=\"https:\/\/kopi.dev\/tailwind-css-with-cdn-html\/\">\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 CDN<\/a><\/p>\n<h2><font color=\"#3AC1EF\">\u0428\u0440\u0438\u0444\u0442\u044b<\/font><\/h2>\n<p> \u0422\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u2014 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u043e\u0439 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u043a\u0430\u043a \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430, \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0435.<\/p>\n<p> \u0412 <a href=\"https:\/\/modernfontstacks.com\/\">Modern Font Stacks<\/a> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0442\u043a\u0430\u0442\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p> \u041d\u0430 \u043d\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0435\u043a <em>Geometric Humanist<\/em> \u0434\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0441\u0442\u0435\u043a <em>Monospace Code<\/em> \u0434\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<h2><font color=\"#3AC1EF\">\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439<\/font><\/h2>\n<p> \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043e\u0431\u044a\u0451\u043c CSS \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c CSS \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<p> <code>@import<\/code> \u2014 \u0441\u0430\u043c\u0430\u044f \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 CSS \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u043a\u0430\u043a \u0442\u0435\u0433\u0438 <code>&lt;link&gt;<\/code> \u0432 <code>index.html<\/code>, \u043d\u043e \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u044b\u043c, \u0435\u0441\u043b\u0438 \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 <code>index.css<\/code>.<\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b CSS \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430:<\/p>\n<p> <code>index.css<\/code><\/p>\n<pre><code class=\"css\">@import url(\".\/styles\/reset.css\"); @import url(\".\/styles\/variables.css\"); @import url(\".\/styles\/global.css\"); @import url(\".\/components\/code-viewer\/code-viewer.css\"); @import url(\".\/components\/tab-panel\/tab-panel.css\");<\/code><\/pre>\n<p> \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 CSS.<\/p>\n<p> \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435) \u2014 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS<\/a> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u0430 \u0438 \u0442\u0435\u043c\u044b \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430:<\/p>\n<p> <code>variables.css<\/code><\/p>\n<pre><code class=\"css\">:root {     \/* https:\/\/modernfontstacks.com\/        geometric humanist font *\/     --font-system: Avenir, Montserrat, Corbel, source-sans-pro, sans-serif;     \/* monospace code font *\/     --font-system-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;     --font-system-code-size: 0.8rem;      --background-color: white;      --text-color: black;     --text-color-mute: hsl(0, 0%, 40%);      --link-color: darkblue;      --nav-separator-color: goldenrod;     --nav-background-color: hsl(50, 50%, 95%);      --border-color: black;      --code-text-color: var(--text-color);     --code-text-color-bg: inherit;      --panel-title-color: black;     --panel-title-color-bg: cornsilk; }<\/code><\/pre>\n<p> \u0415\u0449\u0451 \u0431\u043e\u043b\u0435\u0435 \u043c\u043e\u0449\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc\">calc()<\/a>.<\/p>\n<p> \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u2014 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0442\u0435\u0433\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0430\u0432\u0430\u0442\u0430\u0440\u0430 \u0438\u0437 <a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/909390\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u0441\u0442\u0430\u0442\u044c\u0438 \u0438\u043c\u0435\u044e\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <code>x-avatar<\/code>:<\/p>\n<p> <code>avatar.css<\/code><\/p>\n<pre><code class=\"css\">x-avatar {     display: flex;     align-items: center;     justify-content: center;     width: 2.5rem;     height: 2.5rem; }  x-avatar[size=lg] {     width: 3.5rem;     height: 3.5rem; }  x-avatar img {     border-radius: 9999px;     width: 100%;     height: 100%;     vertical-align: middle;     object-fit: cover; }<\/code><\/pre>\n<p> \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c\u0438, \u043a\u0430\u043a \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u043c <code>[size=lg]<\/code> \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430.<\/p>\n<p> Shadow DOM \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 shadow DOM \u043a \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0435\u0449\u0451 \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>x-header<\/code> \u0438\u0437 <a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/909390\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u0442 \u0441\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>h1<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0432\u043e\u0435\u0433\u043e CSS, \u043d\u0435 \u0432\u043b\u0438\u044f\u044f \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0443\u044e \u0435\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438 \u043d\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430.<\/p>\n<p> \u0412\u0441\u0435 \u0444\u0430\u0439\u043b\u044b CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a shadow DOM, \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u0451 \u044f\u0432\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043e\u0434\u043d\u0430\u043a\u043e <a href=\"https:\/\/javascript.info\/shadow-dom-style\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 shadow DOM<\/a>.<\/p>\n<p> \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 shadow DOM \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0438\u0445 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432 \u00ab\u0441\u0432\u0435\u0442\u043b\u0443\u044e\u00bb DOM.<\/p>\n<h2><font color=\"#3AC1EF\">\u0424\u0430\u0439\u043b\u044b<\/font><\/h2>\n<p> \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 CSS \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438; \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p> <code>\/index.css<\/code> \u2014 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0444\u0430\u0439\u043b CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>@import<\/code>.<\/p>\n<p> <code>\/styles\/reset.css<\/code> \u2014 \u043f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0431\u0440\u043e\u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p> <code>\/styles\/variables.css<\/code> \u2014 \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<p> <code>\/styles\/global.css<\/code> \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u0434\u043b\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0430\u0439\u0442\u0430.<\/p>\n<p> <code>\/components\/example\/example.css<\/code> \u2014 \u0432\u0441\u0435 \u043d\u0435\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 CSS, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u043c \u0440\u044f\u0434\u043e\u043c \u0441 \u0444\u0430\u0439\u043b\u043e\u043c JS \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h2><font color=\"#3AC1EF\">\u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438<\/font><\/h2>\n<p> \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0412 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438<\/font><\/h3>\n<p> \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0445 shadow DOM, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0441 \u0442\u0435\u0433\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p> <code>index.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt; &lt;head&gt;     &lt;link rel=\"stylesheet\" href=\"index.css\"&gt; &lt;\/head&gt; &lt;body&gt;     &lt;x-example&gt;&lt;\/x-example&gt;     &lt;p&gt;This &lt;p&gt; is not affected, because it is outside the custom element.&lt;\/p&gt;     &lt;script type=\"module\" src=\"index.js\"&gt;&lt;\/script&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <code>index.js<\/code><\/p>\n<pre><code class=\"javascript\">import { registerExampleComponent } from '.\/components\/example\/example.js'; const app = () =&gt; {     registerExampleComponent(); } document.addEventListener('DOMContentLoaded', app);<\/code><\/pre>\n<p> <code>index.css<\/code><\/p>\n<pre><code class=\"css\">@import url(\".\/components\/example\/example.css\");<\/code><\/pre>\n<p> <code>components\/example\/example.js<\/code><\/p>\n<pre><code class=\"javascript\">class ExampleComponent extends HTMLElement {     connectedCallback() {         this.innerHTML = '&lt;p&gt;For example...&lt;\/p&gt;';     } } export const registerExampleComponent = () =&gt; {     customElements.define('x-example', ExampleComponent); }<\/code><\/pre>\n<p> <code>components\/example\/example.css<\/code><\/p>\n<pre><code class=\"css\">x-example p {     font-family: casual, cursive;     color: darkblue; }<\/code><\/pre>\n<p> <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/oz\/0u\/rp\/oz0urptsy0fowro-6pyzhi2bzyw.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/oz\/0u\/rp\/oz0urptsy0fowro-6pyzhi2bzyw.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/oz\/0u\/rp\/oz0urptsy0fowro-6pyzhi2bzyw.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/div>\n<p> <\/p>\n<blockquote>\n<h4><font color=\"#3AC1EF\">\u258d \u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430: \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c CSS<\/font><\/h4>\n<p> \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0441\u0442\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438 \u0432\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 <a href=\"https:\/\/caniuse.com\/css-nesting\">\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/a>, \u0442\u043e \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043d\u0430\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_nesting\/Using_CSS_nesting\">\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 CSS<\/a>.<\/p>\n<p> <code>components\/example\/example.css<\/code><\/p>\n<pre><code class=\"css\">x-example {     p {         font-family: casual, cursive;         color: darkblue;     } }<\/code><\/pre>\n<\/blockquote>\n<p> <\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0418\u043c\u043f\u043e\u0440\u0442 Shadow DOM<\/font><\/h3>\n<p> \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0435 shadow DOM, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0438 \u0438\u043c\u0435\u044e\u0442 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0430 \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u044f\u0432\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043d\u0438\u0445. \u0412\u043e\u0442 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430\u043c\u0438 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f shadow DOM.<\/p>\n<p> <code>index.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt; &lt;body&gt;     &lt;x-example&gt;         &lt;p&gt;This &lt;p&gt; is not affected, even though it is slotted.&lt;\/p&gt;     &lt;\/x-example&gt;     &lt;script type=\"module\" src=\"index.js\"&gt;&lt;\/script&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <code>index.js<\/code><\/p>\n<pre><code class=\"javascript\">import { registerExampleComponent } from '.\/components\/example\/example.js'; const app = () =&gt; {     registerExampleComponent(); } document.addEventListener('DOMContentLoaded', app);<\/code><\/pre>\n<p> <code>components\/example\/example.js<\/code><\/p>\n<pre><code class=\"javascript\">class ExampleComponent extends HTMLElement {     constructor() {         super();         this.attachShadow({mode: 'open'});         this.shadowRoot.innerHTML = `             &lt;link rel=\"stylesheet\" href=\"${import.meta.resolve('.\/example.css')}\"&gt;             &lt;p&gt;For example...&lt;\/p&gt;             &lt;slot&gt;&lt;\/slot&gt;         `;     } } export const registerExampleComponent = () =&gt; {     customElements.define('x-example', ExampleComponent); }<\/code><\/pre>\n<p> <code>components\/example\/example.css<\/code><\/p>\n<pre><code class=\"css\">p {     font-family: casual, cursive;     color: darkblue; }<\/code><\/pre>\n<p> <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/71\/xu\/wn\/71xuwnabb1s2okjcxqiorpzjhik.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/71\/xu\/wn\/71xuwnabb1s2okjcxqiorpzjhik.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/71\/xu\/wn\/71xuwnabb1s2okjcxqiorpzjhik.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/div>\n<p> \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0432\u043d\u0443\u0442\u0440\u0438 shadow DOM, \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432:<\/p>\n<ul>\n<li>\u041e\u0431\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b CSS \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u044c shadow DOM \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0435\u0433\u043e\u0432 <code>&lt;link&gt;<\/code> \u0438\u043b\u0438 <code>@import<\/code>.<\/li>\n<li>\u041d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 CSS, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u043e\u0436\u043d\u043e \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 shadow DOM.<\/li>\n<li>\u0414\u043b\u044f \u0434\u043e\u043c\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f shadow DOM \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>::part<\/code>, \u0447\u0442\u043e\u0431\u044b <a href=\"https:\/\/meowni.ca\/posts\/part-theme-explainer\/\">\u0440\u0430\u0441\u043a\u0440\u044b\u0442\u044c API \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/a>.<\/li>\n<\/ul>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u0417\u0430\u043c\u0435\u043d\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 CSS<\/font><\/h2>\n<p> \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 CSS \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0437\u0446\u0430 \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u043d\u044b\u0439 <a href=\"https:\/\/nextjs.org\/docs\/app\/building-your-application\/styling\/css-modules#example\">\u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 CSS<\/a> \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Next.JS:<\/p>\n<p> <code>app\/dashboard\/layout.tsx<\/code><\/p>\n<pre><code class=\"javascript\">import styles from '.\/styles.module.css'   export default function DashboardLayout({   children, }: {   children: React.ReactNode }) {   return &lt;section className={styles.dashboard}&gt;{children}&lt;\/section&gt; }<\/code><\/pre>\n<p> <code>app\/dashboard\/styles.module.css<\/code> <\/p>\n<pre><code class=\"css\">.dashboard {     padding: 24px; }<\/code><\/pre>\n<p> \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043d \u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u0442\u0430\u043a:<\/p>\n<p> <code>components\/dashboard\/layout.js<\/code><\/p>\n<pre><code class=\"javascript\">class Layout extends HTMLElement {     constructor() {         super();         this.attachShadow({ mode: 'open' });         this.shadowRoot.innerHTML = `             &lt;link rel=\"stylesheet\" href=\"${import.meta.resolve('styles.css')}\"&gt;             &lt;section class=\"dashboard\"&gt;&lt;slot&gt;&lt;\/slot&gt;&lt;\/section&gt;         `;     } }  export const registerLayoutComponent =      () =&gt; customElements.define('x-layout', Layout);<\/code><\/pre>\n<p> <code>components\/dashboard\/styles.css<\/code><\/p>\n<pre><code class=\"css\">@import url(\"..\/shared.css\");  .dashboard {     padding: 24px; }<\/code><\/pre>\n<p> \u0422\u0430\u043a \u043a\u0430\u043a shadow DOM \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u0442\u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, <code>styles.css<\/code> \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438, \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u00ab\u0442\u0435\u043d\u0435\u0432\u043e\u0433\u043e\u00bb \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<h2><font color=\"#3AC1EF\">\u0417\u0430\u043c\u0435\u043d\u0430 PostCSS<\/font><\/h2>\n<p> \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0430\u043d\u0438\u0446\u0435 <a href=\"https:\/\/postcss.org\/\">PostCSS<\/a>.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u0430 \u043a \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c CSS \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 Can I Use<\/font><\/b> \u2014 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f. \u041f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <code>:fullscreen<\/code> \u0442\u0435\u043f\u0435\u0440\u044c <a href=\"https:\/\/caniuse.com\/mdn-css_selectors_fullscreen\">\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432<\/a>.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e CSS \u0432 \u0442\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/font><\/b> \u2014 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0443\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e <code>color: oklch()<\/code> \u0442\u0435\u043f\u0435\u0440\u044c <a href=\"https:\/\/caniuse.com\/?search=oklch\">\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<\/a>.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u041c\u043e\u0434\u0443\u043b\u0438 CSS<\/font><\/b> \u2014 \u0441\u043c. \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435. \u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0439\u0442\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0430\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 stylelint. \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 Visual Studio Code <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=stylelint.vscode-stylelint\">\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 vscode-stylelint<\/a> \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e \u0436\u0435 \u043b\u0438\u043d\u0442\u0438\u043d\u0433\u0430 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0432 \u044d\u0442\u0430\u043f \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p> <strong><font color=\"#3AC1EF\">\u041f\u043e\u0434\u0432\u0435\u0434\u0451\u043c \u0438\u0442\u043e\u0433:<\/font><\/strong> \u0438\u0437-\u0437\u0430 \u043e\u0442\u043a\u0430\u0437\u0430 Microsoft \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 IE11 \u0438 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 PostCSS \u043f\u043e \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u043c\u0435\u0440\u0435 \u0441\u0442\u0430\u043b \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u043c.<\/p>\n<h2><font color=\"#3AC1EF\">\u0417\u0430\u043c\u0435\u043d\u0430 SASS<\/font><\/h2>\n<p> \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e PostCSS, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 <a href=\"https:\/\/sass-lang.com\/guide\/\">SASS<\/a>:<\/p>\n<p> <b><font color=\"#3AC1EF\">\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/font><\/b> \u2014 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Using_CSS_custom_properties\">\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 CSS<\/a>.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/font><\/b> \u2014 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c CSS <a href=\"https:\/\/caniuse.com\/css-nesting\">\u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f<\/a> \u0432\u0441\u0435\u043c\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u0447\u0442\u043e \u0432\u043f\u043e\u043b\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0440\u044b\u0442\u044c \u0432\u0430\u0448\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u041c\u043e\u0434\u0443\u043b\u0438<\/font><\/b> \u2014 \u043c\u043e\u0436\u043d\u043e \u0430\u043f\u043f\u0440\u043e\u043a\u0441\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435\u043c <code>@import<\/code>, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 CSS \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0432\u044b\u0448\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u041f\u0440\u0438\u043c\u0435\u0441\u0438 (mixin)<\/font><\/b> \u2014 \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/issues\/9350\">CSS-\u043f\u0440\u0438\u043c\u0435\u0441\u0435\u0439<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445, \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p> <b><font color=\"#3AC1EF\">\u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u044b<\/font><\/b> \u2014 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/calc\">calc()<\/a>.<\/p>\n<p> <strong><font color=\"#3AC1EF\">\u041f\u043e\u0434\u0432\u0435\u0434\u0451\u043c \u0438\u0442\u043e\u0433:<\/font><\/strong> SASS \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0449\u043d\u0435\u0435, \u0447\u0435\u043c PostCSS, \u0438 \u0445\u043e\u0442\u044f \u0443 \u043c\u043d\u043e\u0433\u0438\u0445 \u0435\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0435\u0441\u0442\u044c \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0435 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b, \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435 \u0442\u0430\u043a \u043b\u0435\u0433\u043a\u043e. \u0412\u0430\u043c \u0441\u0430\u043c\u0438\u043c \u0440\u0435\u0448\u0430\u0442\u044c, \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0437-\u0437\u0430 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 SASS \u0435\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.<\/p>\n<h2><font color=\"#3AC1EF\">\u0412\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/font><\/h2>\n<p> \u0414\u043b\u044f \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u043d\u0438\u0437\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0430 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430.<\/p>\n<p> \u041e\u0442\u043a\u0430\u0437\u0430\u0432\u0448\u0438\u0441\u044c \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u0438 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u043d\u0443\u043b\u044f. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<p> <code>example.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt;     &lt;head&gt;         &lt;title&gt;Example&lt;\/title&gt;         &lt;meta charset=\"utf-8\"&gt;         &lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;         &lt;link rel=\"stylesheet\" href=\"index.css\"&gt;     &lt;\/head&gt;     &lt;body&gt;         &lt;noscript&gt;&lt;strong&gt;&lt;font color=\"#3AC1EF\"&gt;Please enable JavaScript to view this page correctly.&lt;\/font&gt;&lt;\/strong&gt;&lt;\/noscript&gt;         &lt;header&gt;             title and navigation ...         &lt;\/header&gt;         &lt;main&gt;             main content ...         &lt;\/main&gt;         &lt;footer&gt;             byline and copyright ...         &lt;\/footer&gt;             &lt;script type=\"module\" src=\"index.js\"&gt;&lt;\/script&gt;     &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> \u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n<p> <code>&lt;!doctype html&gt;<\/code> \u2014 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b HTML \u043f\u0430\u0440\u0441\u0438\u043b\u0441\u044f \u043a\u0430\u043a HTML5, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0430\u0440\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f.<\/p>\n<p> <code>&lt;html lang=\"en\"&gt;<\/code> \u2014 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 lang \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043d, \u0447\u0442\u043e\u0431\u044b \u044f\u0437\u044b\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u043b\u0441\u044f \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u043e.<\/p>\n<p> <code>&lt;head&gt;&lt;title&gt;<\/code> \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u043a\u043b\u0430\u0434\u043a\u0438; \u0442\u043e \u0435\u0441\u0442\u044c, \u043f\u043e \u0441\u0443\u0442\u0438, \u043e\u043d \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d.<\/p>\n<p> <code>&lt;head&gt;&lt;meta charset=\"utf-8\"&gt;<\/code> \u2014 \u044d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u044d\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0443 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u043e\u0447\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c, \u043a\u0430\u043a UTF-8. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u043c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u043e\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u0430 UTF-8.<\/p>\n<p> <code>&lt;head&gt;&lt;meta name=\"viewport\"&gt;<\/code> \u2014 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n<p> <code>&lt;head&gt;&lt;link rel=\"stylesheet\" href=\"index.css\"&gt;<\/code> \u2014 \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0438\u0437 <code>&lt;head&gt;<\/code> \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u0430 \u0432\u0441\u043f\u044b\u0448\u043a\u0430 \u043d\u0435\u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p> <code>&lt;body&gt;&lt;noscript&gt;<\/code> \u2014 \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 JavaScript, \u043e\u0431\u044b\u0447\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 noscript \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d JavaScript. \u042d\u0442\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e, \u043a\u0440\u043e\u043c\u0435 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f, \u0442\u043e \u0441\u043c. \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d.<\/p>\n<p> <code>&lt;body&gt;&lt;header\/main\/footer&gt;<\/code> \u2014 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0435\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/blog\/aria-accessibility-html-landmark-roles\/\">HTML-\u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 (landmark)<\/a>. \u041f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 landmark \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0432 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0438 accessibility \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0422\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u044b \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432, \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0441 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0438 \u043d\u043e\u0432\u044b\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 accessibility.<\/p>\n<p> <code>&lt;body&gt;&lt;script type=\"module\" src=\"index.js\"&gt;<\/code> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0430\u0439\u043b JavaScript \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435, \u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.<\/p>\n<p> \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445, \u0433\u0434\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c JavaScript, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d:<\/p>\n<p> <code>index.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt;     &lt;head&gt;         &lt;title&gt;Example&lt;\/title&gt;         &lt;meta charset=\"utf-8\"&gt;         &lt;meta name=\"viewport\" content=\"width=device-width\" \/&gt;         &lt;link rel=\"stylesheet\" href=\"index.css\"&gt;     &lt;\/head&gt;     &lt;body&gt;         &lt;noscript&gt;&lt;strong&gt;&lt;font color=\"#3AC1EF\"&gt;Please enable JavaScript to view this page.&lt;\/font&gt;&lt;\/strong&gt;&lt;\/noscript&gt;         &lt;template id=\"page\"&gt;             &lt;header&gt;                 title and navigation ...             &lt;\/header&gt;             &lt;main&gt;                 main content ...             &lt;\/main&gt;             &lt;footer&gt;                 byline and copyright ...             &lt;\/footer&gt;             &lt;\/template&gt;         &lt;script type=\"module\" src=\"index.js\"&gt;&lt;\/script&gt;     &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <code>index.js<\/code><\/p>\n<pre><code class=\"javascript\">const app = () =&gt; {     const template = document.querySelector('template#page');     if (template) document.body.appendChild(template.content, true); }  document.addEventListener('DOMContentLoaded', app);<\/code><\/pre>\n<p> <\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0412\u0430\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438<\/font><\/h3>\n<p> \u0412 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 HTML \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f accessibility \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f SEO. \u0412\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438.<\/p>\n<p> \u041e\u0441\u0432\u043e\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e HTML:<\/p>\n<p> <a href=\"https:\/\/developer.mozilla.org\/en-US\/blog\/aria-accessibility-html-landmark-roles\/\">Landmark (\u043c\u0430\u0440\u043a\u0435\u0440\u044b)<\/a> \u2014 \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, landmark \u2014 \u044d\u0442\u043e \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 accessibility.<\/p>\n<p> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\">\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/a> \u2014 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0437\u043d\u0430\u043d\u0438\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 HTML \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0432\u0430\u043c \u0432\u0440\u0435\u043c\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041f\u0440\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u043d\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 accessibility.<\/p>\n<p> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Forms\">\u0424\u043e\u0440\u043c\u044b<\/a> \u2014 \u043f\u0440\u0438 \u0438\u0445 \u043f\u043e\u043b\u043d\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b HTML \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u0418\u0437\u0443\u0447\u0438\u0442\u0435 \u0442\u0430\u043a\u0438\u0435 \u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Forms\/HTML5_input_types\">\u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0432\u0432\u043e\u0434\u0430<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Forms\/Form_validation\">\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Forms\/UI_pseudo-classes\">\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b UI<\/a>. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0442\u0438\u043f\u0430 \u0432\u0432\u043e\u0434\u0430, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/web.dev\/articles\/more-capable-form-controls\">\u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/a>, \u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0439\u0442\u0435 <a href=\"https:\/\/caniuse.com\/mdn-api_elementinternals\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 ElementInternals<\/a>.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d \u0424\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438<\/font><\/h3>\n<p> \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u0430\u043c \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u0445, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0443:<\/p>\n<ul>\n<li>\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c, \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 <code>favicon.ico<\/code> \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0441\u0430\u0439\u0442\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u0430 \u043d\u0435\u0451 \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u0441\u0432\u043e\u0439 HTML: <code>&lt;link rel=\"icon\" href=\"favicon.ico\"&gt;<\/code><\/li>\n<li>\u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/medium.com\/swlh\/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df\">\u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438 \u0432 SVG<\/a>, \u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e Safari \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442. <a href=\"https:\/\/css-tricks.com\/svg-favicons-in-action\/\">\u0412\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0442\u0451\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c<\/a> \u0432 \u0441\u0430\u043c SVG \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438 \u0438\u043b\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u0441\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u043f\u043e\u0434\u043e\u0431\u0438\u0435 <a href=\"https:\/\/realfavicongenerator.net\/\">RealFaviconGenerator<\/a>.<\/li>\n<li>\u0423\u0447\u0442\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0444\u0430\u0432\u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b \u043d\u0430 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u0445 \u0432\u0435\u0431\u0430, \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/dev.to\/masakudamatsu\/favicon-nightmare-how-to-maintain-sanity-3al7\">\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0434\u0435-\u0444\u0430\u043a\u0442\u043e<\/a>.<\/li>\n<\/ul>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u041f\u0440\u043e\u0435\u043a\u0442<\/font><\/h2>\n<p> \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u0442\u0430\u043a\u043e\u0432\u0430:<\/p>\n<p> <code>\/<\/code> \u2014 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>README.md<\/code>, <code>LICENSE<\/code> \u0438 <code>.gitignore<\/code>.<\/p>\n<p> <code>\/public<\/code> \u2014 \u043f\u0430\u043f\u043a\u0430 <code>public<\/code> \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u0431\u0435\u0437 \u044d\u0442\u0430\u043f\u043e\u0432 \u0441\u0431\u043e\u0440\u043a\u0438. \u0412 \u043d\u0435\u0439 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0441\u044c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442.<\/p>\n<p> <code>\/public\/index.html<\/code> \u2014 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043b\u0435\u043d\u0434\u0438\u043d\u0433-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430, \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0442\u0438.<\/p>\n<p> <code>\/public\/index.[js\/css]<\/code> \u2014 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 javascript. \u041e\u043d\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043e\u0431\u0449\u0438\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043a\u043e\u0434.<\/p>\n<p> <code>index.js<\/code> \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445. \u0415\u0441\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0431\u0449\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0440\u0430\u0441\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438.<\/p>\n<p> <code>\/public\/pages\/[\u0438\u043c\u044f].html<\/code> \u2014 \u0432\u0441\u0435 \u043f\u0440\u043e\u0447\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0430\u0439\u0442\u0430, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 <code>index.js<\/code> \u0438 <code>index.css<\/code> \u0438, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 HTML \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p> <code>public\/components\/[name]\/<\/code> \u2014 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u0444\u0430\u0439\u043b\u044b <code>[\u0438\u043c\u044f].js<\/code> \u0438 <code>[\u0438\u043c\u044f].css<\/code>. \u0424\u0430\u0439\u043b <code>.js<\/code> \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b <code>index.js<\/code> \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0424\u0430\u0439\u043b <code>.css<\/code>, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 <code>index.css<\/code> \u0438\u043b\u0438 \u0432 shadow DOM.<\/p>\n<p> <code>\/public\/lib\/<\/code> \u2014 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u0430\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u041d\u0438\u0436\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n<p> <code>\/public\/styles\/<\/code> \u2014 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f <code>index.css<\/code>.<\/p>\n<p> \u0424\u0430\u0439\u043b\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430 \u0442\u043e\u0436\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0430 \u0431\u0435\u0437 \u044d\u0442\u0430\u043f\u0430 \u0441\u0431\u043e\u0440\u043a\u0438. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c. \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e <a href=\"https:\/\/plainvanillaweb.com\/blog\/articles\/2024-10-20-editing-plain-vanilla\/\">\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 Visual Studio Code<\/a>.<\/p>\n<h2><font color=\"#3AC1EF\">\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/font><\/h2>\n<p> \u00ab\u041e\u043b\u0434\u0441\u043a\u0443\u043b\u044c\u043d\u044b\u0439\u00bb \u0441\u043f\u043e\u0441\u043e\u0431 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0438\u0445 \u0438\u0445 \u0442\u0435\u0433\u043e\u0432 <code>&lt;a&gt;<\/code> \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c\u0438: \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u043c\u0438 \u0434\u0432\u0438\u0436\u043a\u0430\u043c\u0438 \u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u0437\u0430\u043a\u043b\u0430\u0434\u043e\u043a.<\/p>\n<h2><font color=\"#3AC1EF\">\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/font><\/h2>\n<p> \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0437 npm \u0438 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430.<\/p>\n<h3><font color=\"#3AC1EF\">Unpkg<\/font><\/h3>\n<p> \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u0435\u0437 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430, \u0438\u0445 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 ESM \u0438\u043b\u0438 UMD. \u0422\u0430\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0441 unpkg.com:<\/p>\n<ol>\n<li>\u0417\u0430\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 <code>unpkg.com\/[library]\/<\/code> (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u043a\u043e\u0441\u0430\u044f \u0447\u0435\u0440\u0442\u0430 \u0432\u0430\u0436\u043d\u0430), \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 <a href=\"https:\/\/unpkg.com\/microlight\/\">unpkg.com\/microlight\/<\/a><\/li>\n<li>\u041d\u0430\u0439\u0434\u0438\u0442\u0435 \u0438 \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u0444\u0430\u0439\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 <code>dist<\/code>, <code>esm<\/code> \u0438\u043b\u0438 <code>umd<\/code><\/li>\n<li>\u041f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u0444\u0430\u0439\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0430\u043f\u043a\u0443 <code>lib\/<\/code><\/li>\n<\/ol>\n<p> \u0418\u043b\u0438 \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u0437 CDN.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d UMD<\/font><\/h3>\n<p> <a href=\"https:\/\/jameshfisher.com\/2020\/10\/04\/what-are-umd-modules\/\">\u0424\u043e\u0440\u043c\u0430\u0442 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 UMD<\/a> \u2014 \u044d\u0442\u043e \u0441\u0442\u0430\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u0438\u0437 \u0442\u0435\u0433\u0430 <code>script<\/code>; \u043e\u043d \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0441\u0430\u043c\u043e\u0439 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441\u0440\u0435\u0434\u0438 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u043f\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u044e <code>typeof define === 'function' &amp;&amp; define.amd<\/code> \u0432 JS \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/p>\n<p> \u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<ol>\n<li>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0442\u0435\u0433\u0435 script: <code>&lt;script src=\"lib\/microlight.js\"&gt;&lt;\/script&gt;<\/code><\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0443 \u043e\u043a\u043d\u0430: <code>const { microlight } = window;<\/code><\/li>\n<\/ol>\n<p> <\/p>\n<h3><font color=\"#3AC1EF\">\u258d ESM<\/font><\/h3>\n<p> <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Modules\">\u0424\u043e\u0440\u043c\u0430\u0442 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 ESM<\/a> (\u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 JavaScript) \u2014 \u044d\u0442\u043e \u0444\u043e\u0440\u043c\u0430\u0442, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c ECMAScript; \u0443 \u043d\u043e\u0432\u044b\u0445 \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043e\u0431\u044b\u0447\u043d\u043e \u0435\u0441\u0442\u044c ESM-\u0441\u0431\u043e\u0440\u043a\u0430. \u0415\u0451 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0442\u044c \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 <code>export<\/code>.<\/p>\n<p> \u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f:<\/p>\n<ul>\n<li>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0438\u0437 CDN:\n<p> <code>import('https:\/\/unpkg.com\/web-vitals@4.2.2\/dist\/web-vitals.js').then((webVitals) =&gt; ...)<\/code><\/li>\n<li>\u0418\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438\u0437 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043f\u0438\u0438:\n<p> <code>import webVitals from 'lib\/web-vitals.js'<\/code><\/li>\n<\/ul>\n<p> <\/p>\n<h3><font color=\"#3AC1EF\">\u258d imports.js<\/font><\/h3>\n<p> \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0443\u043f\u043e\u0440\u044f\u0434\u043e\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438\u0445 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <code>imports.js<\/code>.<\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f UMD-\u0441\u0431\u043e\u0440\u043a\u0430 <a href=\"https:\/\/day.js.org\/\">Day.js<\/a> \u0438 ESM-\u0441\u0431\u043e\u0440\u043a\u0430 <a href=\"https:\/\/github.com\/GoogleChrome\/web-vitals\">web-vitals<\/a>:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dc\/n0\/d_\/dcn0d_uhuwkebzd6pudaum1axoi.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/dc\/n0\/d_\/dcn0d_uhuwkebzd6pudaum1axoi.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/dc\/n0\/d_\/dcn0d_uhuwkebzd6pudaum1axoi.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/div>\n<p> \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c <code>&lt;x-metrics&gt;<\/code>:<\/p>\n<p> <code>components\/metrics.js<\/code><\/p>\n<pre><code class=\"javascript\">import { dayjs, webVitals } from '..\/lib\/imports.js';  class MetricsComponent extends HTMLElement {     #now = dayjs();     #ttfb;     #interval;      connectedCallback() {         webVitals.onTTFB(_ =&gt; this.#ttfb = Math.round(_.value));         this.#interval = setInterval(() =&gt; this.update(), 500);     }      disconnectedCallback() {         clearInterval(this.#interval);         this.#interval = null;     }      update() {         this.innerHTML = `             &lt;p&gt;Page loaded ${this.#now.fromNow()}, TTFB ${this.#ttfb} milliseconds&lt;\/p&gt;         `;     } }  export const registerMetricsComponent = () =&gt; {     customElements.define('x-metrics', MetricsComponent); }<\/code><\/pre>\n<p> \u0412 \u043f\u0430\u043f\u043a\u0435 <code>\/lib<\/code> \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0430\u0439\u043b\u044b:<\/p>\n<ul>\n<li>web-vitals.js \u2014 ESM-\u0441\u0431\u043e\u0440\u043a\u0430 web-vitals<\/li>\n<li>dayjs\/<br \/> \n<ul>\n<li>dayjs.min.js \u2014 UMD-\u0441\u0431\u043e\u0440\u043a\u0430 Day.js<\/li>\n<li>relativeTime.js \u2014 UMD-\u0441\u0431\u043e\u0440\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 Day.js<\/li>\n<\/ul>\n<\/li>\n<li>imports.js<\/li>\n<\/ul>\n<p> \u0418\u0437\u0443\u0447\u0438\u0432 \u0433\u043b\u0443\u0431\u0436\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0444\u0430\u0439\u043b, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u043a\u0430\u043a \u043e\u043d \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439:<\/p>\n<p> <code>lib\/imports.js<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ UMD-\u0432\u0435\u0440\u0441\u0438\u044f dayjs \u0441 https:\/\/unpkg.com\/dayjs\/ const dayjs = window.dayjs; const dayjsRelativeTime = window.dayjs_plugin_relativeTime; dayjs.extend(dayjsRelativeTime);  \/\/ ESM-\u0432\u0435\u0440\u0441\u0438\u044f web-vitals \u0441 https:\/\/unpkg.com\/web-vitals\/dist\/web-vitals.js import * as webVitals from '.\/web-vitals.js';  export { dayjs, webVitals };<\/code><\/pre>\n<p> \u041e\u043d \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 ESM-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043d\u043e \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442 UMD-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 <code>Window<\/code>. \u041e\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0432 HTML.<\/p>\n<p> \u0412\u043e\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0451\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p> <code>index.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt; &lt;head&gt;     &lt;link rel=\"stylesheet\" href=\"index.css\"&gt; &lt;\/head&gt; &lt;body&gt;     &lt;script src=\".\/lib\/dayjs\/dayjs.min.js\"&gt;&lt;\/script&gt;     &lt;script src=\".\/lib\/dayjs\/relativeTime.js\"&gt;&lt;\/script&gt;      &lt;script type=\"module\" src=\"index.js\"&gt;&lt;\/script&gt;     &lt;x-metrics&gt;&lt;\/x-metrics&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <code>index.css<\/code><\/p>\n<pre><code class=\"css\">body { font-family: sans-serif; }<\/code><\/pre>\n<p> <code>index.js<\/code> <\/p>\n<pre><code class=\"javascript\">import { registerMetricsComponent } from '.\/components\/metrics.js';  const app = () =&gt; {     registerMetricsComponent(); };  document.addEventListener('DOMContentLoaded', app);<\/code><\/pre>\n<p> <code>components\/metrics.js<\/code> <\/p>\n<pre><code class=\"javascript\">import { dayjs, webVitals } from '..\/lib\/imports.js';  class MetricsComponent extends HTMLElement {     #now = dayjs();     #ttfb;     #interval;      connectedCallback() {         webVitals.onTTFB(_ =&gt; this.#ttfb = Math.round(_.value));         this.#interval = setInterval(() =&gt; this.update(), 500);     }      disconnectedCallback() {         clearInterval(this.#interval);         this.#interval = null;     }      update() {         this.innerHTML = `             &lt;p&gt;Page loaded ${this.#now.fromNow()}, TTFB ${this.#ttfb} milliseconds&lt;\/p&gt;         `;     } }  export const registerMetricsComponent = () =&gt; {     customElements.define('x-metrics', MetricsComponent); }<\/code><\/pre>\n<p> <code>lib\/imports.js<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ UMD-\u0432\u0435\u0440\u0441\u0438\u044f dayjs \u0441 https:\/\/unpkg.com\/dayjs\/ const dayjs = window.dayjs; const dayjsRelativeTime = window.dayjs_plugin_relativeTime; dayjs.extend(dayjsRelativeTime);  \/\/ ESM-\u0432\u0435\u0440\u0441\u0438\u044f web-vitals \u0441 https:\/\/unpkg.com\/web-vitals\/dist\/web-vitals.js import * as webVitals from '.\/web-vitals.js';  export { dayjs, webVitals };<\/code><\/pre>\n<p> \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435 \u0443 \u0432\u0441\u0435\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0435\u0441\u0442\u044c UMD- \u0438\u043b\u0438 ESM-\u0441\u0431\u043e\u0440\u043a\u0438, \u043d\u043e \u0438\u0445 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n<h3><font color=\"#3AC1EF\">\u258d Import Map<\/font><\/h3>\n<p> \u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431\u0443 \u0441 <code>imports.js<\/code> \u043c\u043e\u0433\u0443\u0442 \u0441\u0442\u0430\u0442\u044c <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/script\/type\/importmap\">import map<\/a>. \u041e\u043d\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0438\u043c\u0435\u043d\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043e\u0441\u043e\u0431\u043e\u043c \u0442\u0435\u0433\u0435 <code>script<\/code> \u0432 <code>head<\/code> HTML. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0434\u043e\u0432\u043e\u0439 \u0431\u0430\u0437\u044b \u0431\u043e\u043b\u0435\u0435 \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439.<\/p>\n<p> \u0412\u043e\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 import map:<\/p>\n<p> <code>index.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt; &lt;head&gt;     &lt;link rel=\"stylesheet\" href=\"index.css\"&gt;     &lt;script src=\".\/lib\/dayjs\/dayjs.min.js\"&gt;&lt;\/script&gt;     &lt;script src=\".\/lib\/dayjs\/relativeTime.js\"&gt;&lt;\/script&gt;     &lt;script type=\"importmap\"&gt;         {             \"imports\": {                 \"dayjs\": \".\/lib\/dayjs\/module.js\",                 \"web-vitals\": \".\/lib\/web-vitals.js\"             }         }     &lt;\/script&gt; &lt;\/head&gt; &lt;body&gt;     &lt;script type=\"module\" src=\"index.js\"&gt;&lt;\/script&gt;     &lt;x-metrics&gt;&lt;\/x-metrics&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <code>lib\/dayjs\/module.js<\/code><\/p>\n<pre><code class=\"javascript\">\/\/ UMD-\u0432\u0435\u0440\u0441\u0438\u044f dayjs \u0441 https:\/\/unpkg.com\/dayjs\/ const dayjs = window.dayjs; const dayjsRelativeTime = window.dayjs_plugin_relativeTime; dayjs.extend(dayjsRelativeTime);  export default dayjs;<\/code><\/pre>\n<p> <code>components\/metrics.js<\/code><\/p>\n<pre><code class=\"javascript\">import dayjs from 'dayjs'; import * as webVitals from 'web-vitals';  class MetricsComponent extends HTMLElement {     #now = dayjs();     #ttfb;     #interval;      connectedCallback() {         webVitals.onTTFB(_ =&gt; this.#ttfb = Math.round(_.value));         this.#interval = setInterval(() =&gt; this.update(), 500);     }      disconnectedCallback() {         clearInterval(this.#interval);         this.#interval = null;     }      update() {         this.innerHTML = `             &lt;p&gt;Page loaded ${this.#now.fromNow()}, TTFB ${this.#ttfb} milliseconds&lt;\/p&gt;         `;     } }  export const registerMetricsComponent = () =&gt; {     customElements.define('x-metrics', MetricsComponent); }<\/code><\/pre>\n<p> \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 import map \u043d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0430\u0441\u043f\u0435\u043a\u0442\u044b:<\/p>\n<ul>\n<li>Import map \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 ESM-\u043c\u043e\u0434\u0443\u043b\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a UMD \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u043e\u0431\u0451\u0440\u0442\u043a\u0438, \u043a\u0430\u043a \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u043e\u0431\u0451\u0440\u0442\u043a\u043e\u0439 <code>module.js<\/code> \u0434\u043b\u044f <code>dayjs<\/code> \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/li>\n<li>\u0412\u043d\u0435\u0448\u043d\u0438\u0435 import map \u0432\u0438\u0434\u0430 <code>&lt;script type=\"importmap\" src=\"importmap.json\"&gt;<\/code> <a href=\"https:\/\/github.com\/WICG\/import-maps\/issues\/235\">\u043f\u043e\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a>. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e import map \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 HTML-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/li>\n<li>Import map \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0434\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 <code>index.js<\/code>, \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <code>&amp;lthead&gt;<\/code>.<\/li>\n<li>Import map \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <code>node_modules<\/code> \u0438\u043b\u0438 \u0438\u0437 CDN. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/generator.jspm.io\">JSPM generator<\/a> \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f import map \u0434\u043b\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 for CDN. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0442\u043e\u0438\u0442 \u0438\u043c\u0435\u0442\u044c \u0432 \u0432\u0438\u0434\u0443, \u0447\u0442\u043e \u0438\u0437-\u0437\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u0434\u043e\u0432\u0430\u044f \u0431\u0430\u0437\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430.<\/li>\n<\/ul>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/font><\/h2>\n<p> \u0412\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u041d\u043e \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442?<\/p>\n<ul>\n<li>\u0412\u0435\u0441\u044c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 Safari, Chrome, Edge \u0438 Firefox.<\/li>\n<li>\u0412\u0435\u0441\u044c \u043d\u0430\u0448 \u0441\u0430\u0439\u0442 \u0438\u043c\u0435\u0435\u0442 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 95% \u0438\u043b\u0438 \u0432\u044b\u0448\u0435 \u043d\u0430 <a href=\"https:\/\/caniuse.com\">caniuse.com<\/a>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c <a href=\"https:\/\/caniuse.com\/import-maps\">Import Map<\/a> (92%), <a href=\"https:\/\/caniuse.com\/declarative-shadow-dom\">\u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 Shadow DOM<\/a> (89%) \u0438 <a href=\"https:\/\/caniuse.com\/css-nesting\">\u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 CSS<\/a> (88%), \u043d\u043e \u0432\u0441\u043a\u043e\u0440\u0435 \u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u0441\u044f.<\/li>\n<li>\u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/caniuse.com\/http2\">HTTP\/2<\/a>, <a href=\"https:\/\/caniuse.com\/html5semantic\">\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b HTML5<\/a>, <a href=\"https:\/\/caniuse.com\/custom-elementsv1\">\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/a>, <a href=\"https:\/\/caniuse.com\/template\">\u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/a>, <a href=\"https:\/\/caniuse.com\/shadowdomv1\">Shadow DOM<\/a>, <a href=\"https:\/\/caniuse.com\/mdn-api_mutationobserver\">MutationObserver<\/a>, <a href=\"https:\/\/caniuse.com\/customevent\">CustomEvent<\/a>, <a href=\"https:\/\/caniuse.com\/mdn-api_formdata\">FormData<\/a> \u0438 API <a href=\"https:\/\/caniuse.com\/element-closest\">Element.closest<\/a>.<\/li>\n<li>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/caniuse.com\/es6-module\">\u043c\u043e\u0434\u0443\u043b\u0438 JavaScript<\/a>, <a href=\"https:\/\/caniuse.com\/es6\">ECMAScript 6 \/ 2015<\/a>, <a href=\"https:\/\/caniuse.com\/async-functions,object-values,object-entries,mdn-javascript_builtins_object_getownpropertydescriptors,pad-start-end,mdn-javascript_grammar_trailing_commas_trailing_commas_in_functions\">ECMAScript 8 \/ 2017<\/a> \u0438 <a href=\"https:\/\/caniuse.com\/?feats=mdn-javascript_operators_optional_chaining,mdn-javascript_operators_nullish_coalescing,mdn-javascript_builtins_globalthis,es6-module-dynamic-import,bigint,mdn-javascript_builtins_promise_allsettled,mdn-javascript_builtins_string_matchall,mdn-javascript_statements_export_namespace,mdn-javascript_operators_import_meta\">ECMAScript 11 \/ 2020<\/a>.<\/li>\n<li>\u0412 CSS \u043c\u043e\u0436\u043d\u043e \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/caniuse.com\/mdn-css_at-rules_import\">@import<\/a>, <a href=\"https:\/\/caniuse.com\/css-variables\">\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/a>, <a href=\"https:\/\/caniuse.com\/calc\">calc()<\/a>, <a href=\"https:\/\/caniuse.com\/flexbox\">flexbox<\/a>, <a href=\"https:\/\/caniuse.com\/css-grid\">grid<\/a>, <a href=\"https:\/\/caniuse.com\/css-display-contents\">display: contents<\/a> \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/li>\n<\/ul>\n<p> \u0427\u0442\u043e\u0431\u044b \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043d\u043e\u0432\u044b\u043c\u0438 \u0432\u0435\u0431-\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438, \u0438\u0437\u0443\u0447\u0430\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u044b:<\/p>\n<ul>\n<li><a href=\"https:\/\/web.dev\/baseline\">Baseline<\/a> \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u0438\u0447\u0438, \u0448\u0438\u0440\u043e\u043a\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442, \u043a\u043e\u0433\u0434\u0430 \u0438\u0445 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/li>\n<li><a href=\"https:\/\/web.dev\/blog\/interop-2024\">Interop<\/a> \u2014 \u044d\u0442\u043e \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u0430\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u0442\u0438\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043f\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044e \u043d\u043e\u0432\u044b\u0445 \u0444\u0438\u0447 \u0432\u0435\u0431-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0432\u043e \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b. \u041c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0435\u0451 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u0437\u043e\u0440\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u0441\u043a\u043e\u0440\u0435 \u0432\u043e\u0439\u0434\u0451\u0442 \u0432 baseline.<\/li>\n<\/ul>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u0420\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435<\/font><\/h2>\n<p> \u0414\u043b\u044f \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430, \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0433\u043e \u0445\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b.<\/p>\n<p> \u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 <a href=\"https:\/\/pages.github.com\/\">GitHub Pages<\/a>:<\/p>\n<ol>\n<li>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u043a\u0430\u043a \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 GitHub<\/li>\n<li>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 Settings, Pages<\/li>\n<li>Source: GitHub Actions<\/li>\n<li>Static Website, Configure<\/li>\n<li>\u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043a <code>path<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u043d\u0430 <code>.\/public<\/code><\/li>\n<li>\u0412\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u043a\u043e\u043c\u043c\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439&#8230;<\/li>\n<li>\u0417\u0430\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 Actions \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0438 \u0434\u043e\u0436\u0434\u0438\u0442\u0435\u0441\u044c \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430<\/li>\n<\/ol>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/font><\/h2>\n<p> \u0412\u0441\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u0430\u0445 \u0441\u0431\u043e\u0440\u043a\u0438.<br \/> \u041e\u0434\u043d\u0430\u043a\u043e \u0443 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430 \u043d\u0435\u0442 \u044d\u0442\u0430\u043f\u0430 \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0440\u043e\u043c\u043e\u0434\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Mocha.<\/p>\n<p> \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u044b \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>&lt;x-tab-panel&gt;<\/code>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u0430\u0434\u043e\u043a \u043f\u0430\u043d\u0435\u043b\u0435\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0435:<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/div>\n<p> \u0410 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0449\u0451 \u0433\u043b\u0443\u0431\u0436\u0435 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u0434\u0435, \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430:<\/p>\n<p> <code>tests\/index.html<\/code><\/p>\n<pre><code class=\"xml\">&lt;!doctype html&gt; &lt;html lang=\"en\"&gt; &lt;head&gt;     &lt;title&gt;Plain Vanilla - Tests&lt;\/title&gt;     &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1\" \/&gt;     &lt;link rel=\"icon\" href=\"..\/favicon.ico\"&gt;     &lt;link rel=\"stylesheet\" href=\"..\/index.css\"&gt;     &lt;!-- https:\/\/unpkg.com\/mocha@9.2.2\/mocha.css --&gt;     &lt;link rel=\"stylesheet\" href=\".\/lib\/mocha\/mocha.css\" \/&gt;     &lt;!-- https:\/\/unpkg.com\/chai@4.3.6\/chai.js --&gt;     &lt;script src=\".\/lib\/mocha\/chai.js\"&gt;&lt;\/script&gt;     &lt;!-- https:\/\/unpkg.com\/mocha@9.2.2\/mocha.js --&gt;     &lt;script src=\".\/lib\/mocha\/mocha.js\"&gt;&lt;\/script&gt;     &lt;!-- https:\/\/unpkg.com\/@testing-library\/dom@8.17.1\/dist\/@testing-library\/dom.umd.js --&gt;     &lt;script src=\".\/lib\/@testing-library\/dom.umd.js\"&gt;&lt;\/script&gt; &lt;\/head&gt; &lt;body&gt;     &lt;div id=\"mocha\"&gt;&lt;\/div&gt;      &lt;script type=\"module\" class=\"mocha-init\"&gt;         mocha.setup('bdd');         mocha.checkLeaks();     &lt;\/script&gt;      &lt;script type=\"module\" src=\".\/tabpanel.test.js\"&gt;&lt;\/script&gt;          &lt;!-- \u0437\u0434\u0435\u0441\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0442\u0435\u0441\u0442\u044b --&gt;      &lt;script type=\"module\" class=\"mocha-exec\" src=\".\/index.js\"&gt;&lt;\/script&gt; &lt;\/body&gt; &lt;\/html&gt;<\/code><\/pre>\n<p> <code>tests\/index.js<\/code><\/p>\n<pre><code class=\"javascript\">import { registerTabPanelComponent } from \"..\/components\/tab-panel\/tab-panel.js\";  const app = () =&gt; {     registerTabPanelComponent();     mocha.run(); }  document.addEventListener('DOMContentLoaded', app);<\/code><\/pre>\n<p> <code>tests\/tabpanel.test.js<\/code><\/p>\n<pre><code class=\"javascript\">import { render, screen, waitFor, expect, fireEvent } from '.\/imports-test.js';  const renderTabPanel = () =&gt; {     const div = document.createElement('div');     div.innerHTML = `         &lt;x-tab-panel&gt;             &lt;x-tab title=\"Tab 1\" active&gt;                 &lt;p&gt;Tab 1 content&lt;\/p&gt;              &lt;\/x-tab&gt;             &lt;x-tab title=\"Tab 2\"&gt;                 &lt;p&gt;Tab 2 content&lt;\/p&gt;             &lt;\/x-tab&gt;         &lt;\/x-tab-panel&gt;     `;     render(div); }  describe('tabpanel', () =&gt; {     it(\"renders a tabpanel with active tab\", async () =&gt; {         \/\/ ARRANGE         renderTabPanel();              \/\/ ASSERT         \/\/ \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u043a\u043b\u0430\u0434\u043a\u0430         const activeTab = await screen.findByRole('tab', { name: 'Tab 1', selected: true });         expect(activeTab).to.not.be.undefined;         \/\/ \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f tabpanel \u0432\u0438\u0434\u0438\u043c\u0430         const activePanel = screen.getByText(\/Tab 1 content\/);         expect(activePanel).to.not.be.undefined;         \/\/ \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 tabpanel \u0441\u043a\u0440\u044b\u0442         const tab2 = screen.getByTitle('Tab 2');         await waitFor(() =&gt; expect(tab2.offsetParent).to.be.null);     });          it(\"activates a different tab on click\", async () =&gt; {         \/\/ ARRANGE         renderTabPanel();         const tab2 = screen.getByTitle('Tab 2');              \/\/ ASSERT         \/\/ \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 tabpanel \u0441\u043a\u0440\u044b\u0442         await waitFor(() =&gt; expect(tab2.offsetParent).to.be.null);         \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0438 \u0438 \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c \u043d\u0430 \u043d\u0435\u0451         const tab2Button = await screen.findByRole('tab', { name: 'Tab 2' });         expect(tab2Button).not.to.be.undefined;         fireEvent.click(tab2Button);         \/\/ \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0439 tabpanel         await waitFor(() =&gt; expect(tab2.offsetParent).not.to.be.null);     }); });<\/code><\/pre>\n<p> <code>tests\/imports-test.js<\/code><\/p>\n<pre><code class=\"javascript\">const { expect } = window.chai; const { getByText, queries, within, waitFor, fireEvent } = window.TestingLibraryDom;  let rootContainer; let screen;  beforeEach(() =&gt; {     \/\/ \u0441\u043a\u0440\u044b\u0442\u044b\u0439 div, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u0441\u0442 \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b     rootContainer = document.createElement(\"div\");     rootContainer.style.position = 'absolute';     rootContainer.style.left = '-10000px';     document.body.appendChild(rootContainer);     \/\/ \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 @testing-library\/dom \u043a rootContainer     screen = Object.keys(queries).reduce((helpers, key) =&gt; {         const fn = queries[key]         helpers[key] = fn.bind(null, rootContainer)         return helpers     }, {}); });  afterEach(() =&gt; {     document.body.removeChild(rootContainer);     rootContainer = null; });  function render(el) {     rootContainer.appendChild(el); }  export {      rootContainer,      expect,      render,      getByText, screen, within, waitFor, fireEvent };<\/code><\/pre>\n<p> \u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c:<\/p>\n<ul>\n<li>\u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0434\u043b\u044f \u044e\u043d\u0438\u0442-\u0442\u0435\u0441\u0442\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432\u044b\u0434\u0435\u043b\u0435\u043d \u0432 \u043f\u043e\u0434\u043f\u0430\u043f\u043a\u0443 <code>public\/tests\/<\/code>. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e, \u0435\u0441\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>\/tests<\/code> \u043a URL \u0440\u0430\u0437\u0432\u0451\u0440\u043d\u0443\u0442\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0435, \u0442\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043f\u0430\u043f\u043a\u0443 \u0442\u0435\u0441\u0442\u043e\u0432 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0432\u0451\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f.<\/li>\n<li>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f <a href=\"https:\/\/mochajs.org\/\">Mocha<\/a> \u0438 <a href=\"https:\/\/www.chaijs.com\/\">Chai<\/a>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u0435\u0437 \u044d\u0442\u0430\u043f\u0430 \u0441\u0431\u043e\u0440\u043a\u0438.<\/li>\n<li>\u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a DOM \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/testing-library.com\">DOM Testing Library<\/a>. \u0424\u0430\u0439\u043b <code>imports-test.js<\/code> \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u0443\u0435\u0442 \u0435\u0451 \u0434\u043b\u044f \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/li>\n<li>\u0412\u0430\u0436\u043d\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e DOM Testing Library <a href=\"https:\/\/github.com\/testing-library\/dom-testing-library\/issues\/413\">\u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u043d\u0435\u0439 shadow<\/a>. \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0440\u043d\u0435\u0439 shadow, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u043c\u0443 \u0438\u0445 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>shadowRoot<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e.<\/li>\n<li>\u0412\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/testing-library.com\/docs\/dom-testing-library\/api-async\">\u043c\u0435\u0442\u043e\u0434\u044b async<\/a> DOM Testing Library.<\/li>\n<\/ul>\n<p> <\/p>\n<h2><font color=\"#3AC1EF\">\u041f\u0440\u0438\u043c\u0435\u0440<\/font><\/h2>\n<p> \u041f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0448 <a href=\"https:\/\/plainvanillaweb.com\/\">\u0432\u0435\u0431-\u0441\u0430\u0439\u0442<\/a>. \u0415\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0435\u0441\u0442\u044c \u043d\u0430 <a href=\"https:\/\/github.com\/jsebrech\/plainvanilla\/\">GitHub<\/a>.<\/p>\n<blockquote><p><b><font color=\"#3AC1EF\"><a href=\"https:\/\/t.me\/ruvds_community\">Telegram-\u043a\u0430\u043d\u0430\u043b \u0441\u043e \u0441\u043a\u0438\u0434\u043a\u0430\u043c\u0438, \u0440\u043e\u0437\u044b\u0433\u0440\u044b\u0448\u0430\u043c\u0438 \u043f\u0440\u0438\u0437\u043e\u0432 \u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 IT \ud83d\udcbb<\/a><\/font><\/b><\/p><\/blockquote>\n<p><a href=\"https:\/\/ruvds.com\/ru-rub?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=perevod&amp;utm_content=veb_razrabotka_na_vanilnom_html_css_i_javascript_stilizaciya_i_sajty\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/yo\/se\/km\/yosekm4h_f7y7oia-ghbbpc0phi.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/yo\/se\/km\/yosekm4h_f7y7oia-ghbbpc0phi.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/yo\/se\/km\/yosekm4h_f7y7oia-ghbbpc0phi.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/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\/910734\/\"> https:\/\/habr.com\/ru\/articles\/910734\/<\/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\/910734\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/webt\/vl\/m7\/qx\/vlm7qxmagsujyif44razp6zi05o.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/div>\n<p><\/a><br \/> \u042d\u0442\u043e \u0432\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0438\u0437 \u0446\u0438\u043a\u043b\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u0432 \u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0430 \u0447\u0438\u0441\u0442\u044b\u0445 (\u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0445) \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u0445 \u2014 \u0431\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e\u043b\u044c\u043a\u043e HTML, CSS \u0438 JavaScript. \u0412 <a href=\"https:\/\/habr.com\/ru\/companies\/ruvds\/articles\/909390\/\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438, \u043f\u043e\u0447\u0435\u043c\u0443 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0440\u043e\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432. \u0412 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043f\u043b\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432, \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438\u043b\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438.<\/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-460178","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/460178","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=460178"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/460178\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=460178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=460178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=460178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}