{"id":1131,"date":"2017-11-03T13:54:25","date_gmt":"2017-11-03T10:54:25","guid":{"rendered":"http:\/\/starhack.ru\/?p=1131"},"modified":"2021-01-11T16:01:07","modified_gmt":"2021-01-11T13:01:07","slug":"interaction-media-features","status":"publish","type":"post","link":"http:\/\/starhack.ru\/interaction-media-features\/","title":{"rendered":"Interaction Media Features"},"content":{"rendered":"<p>Interaction Media Features &#8212; \u044d\u0442\u043e \u0442\u0438\u043f \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u043c \u043f\u0443\u0442\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c <a href=\"https:\/\/www.w3.org\/TR\/mediaqueries-4\/#mf-interaction\">\u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c<\/a>.<br \/>\n\u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u0447-\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043c\u044b\u0448\u043a\u043e\u0439.<br \/>\n\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e <code>:hover<\/code>. \u041d\u043e \u043d\u0430 \u0442\u0430\u0447-\u0434\u0435\u0432\u0430\u0439\u0441\u0430\u0445 \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441. \u0418 \u0432\u043e\u0442 \u0442\u0443\u0442 \u043d\u0430\u043c \u043a\u0430\u043a \u0440\u0430\u0437 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441.<br \/>\n\u0412\u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430:<br \/>\n<strong>HTML<\/strong><\/p>\n<pre><code>&lt;div class=\"parent\"&gt;\n  parent\n  &lt;div class=\"child\"&gt;child&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p><strong>CSS<\/strong><\/p>\n<pre><code>.parent:not(:hover) .child {\n  \/* \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c child \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043d\u0430 parent'\u0430 *\/\n  display: none;\n}\n@media (hover:none) {\n  .child {\n\/* \u0430 \u0442\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e child \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0435\u043d \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u0433\u0434\u0435 hover \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 *\/\n    display: block!important;\n  }\n}\n<\/code><\/pre>\n<p>\u0418 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441 \u0442\u0430\u0447-\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0442\u043e, \u0447\u0442\u043e \u043d\u0430 \u0435\u043c\u0443 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u0431\u0435\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <code>:hover<\/code>.<br \/>\n\u0418 \u0436\u0438\u0432\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 codepen.<\/p>\n<p class=\"codepen\" data-height=\"147\" data-theme-id=\"16897\" data-slug-hash=\"WXrYaK\" data-default-tab=\"html,result\" data-user=\"oknechirik\" data-embed-version=\"2\" data-pen-title=\"Interaction Media Features\">See the Pen <a href=\"https:\/\/codepen.io\/oknechirik\/pen\/WXrYaK\/\">Interaction Media Features<\/a> by Sergey Kirichenko (<a href=\"https:\/\/codepen.io\/oknechirik\">@oknechirik<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async=\"\" src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\n\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440 \u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0432\u0438\u0434 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e.<br \/>\n<img loading=\"lazy\" class=\"aligncenter size-medium wp-image-1135\" src=\"http:\/\/starhack.ru\/wp-content\/uploads\/2017\/11\/toggle-device-toolbar-300x81.png\" alt=\"Toggle device toolbar\" width=\"300\" height=\"81\" srcset=\"http:\/\/starhack.ru\/wp-content\/uploads\/2017\/11\/toggle-device-toolbar-300x81.png 300w, http:\/\/starhack.ru\/wp-content\/uploads\/2017\/11\/toggle-device-toolbar.png 614w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p><a href=\"http:\/\/caniuse.com\/#search=Interaction%20Media%20Features\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438<\/a> \u0443\u0436\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u0430\u044f, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u043c\u0435\u0434\u0438-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Interaction Media Features &#8212; \u044d\u0442\u043e \u0442\u0438\u043f \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a\u0438\u043c \u043f\u0443\u0442\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u0430\u0448\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u0447-\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u043c\u044b\u0448\u043a\u043e\u0439. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e :hover. \u041d\u043e \u043d\u0430 \u0442\u0430\u0447-\u0434\u0435\u0432\u0430\u0439\u0441\u0430\u0445 \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 &hellip; <a href=\"http:\/\/starhack.ru\/interaction-media-features\/\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435 <span class=\"screen-reader-text\">Interaction Media Features<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,13,63],"tags":[],"_links":{"self":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts\/1131"}],"collection":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/comments?post=1131"}],"version-history":[{"count":6,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts\/1131\/revisions"}],"predecessor-version":[{"id":1272,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/posts\/1131\/revisions\/1272"}],"wp:attachment":[{"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/media?parent=1131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/categories?post=1131"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/starhack.ru\/wp-json\/wp\/v2\/tags?post=1131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}