{"id":336835,"date":"2022-08-10T09:00:11","date_gmt":"2022-08-10T09:00:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=336835"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=336835","title":{"rendered":"<span>\u0417\u0430\u043c\u0435\u0442\u043a\u0430 \u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0433\u043e CSS<\/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\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gi\/pt\/o1\/gipto1m4fdqss_8dtly1lbbodek.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gi\/pt\/o1\/gipto1m4fdqss_8dtly1lbbodek.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c <code>CSS<\/code>. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 &#171;\u0444\u0438\u0447\u0430\u0445&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0436\u0434\u0443\u0442 \u043d\u0430\u0441 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 2 \u0433\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>&#171;\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0439&#187; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u044f \u043b\u0438\u0431\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0444\u0438\u0447\u0443 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043b\u0438\u0431\u043e \u0441 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435\u043c \u0436\u0434\u0443 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<h2 id=\"suschestvuyuschie-vozmozhnosti\">\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p>  <\/p>\n<h3 id=\"not\">:not()<\/h3>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:not\">:not()<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442 \u043d\u0438 \u0441 \u043e\u0434\u043d\u0438\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. \u0421\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u043a\u0430\u043a \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e, \u0442\u0430\u043a \u0438 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438, \u0442\u0430\u043a \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:not(selector1, selector2, ...selectorN) {}<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-not-sel-list\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 93.04%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u043f\u0443\u0442:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;input type=\"text\" placeholder=\"Enter some text...\" required \/><\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0432 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0431\u044b\u043b\u0438 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. &#171;\u041d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u044c&#187; \u043f\u043e\u043b\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:invalid\">:invalid<\/a>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0438. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">input:invalid:not(:hover, :focus) {   border-color: red; }  \/* \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 *\/ :invalid {   box-shadow: none; }  :-moz-submit-invalid {   box-shadow: none; }  :-moz-ui-invalid {   box-shadow: none; }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041b\u0438\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435: \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>placeholder<\/code><\/strong><\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">input.placeholder {   color: #0275d8;   font-size: 0.8rem;   opacity: 0.8; } input:-moz-placeholder {   color: #0275d8;   font-size: 0.8rem;   opacity: 0.8; } input::-moz-placeholder {   color: #0275d8;   font-size: 0.8rem;   opacity: 0.8; } input:-ms-input-placeholder {   color: #0275d8;   font-size: 0.8rem;   opacity: 0.8; } input::-webkit-input-placeholder {   color: #0275d8;   font-size: 0.8rem;   opacity: 0.8; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u044d\u0442\u043e \u0432\u0440\u044f\u0434 \u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"empty\">:empty<\/h3>\n<p>  <\/p>\n<p>\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:empty\">:empty<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432. \u041a \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0442\u0435\u043a\u0441\u0442 \u0438 (sic!) \u043f\u0440\u043e\u0431\u0435\u043b\u044b.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:empty {}<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/mdn-css_selectors_empty\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 97.65%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0441\u044b\u043b\u043e\u043a:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;ul>   &lt;li>&lt;a href=\"#\">Link 1&lt;\/a>&lt;\/li>   &lt;li>     &lt;a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">Link 2&lt;\/a>   &lt;\/li>   &lt;li>&lt;\/li> &lt;\/ul><\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u0442\u0430\u043a\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">ul {   display: inline-flex;   flex-direction: column;   \/* \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 *\/   gap: 0.5rem;   list-style: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043f\u0443\u0441\u0442\u044b\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e <code>url<\/code> \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438. \u0422\u043e\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043b\u0438\u0448\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/3r\/3v\/sr\/3r3vsrbkhsjahdahix94mkbx5aq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/3r\/3v\/sr\/3r3vsrbkhsjahdahix94mkbx5aq.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>:empty<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">li:empty {   display: none; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041b\u0438\u0448\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/cd\/gx\/xi\/cdgxxi-3ezzltby-jx98fhw3c1g.png\" data-src=\"https:\/\/habrastorage.org\/webt\/cd\/gx\/xi\/cdgxxi-3ezzltby-jx98fhw3c1g.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p><strong>\u041b\u0438\u0440\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435: \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442<\/strong><\/p>\n<p>  <\/p>\n<p><code>display: none;<\/code> \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u043c, \u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430, \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.sr-only {   background: none;   border: none;   color: none;   cursor: none;   height: 0;   margin: 0;   opacity: 0;   outline: none;   overflow: hidden;   padding: 0;   pointer-events: none;   position: absolute;   user-select: none;   visibility: hidden;   white-space: nowrap;   width: 0;   z-index: -1; }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"is-i-where\">:is() \u0438 :where()<\/h3>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u0438-\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:is\">:is()<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:where\">:where()<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0441 \u043b\u044e\u0431\u044b\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0438\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430. \u0421\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u043a\u0430\u043a \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e, \u0442\u0430\u043a \u0438 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438, \u0442\u0430\u043a \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 <code>:is()<\/code> \u0438 <code>:where()<\/code> \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e <code>:is()<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0430\u043c\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430, \u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c <code>:where()<\/code> \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f <code>0<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:is(selector1, selector2, ...selectorN) {} :where(selector1, selector2, ...selectorN) {}<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-matches-pseudo\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 :is() \u2014 94.9%<\/a>.<br \/>  <a href=\"https:\/\/caniuse.com\/mdn-css_selectors_where\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 :where() \u2014 91.61%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0438, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0448\u0430\u043f\u043a\u0435 \u0438\u043b\u0438 \u043f\u043e\u0434\u0432\u0430\u043b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:is(header, footer) a:hover {   color: green; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e <code>:is()<\/code> \u0438 <code>:where()<\/code> \u043c\u043e\u0433\u0443\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:is#simplifying_list_selectors\">\u044d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"focus-within\">:focus-within<\/h3>\n<p>  <\/p>\n<p>\u041f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/:focus-within\">:focus-within<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0438\u0431\u043e \u0441\u0430\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0444\u043e\u043a\u0443\u0441\u0435 (\u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>:focus-within<\/code> \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0443 <code>:focus<\/code>), \u043b\u0438\u0431\u043e \u0438\u043c\u0435\u044e\u0442 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u0444\u043e\u043a\u0443\u0441\u0435.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:focus-within {}<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-focus-within\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 95.32%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u043f\u0443\u0442 \u0441 \u043f\u043e\u0434\u043f\u0438\u0441\u044c\u044e \u0438 \u0438\u043a\u043e\u043d\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"form-field\">   &lt;label>     &lt;span>Some text:&lt;\/span>     &lt;input type=\"text\" placeholder=\"Enter some text...\" required \/>   &lt;\/label>   &lt;svg viewBox=\"0 0 60 60\">     &lt;path       d=\"M48.014,42.889l-9.553-4.776C37.56,37.662,37,36.756,37,35.748v-3.381c0.229-0.28,0.47-0.599,0.719-0.951 c1.239-1.75,2.232-3.698,2.954-5.799C42.084,24.97,43,23.575,43,22v-4c0-0.963-0.36-1.896-1-2.625v-5.319 c0.056-0.55,0.276-3.824-2.092-6.525C37.854,1.188,34.521,0,30,0s-7.854,1.188-9.908,3.53C17.724,6.231,17.944,9.506,18,10.056 v5.319c-0.64,0.729-1,1.662-1,2.625v4c0,1.217,0.553,2.352,1.497,3.109c0.916,3.627,2.833,6.36,3.503,7.237v3.309 c0,0.968-0.528,1.856-1.377,2.32l-8.921,4.866C8.801,44.424,7,47.458,7,50.762V54c0,4.746,15.045,6,23,6s23-1.254,23-6v-3.043 C53,47.519,51.089,44.427,48.014,42.889z\"       fill=\"currentColor\"     \/>   &lt;\/svg> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<p><em>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/em> \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>fill<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>path<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0442\u0430\u043a\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.form-field {   color: darkslategray;   position: relative;   width: max-content; }  .form-field label {   align-items: center;   display: flex; }  .form-field input {   border: 2px solid darkslategray;   margin-left: 0.5rem;   outline: none;   padding: 0.5rem;   \/* \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043a\u0438 - 20px + 5px + 5px *\/   padding-right: 30px; }  .form-field svg {   height: 20px;   position: absolute;   right: 5px;   top: 50%;   transform: translateY(-50%);   width: 20px; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/eo\/sw\/bs\/eoswbsaynnllhvka3iayc-g-ur8.png\" data-src=\"https:\/\/habrastorage.org\/webt\/eo\/sw\/bs\/eoswbsaynnllhvka3iayc-g-ur8.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0438, \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u044f \u0438 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0438\u043a\u043e\u043d\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0421 \u0438\u043d\u043f\u0443\u0442\u043e\u043c \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.form-field input:hover {   border-color: deepskyblue; }  .form-field input:focus {   border-color: mediumseagreen; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0436\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.form-field:hover {   color: deepskyblue; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/nx\/5x\/1-\/nx5x1-wb4gqjxjcubojukrfsztu.png\" data-src=\"https:\/\/habrastorage.org\/webt\/nx\/5x\/1-\/nx5x1-wb4gqjxjcubojukrfsztu.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>div<\/code> \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u044b\u043c (focusable):<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.form-field:focus {   color: mediumseagreen; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 <code>:focus-within<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.form-field:focus-within {   color: mediumseagreen; }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62f105e19c344d33ecf9773f\" data-style=\"\" id=\"62f105e19c344d33ecf9773f\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"scroll-snap\">Scroll Snap<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/drafts.csswg.org\/css-scroll-snap\/\">Scroll Snap<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u044b (scrollable sliders). \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-snap-type\">scroll-snap-type<\/a> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0442\u0440\u043e\u0433\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043a \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c \u0442\u043e\u0447\u043a\u0430\u043c;<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/scroll-snap-align\">scroll-snap-align<\/a> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 (\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f)<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">scroll-snap-type: x | y | both [mandatory | proximity]; scroll-snap-align: start | center | end;<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/mdn-css_properties_scroll-snap-type\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 scroll-snap-type \u2014 94.98%<\/a>.<br \/>  <a href=\"https:\/\/caniuse.com\/mdn-css_properties_scroll-snap-align\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 scroll-snap-align \u2014 94.75%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0441 \u0442\u0440\u0435\u043c\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043a\u043e\u0442\u0438\u043a\u043e\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"slider\">   &lt;img     src=\"https:\/\/images.unsplash.com\/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1770&amp;q=80\"     alt=\"\"   \/>   &lt;img     src=\"https:\/\/images.unsplash.com\/photo-1598188306155-25e400eb5078?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1548&amp;q=80\"     alt=\"\"   \/>   &lt;img     src=\"https:\/\/images.unsplash.com\/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1768&amp;q=80\"     alt=\"\"   \/> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">* {   margin: 0; }  body {   align-items: center;   display: flex;   height: 100vh;   justify-content: center;   overflow: hidden; }  .slider {   display: flex;   overflow-x: scroll;   position: relative;   \/* ! *\/   scroll-snap-type: x mandatory;   \/* \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 \u0434\u043b\u044f Firefox *\/   scrollbar-color: hotpink whitesmoke;   scrollbar-width: thin;   width: 480px; }  .slider > img {   object-fit: cover;   \/* ! *\/   scroll-snap-align: start;   width: 100%; }  \/* \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0431\u0430\u0440\u0430 \u0434\u043b\u044f Webkit *\/ .slider::-webkit-scrollbar {   height: 6px; }  .slider::-webkit-scrollbar-track {   background-color: whitesmoke; }  .slider::-webkit-scrollbar-thumb {   background-color: hotpink; }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62f105e23a1c1c33c7856cb2\" data-style=\"\" id=\"62f105e23a1c1c33c7856cb2\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"scroll-behavior\">scroll-behavior<\/h3>\n<p>  <\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/scroll-behavior\">scroll-behavior<\/a>, \u043a\u0430\u043a \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 (\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f)<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">scroll-behavior: auto | smooth;<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/css-scroll-behavior\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 91.01%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u0435\u0437 \u043f\u043e\u043c\u043e\u0449\u0438 <code>JavaScript<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;!-- \u044f\u043a\u043e\u0440\u044c --> &lt;a id=\"top\">&lt;\/a>  &lt;div class=\"page-content\">   &lt;p>1&lt;\/p>   &lt;p>2&lt;\/p>   &lt;p>3&lt;\/p>   &lt;p>4&lt;\/p>   &lt;p>5&lt;\/p> &lt;\/div>  &lt;a href=\"#top\" class=\"top-link\">   &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/892\/892692.png\" alt=\"\" \/> &lt;\/a><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">* {   margin: 0; }  html, body {   \/* ! *\/   scroll-behavior: smooth; }  .page-content {   display: flex;   flex-direction: column; }  p {   display: grid;   font-size: 4rem;   height: 100vh;   place-content: center; }  .top-link {   bottom: 1rem;   left: 50%;   position: fixed;   transform: translateX(-50%); }  .top-link img {   width: 40px; }<\/code><\/pre>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/62f105e382bb9f348992c5fe\" data-style=\"\" id=\"62f105e382bb9f348992c5fe\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"accent-color\">accent-color<\/h3>\n<p>  <\/p>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/accent-color\">accent-color<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u0442\u0430\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u0430\u043a <code>&lt;input type=\"checkbox\" \/><\/code>, <code>&lt;input type=\"radio\" \/><\/code>, <code>&lt;input type=\"range\" \/><\/code> \u0438 <code>&lt;progress \/><\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">accent-color: auto | &lt;color>;<\/code><\/pre>\n<p>  <\/p>\n<p><a href=\"https:\/\/caniuse.com\/mdn-css_properties_accent-color\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u2014 87.04%<\/a>.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;input type=\"checkbox\" checked \/> &lt;input type=\"radio\" checked \/> &lt;input type=\"range\" min=\"0\" max=\"10\" value=\"5\" \/> &lt;progress max=\"100\" value=\"50\">&lt;\/progress><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">body {   \/* ! *\/   accent-color: deepskyblue;   align-items: start;   display: flex;   flex-direction: column;   gap: 1rem; }<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/8_\/rm\/kr\/8_rmkrgaqm8aq9iju4lmzl4h6bg.png\" data-src=\"https:\/\/habrastorage.org\/webt\/8_\/rm\/kr\/8_rmkrgaqm8aq9iju4lmzl4h6bg.png\"\/>  <\/p>\n<p>  <\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432, \u0440\u0430\u0434\u0438\u043e-\u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u0442.\u0434.<\/p>\n<p>  <\/p>\n<h2 id=\"buduschie-vozmozhnosti\">\u0411\u0443\u0434\u0443\u0449\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0436\u0434\u0443\u0442 \u043d\u0430\u0441 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"vlozhennost\">\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/h3>\n<p>  <\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/css-nesting-1\/\">\u0412\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/a> \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u0434\u0430\u0432\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432 \u0442\u0430\u043a\u0438\u0445 <code>CSS-\u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\u0445<\/code>, \u043a\u0430\u043a <a href=\"https:\/\/sass-scss.ru\/\">Sass<\/a> \u0438 <a href=\"https:\/\/lesscss.org\/\">Less<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 <code>Sass<\/code>, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 <code>&amp;<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;article class=\"article\">   &lt;h2 class=\"title\">Title&lt;\/h2>   &lt;div class=\"info\">     &lt;p class=\"author\">Author&lt;\/p>     &lt;time datetime=\"2022-08-01\" class=\"date\">01.08.2022&lt;\/time>   &lt;\/div>   &lt;p class=\"summary\">Summary&lt;\/p> &lt;\/article><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 *\/ .article {     &amp; .info {         \/* .article .info .author *\/         &amp; .author {           \/* ... *\/         }     } } \/* \u0432 Sass \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c `&amp;` *\/ .article {     .info {         .author {           \/* ... *\/         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 <code>Sass<\/code> \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e, \u0441\u0443\u0434\u044f \u043f\u043e \u0432\u0441\u0435\u043c\u0443, \u0432 <code>CSS<\/code> \u043d\u0435\u043b\u044c\u0437\u044f \u0431\u0443\u0434\u0435\u0442 &#171;\u0441\u043a\u043b\u0435\u0438\u0432\u0430\u0442\u044c&#187; \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;article class=\"article\">   &lt;h2 class=\"article__title\">Title&lt;\/h2> &lt;\/article><\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 <code>Sass<\/code> \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.article {   &amp;__title {     \/* ... *\/   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u043d\u0430 <a href=\"https:\/\/web-standards.ru\/articles\/css-nesting\/\">\u044d\u0442\u0443 \u0441\u0442\u0430\u0442\u044c\u044e<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"has\">:has()<\/h3>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f-\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/CSS\/:has\">:has()<\/a> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0445\u043e\u0442\u044f \u0431\u044b \u0441 \u043e\u0434\u043d\u0438\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. \u041f\u0440\u0435\u043b\u0435\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">:has(selector1, selector2, ...selectorN) {}<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440\u044b<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">\/* \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0442\u043e\u043c\u043a\u043e\u0432 *\/ a:has(> img) {}  \/* \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c `img`, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 `figure`, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 `figcaption` *\/ figure:has(figcaption) img {}<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"color-mix\">color-mix()<\/h3>\n<p>  <\/p>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color_value\/color-mix\">color-mix<\/a> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 2 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0445 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044f \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0438 \u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u043d\u0442. \u0414\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <code>LCH<\/code>.<\/p>\n<p>  <\/p>\n<p>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">color-mix(in &lt;colorspace>?, &lt;color1> &lt;percentage>?, &lt;color2> &lt;percentage>?)<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=\"box brand\">&lt;\/div> &lt;div class=\"box darken\">&lt;\/div> &lt;div class=\"box lighter\">&lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">:root {   --brand: deepskyblue;   \/* ! *\/   --darken: color-mix(var(--brand) 25%, #333);   --lighter: color-mix(var(--brand) 25%, #eee); }  .box {   width: 100px;   height: 100px; }  .box.brand {   background-color: var(--brand); }  .box.darken {   background-color: var(--darken); }  .box.lighter {   background-color: var(--lighter); }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"scope\"><a href=\"https:\/\/habr.com\/ru\/users\/scope\/\" class=\"user_link\">scope<\/a><\/h3>\n<p>  <\/p>\n<p>\u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <a href=\"https:\/\/www.w3.org\/TR\/css-scoping-1\/\">@scope<\/a> \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">@scope &lt;selector> {   &lt;stylesheet> }<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<p>\u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043f\u0440\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.article {     &amp; .info {         &amp; .author {           \/* ... *\/         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.section {     &amp; .info {         &amp; .author {           \/* ... *\/         }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 <code>.article .info .author<\/code> \u0438 <code>.section .info .author<\/code> \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0438 \u0441\u0442\u0438\u043b\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 <code>.section<\/code>, \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0448\u0443\u0442 \u0441\u0442\u0438\u043b\u0438, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 <code>.article<\/code>. <code>@scope<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">@scope .article {   \/* \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c `article` *\/   &amp; .info {       &amp; .author {         \/* ... *\/       }   } }  @scope .section {   \/* \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u043c\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c `section` *\/   &amp; .info {       &amp; .author {         \/* ... *\/       }   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e\u0441\u0442\u0438 \u0440\u0430\u0434\u0438 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u2014 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@layer\">@layer<\/a>, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0441\u043b\u043e\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 (cascade layers). \u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u044d\u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 <code>CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445<\/code>, \u0447\u0435\u043c \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>@layer<\/code> \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u043a\u0430\u043a <a href=\"https:\/\/tailwindcss.com\/\">TailwindCSS<\/a>.<\/p>\n<p>  <\/p>\n<h3 id=\"selectmenu\">selectmenu<\/h3>\n<p>  <\/p>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <a href=\"https:\/\/open-ui.org\/prototypes\/selectmenu\">selectmenu<\/a> \u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 <code>select<\/code>.<\/p>\n<p>  <\/p>\n<p><strong>\u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"css\">selectmenu::part(&lt;part>) {}<\/code><\/pre>\n<p>  <\/p>\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;selectmenu class=\"select-menu\">   &lt;option>Option 1&lt;\/option>   &lt;option>Option 2&lt;\/option>   &lt;option>Option 3&lt;\/option> &lt;\/selectmenu><\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"css\">.select-menu::part(button) {   background-color: #f00;   border-radius: 5px;   color: white;   padding: 5px; }  .select-menu::part(listbox) {   border-radius: 5px;   border: 1px solid red;   margin-top: 5px;   padding: 10px; }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"anchor\">anchor()<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/github.com\/MicrosoftEdge\/MSEdgeExplainers\/blob\/main\/CSSAnchoredPositioning\/explainer.md\">anchor()<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>position: relative<\/code> \u0438 <code>position: absolute<\/code>. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0438\u0445 \u043c\u0435\u0441\u0442\u0430 \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 <code>DOM<\/code>.<\/p>\n<p>  <\/p>\n<p><code>anchor()<\/code> \u0442\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0444\u0438\u0447\u0438. \u041f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 (\u0434\u0430, \u044d\u0442\u043e \u0446\u0435\u043b\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0430 \u043d\u0435 \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f).<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043d\u043e\u0432\u044b\u0445 \u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 <code>CSS<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 <a href=\"https:\/\/web.dev\/state-of-css-2022\/\">\u044d\u0442\u043e\u0439 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435<\/a>.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u044d\u0442\u043e \u0432\u0441\u0435, \u0447\u0435\u043c \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u0443\u0437\u043d\u0430\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u0438 \u043d\u0435 \u0437\u0440\u044f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p>  <\/p>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 happy coding!<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/company\/timeweb\/blog\/681422\/\"> https:\/\/habr.com\/ru\/company\/timeweb\/blog\/681422\/<\/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\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gi\/pt\/o1\/gipto1m4fdqss_8dtly1lbbodek.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gi\/pt\/o1\/gipto1m4fdqss_8dtly1lbbodek.jpeg\" data-blurred=\"true\"\/>  <\/p>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0442, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u043c\u0435\u0442\u043a\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u0432\u0430\u043c \u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c <code>CSS<\/code>. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 &#171;\u0444\u0438\u0447\u0430\u0445&#187;, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0436\u0434\u0443\u0442 \u043d\u0430\u0441 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 2 \u0433\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<p>&#171;\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0439&#187; \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u044f \u043b\u0438\u0431\u043e \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0444\u0438\u0447\u0443 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043b\u0438\u0431\u043e \u0441 \u043d\u0435\u0442\u0435\u0440\u043f\u0435\u043d\u0438\u0435\u043c \u0436\u0434\u0443 \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\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-336835","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/336835","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=336835"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/336835\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=336835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=336835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=336835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}