{"id":323137,"date":"2021-05-14T15:01:07","date_gmt":"2021-05-14T15:01:07","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=323137"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=323137","title":{"rendered":"\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 toggle"},"content":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<blockquote>\n<p>\u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u0430<a href=\"https:\/\/otus.pw\/eOcR\/\">&nbsp;<strong>&#171;HTML\/CSS&#187;.<\/strong><\/a><\/p>\n<p>\u041f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0432\u0441\u0435\u0445 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a&nbsp;<a href=\"https:\/\/otus.pw\/kQho\/\"><strong>\u00abCSS Reset \u2014 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 \u0438\u043b\u0438 \u0441\u043f\u0430\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0440\u0443\u0433\u00bb.<\/strong><\/a><strong>&nbsp;<\/strong>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0435\u0431\u0438\u043d\u0430\u0440\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c CSS Reset, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.  <\/p>\n<\/blockquote>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/78e\/72a\/247\/78e72a247830124d69f28a3f5f827998.png\" width=\"780\" height=\"439\"><figcaption><\/figcaption><\/figure>\n<hr>\n<p>Toggles (\u0438\u043b\u0438 \u0438\u0445 \u0435\u0449\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 &#171;\u0442\u0443\u043c\u0431\u043b\u0435\u0440\u044b&#187;\/&#187;\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0438&#187;) \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445. \u041e\u043d\u0438, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b, \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0444\u043b\u0430\u0436\u043a\u0438 (checkbox). \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0438\u0445 \u0447\u0430\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e toggle \u043d\u0430 HTML + CSS, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e.<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/p>\n<\/li>\n<li>\n<p>The toggle \u0438 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 handle<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0430\u0432\u043e-\u043b\u0435\u0432\u043e<\/p>\n<\/li>\n<li>\n<p>\u0418\u043a\u043e\u043d\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d3b\/675\/e19\/d3b675e19d3fbc0fe786deee22781647.png\" width=\"1564\" height=\"586\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440:<\/strong> \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>toggle<\/code>, \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438. Toggles \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438, \u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043a\u043d\u043e\u043f\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h3>\n<p>\u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 HTML. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u044b\u0445 \u043e\u0441\u043d\u043e\u0432, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u043b\u0430\u0436\u043a\u0430. \u042d\u0442\u043e <code>input<\/code> \u0441 <code>&lt;label&gt;<\/code>, \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043c\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u0415\u0441\u043b\u0438 <code>toggle<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043c\u044b) \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 JavaScript, \u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c &lt;button&gt;. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a<a href=\"https:\/\/kittygiraudel.com\/2021\/04\/05\/an-accessible-toggle\/#button-variant\"><u> \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0438<\/u><\/a> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 &#8212; <a href=\"https:\/\/kittygiraudel.com\/2021\/04\/05\/an-accessible-toggle\/#styles\"><u>\u0441\u0442\u0438\u043b\u0438<\/u><\/a>, \u043f\u043e \u0441\u0443\u0442\u0438, \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b. \u0421\u043f\u0430\u0441\u0438\u0431\u043e Adrian Roselli \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u043d\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e!<\/p>\n<pre><code class=\"vhdl\">&lt;label class=\"Toggle\" for=\"toggle\"&gt;   &lt;input type=\"checkbox\" name=\"toggle\" id=\"toggle\" class=\"Toggle__input\" \/&gt;   This is the label &lt;\/label&gt;<\/code><\/pre>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 2 radio inputs. Sara Soueidan \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/www.sarasoueidan.com\/blog\/toggle-switch-design\/\"><u>\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 toggle.<\/u><\/a><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0444\u043b\u0430\u0436\u043a\u0430, \u043f\u043e\u043b\u0430\u0433\u0430\u044f\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0446\u0432\u0435\u0442 <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\"><u>(\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0439 \u0443\u0441\u043f\u0435\u0445\u0430 WCAG 1.4.1 &#171;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430&#187;)<\/u><\/a>, \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0443 \u0438\u043a\u043e\u043d\u043e\u043a.<\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u0435\u0436\u0434\u0443 \u0432\u0432\u043e\u0434\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043c\u0435\u0442\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c 2 \u0438\u043a\u043e\u043d\u043a\u0438: \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0438 \u043a\u0440\u0435\u0441\u0442\u0438\u043a (\u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u0438\u043a\u043e\u043d\u043e\u043a<a href=\"https:\/\/material.io\/resources\/icons\/\"><u> Material UI<\/u><\/a>). \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c toggle handle \u0441 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u0438\u043a\u043e\u043d\u043e\u043a \u0437\u0430 \u0440\u0430\u0437.<\/p>\n<pre><code class=\"xml\">&lt;label class=\"Toggle\" for=\"toggle\"&gt;   &lt;input type=\"checkbox\" name=\"toggle\" id=\"toggle\" class=\"Toggle__input\" \/&gt;    &lt;span class=\"Toggle__display\" hidden&gt;     &lt;svg       aria-hidden=\"true\"       focusable=\"false\"       class=\"Toggle__icon Toggle__icon--checkmark\"       width=\"18\"       height=\"14\"       viewBox=\"0 0 18 14\"       fill=\"none\"       xmlns=\"http:\/\/www.w3.org\/2000\/svg\"     &gt;       &lt;path         d=\"M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z\"         fill=\"currentcolor\"         stroke=\"currentcolor\"       \/&gt;     &lt;\/svg&gt;     &lt;svg       aria-hidden=\"true\"       focusable=\"false\"       class=\"Toggle__icon Toggle__icon--cross\"       width=\"13\"       height=\"13\"       viewBox=\"0 0 13 13\"       fill=\"none\"       xmlns=\"http:\/\/www.w3.org\/2000\/svg\"     &gt;       &lt;path         d=\"M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z\"         fill=\"currentcolor\"       \/&gt;     &lt;\/svg&gt;   &lt;\/span&gt;    This is the label &lt;\/label&gt;<\/code><\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>aria-hidden=\"true\"<\/code> &nbsp;\u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 SVG, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0443\u0433\u0443\u0431\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>focusable=\"false\"<\/code> \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 SVG, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 Internet Explorer, \u0433\u0434\u0435 SVG \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>hidden <\/code>\u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>.Toggle__display<\/code> , \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 CSS \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0444\u043b\u0430\u0436\u043a\u0443. \u0415\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0432 CSS.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0438\u043b\u0438&nbsp;<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u0438\u043c\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u0447\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 &#8212; \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 <code>&lt;label&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0430\u043a <code>toggle<\/code>, \u0442\u0430\u043a \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u043c\u0435\u0442\u043a\u0443 (<code>.Toggle<\/code>).<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>Toggle &#8212; \u044d\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0443\u043c\u0431\u043b\u0435\u0440, \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0438\u043b\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430, \u0441 2 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 (<code>.Toggle__display<\/code>).<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>Handle &#8212; \u044d\u0442\u043e \u043a\u0440\u0443\u0433\u043b\u044b\u0439 \u0434\u0438\u0441\u043a, \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u043f\u0440\u0430\u0432\u043e \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 <code>toggle<\/code>&nbsp; (<code>.Toggle__display::before<\/code>).<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>Input &#8212; \u0412\u0445\u043e\u0434 &#8212; \u044d\u0442\u043e HTML <code>&lt;input&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442, \u043d\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u044b\u043c (<code>.Toggle__input<\/code>).<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"xml\">\/**  * 1. Vertically center the toggle and the label. `flex` could be used if a   *    block-level display is preferred.  * 2. Make sure the toggle remains clean and functional even if the label is  *    too wide to fit on one line. Thanks @jouni_kantola for the heads up!  * 3. Grant a position context for the visually hidden and absolutely  *    positioned input.  * 4. Provide spacing between the toggle and the text regardless of layout  *    direction. If browser support is considered insufficient, use  *    a right margin on `.Toggle__display` in LTR, and left margin in RTL.  *    See: https:\/\/caniuse.com\/flexbox-gap  *\/ .Toggle {   display: inline-flex; \/* 1 *\/   align-items: center; \/* 1 *\/   flex-wrap: wrap; \/* 2 *\/   position: relative; \/* 3 *\/   gap: 1ch; \/* 4 *\/ }<\/code><\/pre>\n<h3>Toggle \u0438 handle<\/h3>\n<p>\u0417\u0430\u0442\u0435\u043c &#8212; \u043d\u0430\u0448 toggle. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0435\u0439, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432\u043e\u043a\u0440\u0443\u0433 handle \u0438 \u0435\u0433\u043e \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430.<\/p>\n<pre><code class=\"xml\">\/**  * 1. Vertically center the icons and space them evenly in the available   *    horizontal space, essentially giving something like: [  \u2717 ]  * 2. Size the display according to the size of the handle. `box-sizing`  *    could use `border-box` but the border would have to be considered  *    in the `width` computation. Either way works.  * 3. For the toggle to be visible in Windows High-Contrast Mode, we apply a  *    thin semi-transparent (or fully transparent) border.  *    Kind thanks to Adrian Roselli for the tip:  *    https:\/\/twitter.com\/aardrian\/status\/1379786724222631938?s=20  * 4. Grant a position context for the pseudo-element making the handle.  * 5. Give a pill-like shape with rounded corners, regardless of the size.  * 6. The default state is considered unchecked, hence why this pale red is  *    used as a background color.  *\/ .Toggle__display {   --offset: 0.25em;   --diameter: 1.8em;    display: inline-flex; \/* 1 *\/   align-items: center; \/* 1 *\/   justify-content: space-around; \/* 1 *\/    width: calc(var(--diameter) * 2 + var(--offset) * 2); \/* 2 *\/   height: calc(var(--diameter) + var(--offset) * 2); \/* 2 *\/   box-sizing: content-box; \/* 2 *\/    border: 0.1em solid rgb(0 0 0 \/ 0.2); \/* 3 *\/    position: relative; \/* 4 *\/   border-radius: 100vw; \/* 5 *\/   background-color: #fbe4e2; \/* 6 *\/    transition: 250ms;   cursor: pointer; }  \/**  * 1. Size the round handle according to the diameter custom property.  * 2. For the handle to be visible in Windows High-Contrast Mode, we apply a  *    thin semi-transparent (or fully transparent) border.  *    Kind thanks to Adrian Roselli for the tip:  *    https:\/\/twitter.com\/aardrian\/status\/1379786724222631938?s=20  * 3. Absolutely position the handle on top of the icons, vertically centered  *    within the container and offset by the spacing amount on the left.  * 4. Give the handle a solid background to hide the icon underneath. This  *    could be dark in a dark mode theme, as long as it\u2019s solid.  *\/ .Toggle__display::before {   content: '';    width: var(--diameter); \/* 1 *\/   height: var(--diameter); \/* 1 *\/   border-radius: 50%; \/* 1 *\/    box-sizing: border-box; \/* 2 *\/   border: 0.1 solid rgb(0 0 0 \/ 0.2); \/* 2 *\/    position: absolute; \/* 3 *\/   z-index: 2; \/* 3 *\/   top: 50%; \/* 3 *\/   left: var(--offset); \/* 3 *\/   transform: translate(0, -50%); \/* 3 *\/    background-color: #fff; \/* 4 *\/   transition: inherit; }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0437\u0434\u0435\u0441\u044c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e handle \u043f\u043b\u0430\u0432\u043d\u043e \u0441\u043a\u043e\u043b\u044c\u0437\u0438\u0442 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0432 \u0434\u0440\u0443\u0433\u0443\u044e. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043b\u044e\u0434\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u043a\u043e\u0433\u0434\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/kittygiraudel.com\/2018\/03\/19\/implementing-a-reduced-motion-mode\/\"><u>reduced-motion <\/u><\/a>(\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f). \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"xml\">@media (prefers-reduced-motion: reduce) {   .Toggle__display {     transition-duration: 0ms;   } }<\/code><\/pre>\n<h3>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430<\/h3>\n<p>\u041c\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>toggle <\/code>\u043f\u043e\u0441\u043b\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u0441\u043c\u0435\u0436\u043d\u044b\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 ( + )\u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>toggle <\/code>\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u0432\u043e\u0434\u0430 (\u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d, \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d&#8230;).<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430. \u0414\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043e\u043d\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u044b, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c, \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0440\u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0443\u0440 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 <code>toggle<\/code>, \u043a\u043e\u0433\u0434\u0430 \u0432\u0445\u043e\u0434 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n<pre><code class=\"xml\">\/**  * 1. When the input is focused, provide the display the default outline  *    styles from the browser to mimic a native control. This can be  *    customised to have a custom focus outline.  *\/ .Toggle__input:focus + .Toggle__display {   outline: 1px dotted #212121; \/* 1 *\/   outline: 1px auto -webkit-focus-ring-color; \/* 1 *\/ }<\/code><\/pre>\n<p>\u042f \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043e\u0434\u043d\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0432\u0435\u0449\u044c: \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0440\u043e\u0434\u043d\u043e\u0439 \u0444\u043b\u0430\u0436\u043e\u043a \u0438\u043b\u0438 \u0435\u0433\u043e \u043c\u0435\u0442\u043a\u0443 \u043a\u043e\u043d\u0442\u0443\u0440 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0435 \u0444\u043b\u0430\u0436\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0443\u0434\u0430\u043b\u0438\u0432 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-visible\/\">:focus-visible<\/a> \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/p>\n<pre><code class=\"xml\">\/**  * 1. When the toggle is interacted with with a mouse click (and therefore  *    the focus does not have to be \u2018visible\u2019 as per browsers heuristics),  *    remove the focus outline. This is the native checkbox\u2019s behaviour where  *    the focus is not visible when clicking it.  *\/ .Toggle__input:focus:not(:focus-visible) + .Toggle__display {   outline: 0; \/* 1 *\/ }<\/code><\/pre>\n<h3>\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h3>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0435 \u0432\u0435\u0449\u0438: \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 <code>toggle <\/code>\u0441 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u043d\u0430 \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0438 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c <code>handle <\/code>\u0432\u043f\u0440\u0430\u0432\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0437\u0430\u043a\u0440\u044b\u043b \u043a\u0440\u0435\u0441\u0442\u0438\u043a \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0433\u0430\u043b\u043e\u0447\u043a\u0443 (100% \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b).<\/p>\n<pre><code class=\"xml\">\/**  * 1. When the input is checked, change the display background color to a  *    pale green instead.   *\/ .Toggle__input:checked + .Toggle__display {   background-color: #e3f5eb; \/* 1 *\/ }  \/**  * 1. When the input is checked, slide the handle to the right so it covers  *    the cross icon instead of the checkmark one.  *\/ .Toggle__input:checked + .Toggle__display::before {   transform: translate(100%, -50%); \/* 1 *\/ }<\/code><\/pre>\n<p><a href=\"https:\/\/twitter.com\/aardrian\/status\/1379776239838322689?s=20\"><u>Adrian Rosell<\/u><\/a>i \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u044d\u0442\u0430 \u0441\u0445\u0435\u043c\u0430 \u043d\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0435 &#171;\u0441\u043c\u0435\u0448\u0430\u043d\u043d\u043e\u0435&#187; (\u0438\u043b\u0438 &#171;<a href=\"https:\/\/css-tricks.com\/indeterminate-checkboxes\/\"><u>\u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435<\/u><\/a>&#187; \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435). \u042d\u0442\u043e \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0444\u043b\u0430\u0436\u043a\u043e\u0432\/\u0442\u0443\u043c\u0431\u043b\u0435\u0440\u043e\u0432 \u043d\u0435 \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438, \u043d\u043e \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<h3>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h3>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 toggle \u0431\u043e\u043b\u0435\u0435 \u044f\u0432\u043d\u044b\u043c.<\/p>\n<pre><code class=\"xml\">\/**  * 1. When the input is disabled, tweak the toggle styles so it looks dimmed   *    with less sharp colors, softer opacity and a relevant cursor.  *\/ .Toggle__input:disabled + .Toggle__display {   opacity: 0.6; \/* 1 *\/   filter: grayscale(40%); \/* 1 *\/   cursor: not-allowed; \/* 1 *\/ }<\/code><\/pre>\n<h3>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0430\u0432\u043e-\u043b\u0435\u0432\u043e<\/h3>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u044f \u0437\u0430\u0431\u044b\u043b \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u043f\u0440\u0430\u0432\u043e-\u043b\u0435\u0432\u043e, \u0438 Adrian Roselli \u0431\u044b\u043b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u044e\u0431\u0435\u0437\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u043d\u0435 \u043d\u0430 \u044d\u0442\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043e\u0431\u043d\u043e\u0432\u0438\u043b \u043a\u043e\u0434. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441 :dir() , \u043d\u043e, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442<a href=\"https:\/\/caniuse.com\/css-dir-pseudo\"><u> \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0435\u0433\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043b\u043e\u0445<\/u><\/a><u>\u043e<\/u>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 [dir].<\/p>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>handle<\/code>.<\/p>\n<pre><code class=\"xml\">\/**  * 1. Flip the original position of the unchecked toggle in RTL.  *\/ [dir='rtl'] .Toggle__display::before {   left: auto; \/* 1 *\/   right: var(--offset); \/* 1 *\/ }  \/**  * 1. Move the handle in the correct direction in RTL.  *\/ [dir='rtl'] .Toggle__input:checked + .Toggle__display::before {   transform: translate(-100%, -50%); \/* 1 *\/ }<\/code><\/pre>\n<h3>\u0418\u043a\u043e\u043d\u043a\u0438<\/h3>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043a \u043d\u0430\u0448\u0438\u043c \u0438\u043a\u043e\u043d\u043a\u0430\u043c, \u043a\u0430\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442<a href=\"https:\/\/fvsch.com\/svg-icons#section-styling\"><u> Florens Verschelde \u0432 \u0441\u0432\u043e\u0435\u043c \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u043e SVG-\u0438\u043a\u043e\u043d\u043a\u0430\u043c:<\/u><\/a><\/p>\n<pre><code class=\"xml\">.Toggle__icon {   display: inline-block;   width: 1em;   height: 1em;   color: inherit;   fill: currentcolor;   vertical-align: middle; }  \/**  * 1. The cross looks visually bigger than the checkmark so we adjust its  *    size. This might not be needed depending on the icons.  *\/ .Toggle__icon--cross {   color: #e74c3c;   font-size: 85%; \/* 1 *\/ }  .Toggle__icon--checkmark {   color: #1fb978; }<\/code><\/pre>\n<h3>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438<\/h3>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043b\u0430\u0436\u043a\u0430 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439. \u0415\u0441\u043b\u0438 toggle \u0438\u043c\u0435\u0435\u0442 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 (\u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 JavaScript), \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;button&gt;<\/code> \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>aria-pressed<\/code>.<\/p>\n<p>Adrian Roselli \u0432 \u0441\u0432\u043e\u0435\u043c <a href=\"https:\/\/adrianroselli.com\/2019\/08\/under-engineered-toggles-too.html\"><u>\u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0435 \u043e toggles <\/u><\/a>\u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u043c\u0435\u0436\u0434\u0443 \u0444\u043b\u0430\u0436\u043a\u043e\u043c \u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439.<\/p>\n<p>\u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u043d\u0430\u0448 \u043a\u043e\u0434 \u043b\u0435\u0433\u043a\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u043a\u043d\u043e\u043f\u043a\u0430. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c HTML \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e <code>&lt;label&gt;<\/code> \u0441\u0442\u0430\u043d\u0435\u0442 <code>&lt;button&gt;<\/code>, \u0430 <code>&lt;input&gt;<\/code> \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043b\u0435\u043d.<\/p>\n<pre><code class=\"xml\">&lt;button class=\"Toggle\" type=\"button\" aria-pressed=\"false\"&gt;   &lt;span class=\"Toggle__display\" hidden&gt;     &lt;!-- The toggle does not change at all --&gt;   &lt;\/span&gt;   This is the label &lt;\/button&gt;<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e <code>&lt;button&gt;<\/code> &nbsp;\u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u0441\u0430\u043c\u0443 \u043a\u043d\u043e\u043f\u043a\u0443. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u0431\u0440\u043e\u0441\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043a\u043e\u043d\u0442\u0443\u0440 \u0444\u043e\u043a\u0443\u0441\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 <code>toggle <\/code>(\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438).<\/p>\n<pre><code class=\"xml\">\/**  * 1. Reset default &lt;button&gt; styles.  *\/ button.Toggle {   border: 0; \/* 1 *\/   padding: 0; \/* 1 *\/   background: transparent; \/* 1 *\/   font: inherit; \/* 1 *\/ }  \/**  * 1. The focus styles are applied on the toggle instead of the container, so  *    the default focus outline can be safely removed.  *\/ .Toggle:focus {   outline: 0; \/* 1 *\/ }<\/code><\/pre>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0432\u0432\u043e\u0434\u043e\u043c, \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0435\u0439 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<pre><code class=\"xml\">+ .Toggle:focus .Toggle__display, .Toggle__input:focus + .Toggle__display {   \/* \u2026 *\/ }  + .Toggle:focus:not(:focus-visible) .Toggle__display, .Toggle__input:focus:not(:focus-visible) + .Toggle__display {   \/* \u2026 *\/ }  + .Toggle[aria-pressed=\"true\"] .Toggle__display::before, .Toggle__input:checked + .Toggle__display::before {   \/* \u2026 *\/ }  + .Toggle[disabled] .Toggle__display, .Toggle__input:disabled + .Toggle__display {   \/* \u2026 *\/ }  + [dir=\"rtl\"] .Toggle[aria-pressed=\"true\"] + .Toggle__display::before, [dir=\"rtl\"] .Toggle__input:checked + .Toggle__display::before {   \/* \u2026 *\/ }<\/code><\/pre>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435! \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0444\u043b\u0430\u0436\u043a\u0430, \u043b\u0438\u0431\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043a\u043d\u043e\u043f\u043a\u0438, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u0438 \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0432 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445. \u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e!<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435&nbsp;<\/h3>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043d\u0438\u0447\u0435\u0433\u043e \u043e\u0441\u043e\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0430\u0434 \u0447\u0435\u043c \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c. \u0412\u043e\u0442 \u0447\u0435\u0433\u043e \u043c\u044b \u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b \u0444\u043b\u0430\u0436\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u043e\u0434 toggle.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0442\u0430\u0442\u0443\u0441 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043a\u043e\u043d\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0438 \u0446\u0432\u0435\u0442\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 CSS \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0444\u043e\u043a\u0443\u0441\u0443 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d.<\/p>\n<\/li>\n<li>\n<p>\u0423 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0440\u0430\u0432\u043e-\u043b\u0435\u0432\u043e.<\/p>\n<\/li>\n<li>\n<p>\u041e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043a \u0442\u0435\u043c\u043d\u043e\u043c\u0443 \u0440\u0435\u0436\u0438\u043c\u0443 \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432.<\/p>\n<\/li>\n<\/ul>\n<p>\u0417\u0434\u043e\u0440\u043e\u0432\u043e! \u041d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c <a href=\"https:\/\/codepen.io\/KittyGiraudel\/pen\/xxgrPvg?editors=0100\"><u>\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u043e\u0434\u043e\u043c \u043d\u0430 CodePen<\/u><\/a>, \u0438 \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448\u0438 toggles \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438.  \u0410 \u0442\u0430\u043a\u0436\u0435, \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u0438 \u0441\u0442\u0430\u0442\u044c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/www.sarasoueidan.com\/blog\/toggle-switch-design\/\">Designing and building toggle switches<\/a> \u043e\u0442 Sara Soueidan<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/inclusive-components.design\/toggle-button\/\">Toggle buttons<\/a> \u043e\u0442 Heydon Pickering<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/scottaohara.github.io\/aria-switch-control\/\">ARIA switch controls<\/a> \u043e\u0442 Scott O&#8217;Hara<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/adrianroselli.com\/2019\/08\/under-engineered-toggles-too.html\">Under-engineered toggles<\/a> \u043e\u0442 Adrian Roselli<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/p>\n<p>Dion \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442, \u0447\u0442\u043e <code>toggle <\/code>\u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c <a href=\"https:\/\/twitter.com\/_diondiondion\/status\/1379828760585834497?s=20\"><u>\u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442<\/u><\/a>, \u0438 \u044d\u0442\u043e \u043c\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 Rawrmonstar, \u0430 Mikael Kundert \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442, \u0447\u0442\u043e <a href=\"https:\/\/twitter.com\/iMiksu\/status\/1379802269709897737?s=20\"><u>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043b\u0430\u0436\u043a\u043e\u0432 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u043e\u0449\u0435<\/u><\/a>. <\/p>\n<hr>\n<blockquote>\n<p>\u0423\u0437\u043d\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043a\u0443\u0440\u0441\u0435<a href=\"https:\/\/otus.pw\/eOcR\/\">&nbsp;<strong>&#171;HTML\/CSS&#187;<\/strong><\/a><\/p>\n<p>\u0421\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a&nbsp;<a href=\"https:\/\/otus.pw\/kQho\/\"><strong>\u00abCSS Reset \u2014 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 \u0438\u043b\u0438 \u0441\u043f\u0430\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0440\u0443\u0433\u00bb<\/strong><\/a><\/p>\n<\/blockquote>\n<\/div>\n<p> \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\/otus\/blog\/557006\/\"> https:\/\/habr.com\/ru\/company\/otus\/blog\/557006\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text_v2\" id=\"post-content-body\">\n<blockquote>\n<p>\u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u0443\u0440\u0441\u0430<a href=\"https:\/\/otus.pw\/eOcR\/\">&nbsp;<strong>&#171;HTML\/CSS&#187;.<\/strong><\/a><\/p>\n<p>\u041f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0432\u0441\u0435\u0445 \u0436\u0435\u043b\u0430\u044e\u0449\u0438\u0445 \u043d\u0430 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0443\u0440\u043e\u043a&nbsp;<a href=\"https:\/\/otus.pw\/kQho\/\"><strong>\u00abCSS Reset \u2014 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 \u0438\u043b\u0438 \u0441\u043f\u0430\u0441\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u0440\u0443\u0433\u00bb.<\/strong><\/a><strong>&nbsp;<\/strong>\u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0435\u0431\u0438\u043d\u0430\u0440\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0437\u0430\u0447\u0435\u043c \u043d\u0430\u043c CSS Reset, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.  <\/p>\n<\/blockquote>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<hr>\n<p>Toggles (\u0438\u043b\u0438 \u0438\u0445 \u0435\u0449\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 &#171;\u0442\u0443\u043c\u0431\u043b\u0435\u0440\u044b&#187;\/&#187;\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u0435\u043b\u0438&#187;) \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445. \u041e\u043d\u0438, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b, \u0438 \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0444\u043b\u0430\u0436\u043a\u0438 (checkbox). \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0438\u0445 \u0447\u0430\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0442\u0435\u043c \u0438\u043b\u0438 \u0438\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e toggle \u043d\u0430 HTML + CSS, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e.<\/p>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/p>\n<\/li>\n<li>\n<p>The toggle \u0438 \u0434\u0435\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0440 handle<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430<\/p>\n<\/li>\n<li>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0430\u0432\u043e-\u043b\u0435\u0432\u043e<\/p>\n<\/li>\n<li>\n<p>\u0418\u043a\u043e\u043d\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043a\u043d\u043e\u043f\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p><strong>\u0414\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440:<\/strong> \u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>toggle<\/code>, \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438. Toggles \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438, \u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043a\u043d\u043e\u043f\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/h3>\n<p>\u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 HTML. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u0430\u043c\u044b\u0445 \u043e\u0441\u043d\u043e\u0432, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u0444\u043b\u0430\u0436\u043a\u0430. \u042d\u0442\u043e <code>input<\/code> \u0441 <code>&lt;label&gt;<\/code>, \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043c\u0435\u0442\u043a\u043e\u0439.<\/p>\n<p>\u0415\u0441\u043b\u0438 <code>toggle<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043c\u044b) \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 JavaScript, \u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c &lt;button&gt;. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a<a href=\"https:\/\/kittygiraudel.com\/2021\/04\/05\/an-accessible-toggle\/#button-variant\"><u> \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0443 \u043a\u043d\u043e\u043f\u043a\u0438<\/u><\/a> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 &#8212; <a href=\"https:\/\/kittygiraudel.com\/2021\/04\/05\/an-accessible-toggle\/#styles\"><u>\u0441\u0442\u0438\u043b\u0438<\/u><\/a>, \u043f\u043e \u0441\u0443\u0442\u0438, \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b. \u0421\u043f\u0430\u0441\u0438\u0431\u043e Adrian Roselli \u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u043d\u0430\u0448\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e!<\/p>\n<pre><code class=\"vhdl\">&lt;label class=\"Toggle\" for=\"toggle\"&gt;   &lt;input type=\"checkbox\" name=\"toggle\" id=\"toggle\" class=\"Toggle__input\" \/&gt;   This is the label &lt;\/label&gt;<\/code><\/pre>\n<p>\u0421\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 2 radio inputs. Sara Soueidan \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/www.sarasoueidan.com\/blog\/toggle-switch-design\/\"><u>\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 toggle.<\/u><\/a><\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0444\u043b\u0430\u0436\u043a\u0430, \u043f\u043e\u043b\u0430\u0433\u0430\u044f\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0446\u0432\u0435\u0442 <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\"><u>(\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0439 \u0443\u0441\u043f\u0435\u0445\u0430 WCAG 1.4.1 &#171;\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430&#187;)<\/u><\/a>, \u043c\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0443 \u0438\u043a\u043e\u043d\u043e\u043a.<\/p>\n<p>\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043c\u0435\u0436\u0434\u0443 \u0432\u0432\u043e\u0434\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0439 \u043c\u0435\u0442\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c 2 \u0438\u043a\u043e\u043d\u043a\u0438: \u0433\u0430\u043b\u043e\u0447\u043a\u0443 \u0438 \u043a\u0440\u0435\u0441\u0442\u0438\u043a (\u0432\u0437\u044f\u0442\u044b \u0438\u0437 \u0438\u043a\u043e\u043d\u043e\u043a<a href=\"https:\/\/material.io\/resources\/icons\/\"><u> Material UI<\/u><\/a>). \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c toggle handle \u0441 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u0438\u043a\u043e\u043d\u043e\u043a \u0437\u0430 \u0440\u0430\u0437.<\/p>\n<pre><code class=\"xml\">&lt;label class=\"Toggle\" for=\"toggle\"&gt;   &lt;input type=\"checkbox\" name=\"toggle\" id=\"toggle\" class=\"Toggle__input\" \/&gt;    &lt;span class=\"Toggle__display\" hidden&gt;     &lt;svg       aria-hidden=\"true\"       focusable=\"false\"       class=\"Toggle__icon Toggle__icon--checkmark\"       width=\"18\"       height=\"14\"       viewBox=\"0 0 18 14\"       fill=\"none\"       xmlns=\"http:\/\/www.w3.org\/2000\/svg\"     &gt;       &lt;path         d=\"M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z\"         fill=\"currentcolor\"         stroke=\"currentcolor\"       \/&gt;     &lt;\/svg&gt;     &lt;svg       aria-hidden=\"true\"       focusable=\"false\"       class=\"Toggle__icon Toggle__icon--cross\"       width=\"13\"       height=\"13\"       viewBox=\"0 0 13 13\"       fill=\"none\"       xmlns=\"http:\/\/www.w3.org\/2000\/svg\"     &gt;       &lt;path         d=\"M11.167 0L6.5 4.667L1.833 0L0 1.833L4.667 6.5L0 11.167L1.833 13L6.5 8.333L11.167 13L13 11.167L8.333 6.5L13 1.833L11.167 0Z\"         fill=\"currentcolor\"       \/&gt;     &lt;\/svg&gt;   &lt;\/span&gt;    This is the label &lt;\/label&gt;<\/code><\/pre>\n<p>\u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>aria-hidden=\"true\"<\/code> &nbsp;\u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 SVG, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0443\u0433\u0443\u0431\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>focusable=\"false\"<\/code> \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 SVG, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 Internet Explorer, \u0433\u0434\u0435 SVG \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>hidden <\/code>\u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 <code>.Toggle__display<\/code> , \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u0440\u044b\u0442\u044c \u0435\u0433\u043e, \u043a\u043e\u0433\u0434\u0430 CSS \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u043c\u0443 \u0444\u043b\u0430\u0436\u043a\u0443. \u0415\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e \u0432 CSS.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0421\u0442\u0438\u043b\u0438&nbsp;<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u0438\u043c\u0441\u044f \u0432 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u0447\u0435 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0439:<\/p>\n<ul>\n<li>\n<p>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 &#8212; \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 <code>&lt;label&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043a\u0430\u043a <code>toggle<\/code>, \u0442\u0430\u043a \u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u043c\u0435\u0442\u043a\u0443 (<code>.Toggle<\/code>).<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>Toggle &#8212; \u044d\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0442\u0443\u043c\u0431\u043b\u0435\u0440, \u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0438\u043b\u0438 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430, \u0441 2 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438 (<code>.Toggle__display<\/code>).<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>Handle &#8212; \u044d\u0442\u043e \u043a\u0440\u0443\u0433\u043b\u044b\u0439 \u0434\u0438\u0441\u043a, \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043e\u0434\u043d\u0443 \u0438\u0437 \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432\u043b\u0435\u0432\u043e \u0438 \u0432\u043f\u0440\u0430\u0432\u043e \u043f\u0440\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 <code>toggle<\/code>&nbsp; (<code>.Toggle__display::before<\/code>).<\/p>\n<\/li>\n<\/ul>\n<ul>\n<li>\n<p>Input &#8212; \u0412\u0445\u043e\u0434 &#8212; \u044d\u0442\u043e HTML <code>&lt;input&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442, \u043d\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u0435\u043c\u044b\u043c (<code>.Toggle__input<\/code>).<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440<\/h3>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<pre><code class=\"xml\">\/**  * 1. Vertically center the toggle and the label. `flex` could be used if a   *    block-level display is preferred.  * 2. Make sure the toggle remains clean and functional even if the label is  *    too wide to fit on one line. Thanks @jouni_kantola for the heads up!  * 3. Grant a position context for the visually hidden and absolutely  *    positioned input.  * 4. Provide spacing between the toggle and the text regardless of layout  *    direction. If browser support is considered insufficient, use  *    a right margin on `.Toggle__display` in LTR, and left margin in RTL.  *    See: https:\/\/caniuse.com\/flexbox-gap  *\/ .Toggle {   display: inline-flex; \/* 1 *\/   align-items: center; \/* 1 *\/   flex-wrap: wrap; \/* 2 *\/   position: relative; \/* 3 *\/   gap: 1ch; \/* 4 *\/ }<\/code><\/pre>\n<h3>Toggle \u0438 handle<\/h3>\n<p>\u0417\u0430\u0442\u0435\u043c &#8212; \u043d\u0430\u0448 toggle. \u0427\u0442\u043e\u0431\u044b \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0435\u0439, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432\u043e\u043a\u0440\u0443\u0433 handle \u0438 \u0435\u0433\u043e \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430.<\/p>\n<pre><code class=\"xml\">\/**  * 1. Vertically center the icons and space them evenly in the available   *    horizontal space, essentially giving something like: [  \u2717 ]  * 2. Size the display according to the size of the handle. `box-sizing`  *    could use `border-box` but the border would have to be considered  *    in the `width` computation. Either way works.  * 3. For the toggle to be visible in Windows High-Contrast Mode, we apply a  *    thin semi-transparent (or fully transparent) border.  *    Kind thanks to Adrian Roselli for the tip:  *    https:\/\/twitter.com\/aardrian\/status\/1379786724222631938?s=20  * 4. Grant a position context for the pseudo-element making the handle.  * 5. Give a pill-like shape with rounded corners, regardless of the size.  * 6. The default state is considered unchecked, hence why this pale red is  *    used as a background color.  *\/ .Toggle__display {   --offset: 0.25em;   --diameter: 1.8em;    display: inline-flex; \/* 1 *\/   align-items: center; \/* 1 *\/   justify-content: space-around; \/* 1 *\/    width: calc(var(--diameter) * 2 + var(--offset) * 2); \/* 2 *\/   height: calc(var(--diameter) + var(--offset) * 2); \/* 2 *\/   box-sizing: content-box; \/* 2 *\/    border: 0.1em solid rgb(0 0 0 \/ 0.2); \/* 3 *\/    position: relative; \/* 4 *\/   border-radius: 100vw; \/* 5 *\/   background-color: #fbe4e2; \/* 6 *\/    transition: 250ms;   cursor: pointer; }  \/**  * 1. Size the round handle according to the diameter custom property.  * 2. For the handle to be visible in Windows High-Contrast Mode, we apply a  *    thin semi-transparent (or fully transparent) border.  *    Kind thanks to Adrian Roselli for the tip:  *    https:\/\/twitter.com\/aardrian\/status\/1379786724222631938?s=20  * 3. Absolutely position the handle on top of the icons, vertically centered  *    within the container and offset by the spacing amount on the left.  * 4. Give the handle a solid background to hide the icon underneath. This  *    could be dark in a dark mode theme, as long as it\u2019s solid.  *\/ .Toggle__display::before {   content: '';    width: var(--diameter); \/* 1 *\/   height: var(--diameter); \/* 1 *\/   border-radius: 50%; \/* 1 *\/    box-sizing: border-box; \/* 2 *\/   border: 0.1 solid rgb(0 0 0 \/ 0.2); \/* 2 *\/    position: absolute; \/* 3 *\/   z-index: 2; \/* 3 *\/   top: 50%; \/* 3 *\/   left: var(--offset); \/* 3 *\/   transform: translate(0, -50%); \/* 3 *\/    background-color: #fff; \/* 4 *\/   transition: inherit; }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434 \u0437\u0434\u0435\u0441\u044c \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e handle \u043f\u043b\u0430\u0432\u043d\u043e \u0441\u043a\u043e\u043b\u044c\u0437\u0438\u0442 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0432 \u0434\u0440\u0443\u0433\u0443\u044e. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u043e\u0440\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043b\u044e\u0434\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434, \u043a\u043e\u0433\u0434\u0430 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f <a href=\"https:\/\/kittygiraudel.com\/2018\/03\/19\/implementing-a-reduced-motion-mode\/\"><u>reduced-motion <\/u><\/a>(\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f). \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"xml\">@media (prefers-reduced-motion: reduce) {   .Toggle__display {     transition-duration: 0ms;   } }<\/code><\/pre>\n<h3>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430<\/h3>\n<p>\u041c\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <code>toggle <\/code>\u043f\u043e\u0441\u043b\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440 \u0441\u043c\u0435\u0436\u043d\u044b\u0445 \u0441\u0438\u0431\u043b\u0438\u043d\u0433\u043e\u0432 ( + )\u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>toggle <\/code>\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432\u0432\u043e\u0434\u0430 (\u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d, \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d&#8230;).<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0444\u043e\u043a\u0443\u0441\u0430. \u0414\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043e\u043d\u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u044b, \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u043c. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c, \u044f \u0440\u0435\u0448\u0438\u043b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0440\u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0443\u0440 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432\u043e\u043a\u0440\u0443\u0433 <code>toggle<\/code>, \u043a\u043e\u0433\u0434\u0430 \u0432\u0445\u043e\u0434 \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n<pre><code class=\"xml\">\/**  * 1. When the input is focused, provide the display the default outline  *    styles from the browser to mimic a native control. This can be  *    customised to have a custom focus outline.  *\/ .Toggle__input:focus + .Toggle__display {   outline: 1px dotted #212121; \/* 1 *\/   outline: 1px auto -webkit-focus-ring-color; \/* 1 *\/ }<\/code><\/pre>\n<p>\u042f \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043e\u0434\u043d\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0443\u044e \u0432\u0435\u0449\u044c: \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0440\u043e\u0434\u043d\u043e\u0439 \u0444\u043b\u0430\u0436\u043e\u043a \u0438\u043b\u0438 \u0435\u0433\u043e \u043c\u0435\u0442\u043a\u0443 \u043a\u043e\u043d\u0442\u0443\u0440 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u043a\u0435 \u0444\u043b\u0430\u0436\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0443\u0434\u0430\u043b\u0438\u0432 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438, \u043a\u043e\u0433\u0434\u0430 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-visible\/\">:focus-visible<\/a> \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442.<\/p>\n<pre><code class=\"xml\">\/**  * 1. When the toggle is interacted with with a mouse click (and therefore  *    the focus does not have to be \u2018visible\u2019 as per browsers heuristics),  *    remove the focus outline. This is the native checkbox\u2019s behaviour where  *    the focus is not visible when clicking it.  *\/ .Toggle__input:focus:not(:focus-visible) + .Toggle__display {   outline: 0; \/* 1 *\/ }<\/code><\/pre>\n<h3>\u041f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/h3>\n<p>\u0417\u0430\u0442\u0435\u043c <\/p>\n<\/hr>\n<\/div>\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-323137","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/323137","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=323137"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/323137\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=323137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=323137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=323137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}