{"id":288196,"date":"2018-08-18T19:55:02","date_gmt":"2018-08-18T15:55:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=288196"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=288196","title":{"rendered":"\u041d\u0435 reset \u0438\u043b\u0438 \u043d\u0435 normalize?"},"content":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/348940\/\" class=\"post__text post__text-html js-mediator-article\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y8\/rw\/hw\/y8rwhwzwhrpubvzgl3wfyiuyy0e.jpeg\"><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439.<br \/>  \u0417\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0443 \u043c\u0435\u043d\u044f \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b, \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e, \u0431\u044b\u043b \u0432\u0437\u044f\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437.<\/p>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437, \u0430 \u043d\u0435 \u0440\u0435\u0441\u0435\u0442. \u041e\u043d \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434 \u043a\u0440\u043e\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e. \u041d\u043e \u0432 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u043c\u0435\u043d\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0431\u043e\u0440\u0434\u0435\u0440\u044b \u0438 \u0442. \u0434. \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0448\u0430\u043b\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0433\u043d\u0430\u043b \u0435\u0433\u043e \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0443\u0434\u0430\u043b\u044f\u0432 \u0442\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <br \/>  \u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0444\u0430\u0439\u043b \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0441\u044f, \u043b\u0438\u0448\u043d\u0435\u0435 \u0438\u0437 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437\u0430 \u0443\u0434\u0430\u043b\u044f\u043b\u043e\u0441\u044c, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u043e\u0441\u044c. <br \/>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u044b\u043b\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u044d\u043a\u0442\u0430, \u0447\u0442\u043e \u043f\u043e-\u043c\u043e\u0435\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0434\u0430\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u0430\u0447\u043d\u043e. \u0424\u0430\u0439\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u043e\u0439 \u043f\u0440\u043e\u044d\u043a\u0442\u0430 \u0432 \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043a\u043e\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0432\u044b \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0435\u0442\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c.<br \/>  <a href=\"https:\/\/yurch-html.github.io\/dist\/custom-reset.html\">custom-reset.css<\/a><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c <b>\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0435\u0433\u043e\u0432<\/b> \u0431\u0435\u0437 \u0443\u0449\u0435\u0440\u0431\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0435. \u0427\u0442\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443 <b>DRY<\/b>( \u2014 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u044a\u0435\u043c\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0433\u043e \u0434\u043b\u044f \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439).  <\/li>\n<li>\u041f\u043e\u043b\u043d\u043e\u0435 \u043e\u0431\u043d\u0443\u043b\u0435\u043d\u0438\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043c\u0443\u0441\u043e\u0440\u0430. \u0427\u0442\u043e \u0434\u0430\u0435\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c.   <\/li>\n<li>\u041d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0443\u0436\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0448\u0442\u0443\u043a.  <\/li>\n<li>IE 10+  <\/li>\n<li>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u043d\u0438\u043f\u0435\u0442\u044b.  <\/li>\n<li>\u0438 \u0441\u043e\u0432\u0435\u0442\u044b  <\/li>\n<\/ul>\n<h2>\u0418 \u0442\u0430\u043a:<\/h2>\n<p>  <\/p>\n<h4>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u0447\u043d\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438<\/h4>\n<p>  <\/p>\n<pre><code>*, *:before, *:after {   box-sizing: inherit; }  html {   box-sizing: border-box; } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c <code>box-sizing<\/code>, \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043a\u043e\u043c\u043f\u043e\u043c\u0435\u043d\u0442 \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u044b\u043b <code>box-sizing: content-box;<\/code><\/p>\n<h4>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438<\/h4>\n<p>  <\/p>\n<pre><code>body {   margin: 0;    background-color: #fff;   line-height: 1.15;    text-rendering: optimizeLegibility;   text-decoration-skip: objects;   -webkit-text-size-adjust: 100%;   -webkit-font-smoothing: antialiased;   -webkit-tap-highlight-color: transparent; } <\/code><\/pre>\n<p>  <\/p>\n<ul>\n<li><b><code> text-rendering <\/code><\/b> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0442\u0435\u043a\u0441\u0442\u0430.<br \/>  <code>optimizeLegibility<\/code> \u2013 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0430\u0436\u043d\u0435\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u043a\u0435\u0440\u043d\u0438\u043d\u0433 \u0438 \u043b\u0438\u0433\u0430\u0442\u0443\u0440\u044b.  <\/li>\n<li><b><code>text-decoration-skip: objects;<\/code><\/b><br \/>  \u0414\u0435\u043b\u0430\u0435\u0442 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>text-decoration: underline;<\/code> \u043d\u0435\u043e\u0431\u0440\u044b\u0432\u0438\u0441\u0442\u044b\u043c(\u0442\u0430\u043c \u0433\u0434\u0435 \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442).<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wg\/eg\/4r\/wgeg4rljntz3qypyb9yhbxfb4ga.png\">  <\/li>\n<li><b><code>-webkit-text-size-adjust: 100%;<\/code><\/b> \u2014 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u043a\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u043f\u043e\u0441\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432 iOS.  <\/li>\n<li><b><code>-webkit-font-smoothing: antialiased;<\/code><\/b> \u2014 \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u0438\u043c \u0432 \u0421\u0430\u0444\u0430\u0440\u0438 \u043d\u0430 \u041c\u0430\u043a\u0430\u0445(\u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435 \u0441\u0433\u043b\u0430\u0436\u0435\u043d\u043d\u043e\u0435 \u0438 \u0447\u0435\u0442\u043a\u043e\u0435 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u043f\u0440\u0438\u044f\u0442\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c.).  <\/li>\n<li><b><code>-webkit-tap-highlight-color: transparent;<\/code><\/b> \u2014 \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u0438\u043d\u0435\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0434\u0435\u0432\u0430\u0439\u0441\u0430\u0445.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hz\/hm\/82\/hzhm82zqmm4rod6phvjqpdiaui8.gif\">  <\/li>\n<\/ul>\n<h3><u>focus \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u0430 outline \u043d\u0435\u0442<\/u><\/h3>\n<p>  <\/p>\n<pre><code> :focus {   outline: none; }<\/code><\/pre>\n<p>  \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u0430 \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. (\u041a\u0430\u043a \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 <a href=\"https:\/\/habrahabr.ru\/company\/htmlacademy\/blog\/339852\/\">\u0437\u0434\u0435\u0441\u044c<\/a>). \u041d\u043e <code>outline<\/code> \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043d\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u0438\u0437\u0430\u0439\u043d. \u0418 \u0441\u0430\u043c\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0440\u0435\u0434\u043a\u043e \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442 \u044d\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u043d\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0430\u0441\u0442\u043e\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0439 \u0441\u0442\u0430\u043b\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0445\u043e\u0432\u0435\u0440\u0430.<br \/>  \u042d\u0442\u043e \u043b\u0435\u043d\u0438\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431.   <\/p>\n<pre><code> .no-touch {   &amp;:hover,   &amp;:focus {     ...   } } <\/code><\/pre>\n<p>  <b>\u041d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b<\/b> \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0444\u043e\u043a\u0443\u0441\u0430.<br \/>  <i>\u0422\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435(<code>:hover, :focus, :active<\/code>).<\/i><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ze\/f5\/jd\/zef5jd1zsek0u0u-dgcgpmycvr4.gif\"><br \/>  <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/qyaOZz\">codepen<\/a><\/p>\n<h3>\u041e\u0442\u0441\u0442\u0443\u043f\u044b<\/h3>\n<p>  \u041e\u0442\u0441\u0442\u0443\u043f\u044b \u043e\u0431\u043d\u0443\u043b\u0435\u043d\u044b, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f.<\/p>\n<pre><code> p, dd, dl, figure, blockquote {   margin: 0; } \/* \u0421\u043e\u0432\u0443\u0442\u0443\u044e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043e \u0441\u043f\u0438\u0441\u043a\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0439 &lt;dl&gt;. \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e. \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f  \u0434\u0438\u0432\u043e\u043c(\u0432\u0430\u043b\u0438\u0434\u043d\u043e): dl&gt;div*3&gt;dd{value}+dt{prop} *\/  blockquote,  q {   quotes: none; }  ul, ol {   padding: 0;   margin: 0;   list-style-type: none; }  table {   border-collapse: collapse;   border-spacing: 0; }  th {   font-weight: inherit; }  h1, h2, h3, h4, h5, h6 {   margin: 0;   font-size: inherit;   font-weight: inherit; }  audio, video {   display: block; }  img {   display: block;   border: none;   \/*max-width: 100%;*\/ }  iframe {   border: none; }  pre, code, kbd, samp {   font-family: monospace, monospace;   font-size: inherit; } <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f <b>\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/b>(\u0430 \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b), \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u0438 \u0441\u0432\u043e\u0439 \u0441\u0442\u0430\u0439\u043b\u0433\u0430\u0439\u0434.<\/p>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code> .description {   h1,   h2,   h3,   h4 {     \/* style *\/   }      p {     \/* style *\/   }      \/* \u0438 \u0442. \u0434. *\/ } <\/code><\/pre>\n<p>  <b>\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c<\/b> \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0441\u0442\u0440\u043e\u043a\u0438.<br \/>  \u0412\u043e\u0442 <a href=\"http:\/\/alistapart.com\/article\/settingtypeontheweb\">\u0441\u0442\u0430\u0442\u044c\u044f<\/a> \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443.<br \/>  \u041e \u0442\u043e\u043c, \u043a\u0430\u043a\u0438\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lm\/-j\/jh\/lm-jjhun9exlofrlgakuhyayryu.png\"><\/p>\n<h3>\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>  \u041f\u043e\u043b\u043d\u043e\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435. \u0421\u0441\u044b\u043b\u043a\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0441\u0438\u043d\u0438\u0435, \u0441\u0442\u0440\u043e\u043d\u0433 \u043d\u0435 \u0431\u043e\u043b\u0434, \u0435\u043c \u043d\u0435 \u0438\u0442\u0430\u043b\u0438\u043a.<\/p>\n<pre><code> a {   background-color: transparent;   text-decoration: none;   color: inherit; }  abbr {   border: none;   text-decoration: none; }  b, strong {   font-weight: inherit; }  i, em {   font-style: inherit; }  dfn {   font-style: inherit; }  mark {   background-color: transparent;   color: inherit; }  small {   font-size: inherit; }  sub, sup {   position: relative;   vertical-align: baseline;   font-size: inherit;   line-height: 0; }  sub {   bottom: -.25em; }  sup {   top: -.5em; } <\/code><\/pre>\n<h3>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u043e\u0440\u043c:<\/h3>\n<p>  \u0423\u0434\u0430\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0430\u043c \u0438 \u0438\u043d\u043f\u0443\u0442\u0430\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043a\u043e\u043c\u0443-\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043f\u043e\u0440\u043d\u044b\u043c. <br \/>  <i>\u0411\u044b\u0432\u0430\u0435\u0442, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u0442\u0435\u0433\u043e\u0432, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u0441 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442.<\/i><\/p>\n<pre><code> button, input, optgroup, select, textarea {   padding: 0;   margin: 0;   border: none;   border-radius: 0;   box-shadow: none;   background-color: transparent;   font: inherit; \/* \u041f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443, \u0448\u0440\u0438\u0444\u0442\u043e\u0432\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442\u0441\u044f *\/   color: inherit;   letter-spacing: inherit; }  button, input {   overflow: visible; }  button, select {   text-align: left;   text-transform: none; }  button, [type='button'], [type='reset'], [type='submit'] {   cursor: pointer;   -webkit-appearance: none; }  textarea {   resize: none;   overflow-y: auto;   overflow-x: hidden; }  button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner {   border: none;   padding: 0; }  button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring {   outline: none; }  [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button {   height: auto; }  [type='search']::-webkit-search-decoration {   -webkit-appearance: none; }  [type='search'] {   outline: none; }  ::-webkit-file-upload-button {   -webkit-appearance: button;   font: inherit;  } <\/code><\/pre>\n<p>  (\u0422\u0435\u0433 <code>button<\/code> \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0444\u043b\u0435\u043a\u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u041d\u0430 IOS\u0430\u0445 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f.)<\/p>\n<h4>fieldset \u0438 legend<\/h4>\n<p>  <\/p>\n<pre><code> fieldset {   padding: 0;   margin: 0;   border: none; }  legend {   display: block;    padding: 0;   white-space: normal; } <\/code><\/pre>\n<p>  \u0427\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u0438 <b>\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u043e\u0440\u043c<\/b> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u044b\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445. <br \/>  \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/_s\/bt\/ny\/_sbtnysjwym3buqbrz6kjzpza9m.png\"><br \/>  <b>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u0442\u0430\u043a \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435<\/b>, \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u0445\u0443\u0434\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438.<br \/>  \u0412\u043e\u0442 \u043f\u0430\u0440\u0443 \u043f\u0440\u0438\u043c\u0440\u043e\u0432 \u0441 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439:<br \/>  <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/QBaMyz\">\u043f\u0440\u0438\u043c\u0435\u0440 1<\/a>, <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/prOMpR\">\u043f\u0440\u0438\u043c\u0435\u0440 2<\/a><\/p>\n<p>  (\u0422\u0435\u0433 <code>fieldset<\/code> \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0444\u043b\u0435\u043a\u0441 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u041d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e.)<\/p>\n<h4>select<\/h4>\n<p>  \u041e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 select&#8217;\u0430  <\/p>\n<pre><code> select {   -webkit-appearance: none;   -moz-appearance: none;   appearance: none; }  select::-ms-expand {   display: none; } <\/code><\/pre>\n<p>  \u041e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u043c select \u0441\u0430\u043c\u0438: <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/djdMZq\">codepen<\/a><\/p>\n<h4>placeholder<\/h4>\n<p>  <\/p>\n<pre><code> ::-webkit-input-placeholder {   color: inherit;   opacity: 1;   transition: opacity .3s; }  ::-moz-placeholder {   color: inherit;   opacity: 1;   transition: opacity .3s; }  :-moz-placeholder {   color: inherit;   opacity: 1;   transition: opacity .3s; }  :-ms-input-placeholder {   color: inherit;   opacity: 1;   transition: opacity .3s; }  :focus::-webkit-input-placeholder {   opacity: 0; }  :focus::-moz-placeholder {   opacity: 0; }  :focus:-moz-placeholder {   opacity: 0; }  :focus:-ms-input-placeholder {   opacity: 0; } <\/code><\/pre>\n<p>  \u041f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440 \u043d\u0430\u0441\u043b\u0443\u0434\u0443\u0435\u0442 \u0446\u0432\u0435\u0442. <br \/>  \u0418\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u043f\u0440\u0438 \u0444\u043e\u043a\u0443\u0441\u0435.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k3\/ch\/6m\/k3ch6mn2tdajmwom7hr6bgb_hby.gif\"><\/p>\n<h4>svg(\u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438)<\/h4>\n<p>  \u0422\u0435\u0433 <code>svg<\/code> \u0445\u043e\u0442\u044c \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0442\u0435\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u044e\u0431\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0438 \u0437\u0430\u0434\u0430\u044e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u0446\u0432\u0435\u0442. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u043f\u0440\u0430\u0439\u0442\u0430\u043c\u0438 2-\u0445 \u0442\u0438\u043f\u043e\u0432.<\/p>\n<p>  \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0438\u043a\u043e\u043d\u043a\u0430\u043c\u0438:<br \/>  <i>\u0418\u043a\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.<\/i><br \/>  \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 2 \u0442\u0438\u043f\u0430 \u0438\u043a\u043e\u043d\u043e\u043a:<br \/>   \u2014 \u043e\u0434\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0435<br \/>   \u2014 \u0446\u0432\u0435\u0442\u043d\u044b\u0435(\u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u043c\u0435\u043b\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f).<br \/>  \u0412\u0441\u0435 \u043e\u043d\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 svg.<br \/>  \u0414\u043b\u044f \u043e\u0434\u043d\u043e\u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f svg \u0441\u043f\u0440\u0430\u0439\u0442, \u043a\u043e\u0442\u0440\u044b\u0445 \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f.<br \/>  \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:  <\/p>\n<pre><code> &lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"&gt;   &lt;symbol id=\"search\" viewBox=\"0 0 24 24\"&gt;     &lt;path&gt;&lt;\/path&gt;   &lt;\/symbol&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u0418 \u0438\u043d\u043a\u043b\u044e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043e\u043d \u0442\u0430\u043a:  <\/p>\n<pre><code> &lt;svg class=\"alert__ico\"&gt;   &lt;use xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" xlink:href=\"..\/img\/sprites\/sprite.svg#search\"&gt;&lt;\/use&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u0418 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e: (<b>\u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b<\/b>)  <\/p>\n<pre><code> svg {   display: block;   width: 100%;   height: 100%;   fill: currentColor; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f css \u0441\u043f\u0440\u0430\u0439\u0442:  <\/p>\n<pre><code> .icon-ico-color:after {   background-image: url(\"data:image\/svg+xml,%3Csvg%20width%3D...; } <\/code><\/pre>\n<p>  \u0418 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e:  <\/p>\n<pre><code> [class*='icon-']:after {   content: '';   display: block;   width: 100%;   height: 100%;   background-size: contain;   background-position: center;   background-repeat: no-repeat;  } <\/code><\/pre>\n<p>  <b>\u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f css \u0441\u043f\u0440\u0430\u0439\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e<\/b>  <\/p>\n<pre><code> &lt;script&gt;   $(document).ready(function() {     $(\"head\").append(\"&lt;link rel='stylesheet' type='text\/css' href='..\/css\/icons.min.css' \/&gt;\");   }) &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u044d\u0442\u043e, \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u0434\u0435\u043b\u043e, \u0433\u0430\u043b\u043f\u043e\u043c.<\/p>\n<p>  <b>\u0427\u0442\u043e \u0434\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/b><br \/>  \u0414\u043b\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0431\u0443\u0434\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0430 \u0446\u0432\u0435\u0442\u043d\u043e\u0439 \u0438\u043b\u0438 \u043d\u0435\u0442, \u043e\u043d\u0430 \u0432 \u043d\u0435\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0432\u043f\u0438\u0448\u0435\u0442\u0441\u044f.  <\/p>\n<pre><code> &lt;div class=\"elem__ico\"&gt;   &lt;svg class=\"alert__ico\"&gt;     &lt;use xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" xlink:href=\"..\/img\/sprites\/sprite.svg#search\"&gt;&lt;\/use&gt;   &lt;\/svg&gt; &lt;\/div&gt;  &lt;div class=\"elem__ico  icon-ico-color\"&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fn\/ot\/zi\/fnotzigso3bnsqdwiha1mx60zhq.png\"><\/p>\n<h4>hidden<\/h4>\n<p>  <\/p>\n<pre><code> [hidden] {   display: none; \/\/ IE10 } <\/code><\/pre>\n<p>  \u0410\u0442\u0440\u0438\u0431\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n<h4>:disabled<\/h4>\n<p>  <\/p>\n<pre><code> :disabled, .disabled {   cursor: not-allowed; } <\/code><\/pre>\n<p>  \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043a\u0443\u0440\u0441\u043e\u0440. \u0422\u0430\u043a \u043a\u0430\u043a \u0437\u0430\u0434\u0438\u0437\u0435\u0439\u0431\u043b\u0435\u043d\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430, \u0442\u043e \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/kl\/_t\/jg\/kl_tjgkussgnifmkpzi5tbbluva.png\"><\/p>\n<h4>::-ms-clear<\/h4>\n<p>  \u041f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0438\u043d\u043f\u0443\u0442\u0435 IE \u0434\u043b\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430.  <\/p>\n<pre><code> ::-ms-clear {   display: none; } <\/code><\/pre>\n<p>  \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0435\u0433\u043e.<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zc\/i4\/kw\/zci4kwl5ugq35a0vecp4dcsww98.png\"><\/p>\n<h4>:-webkit-autofill<\/h4>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/lj\/qb\/wf\/ljqbwfovqe8jud137tajcryfvhs.png\">  <\/p>\n<pre><code> :-webkit-autofill {   box-shadow: 0 0 100px #fff inset;   -webkit-text-fill-color: currentColor; } <\/code><\/pre>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0442\u0435\u043d\u0438 \u0437\u0430\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0434 \u043d\u0443\u0436\u043d\u044b\u0439 \u0446\u0432\u0435\u0442. \u0418 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442.<\/p>\n<h4>::selection<\/h4>\n<p>  <\/p>\n<pre><code> ::selection {   color: #fff;   background-color: #004fe4; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/dg\/it\/9w\/dgit9wn5uwsmbm4cittoaeaicyy.gif\"><\/p>\n<h3>\u041a\u043b\u0430\u0441\u0441\u044b<\/h3>\n<p>  <\/p>\n<h4>.clearfix<\/h4>\n<p>  <\/p>\n<pre><code> .clearfix:after {   content: '';   display: block;   clear: both; } <\/code><\/pre>\n<p>  \u0425\u043e\u0442\u044c \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u043e \u0432\u0441\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0444\u043b\u0435\u043a\u0441\u044b, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e \u0444\u043b\u043e\u0430\u0442\u044b, \u0438 \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e \u0447\u0438\u0441\u0442\u043a\u0443 \u043f\u043e\u0442\u043e\u043a\u0430 \u0434\u043b\u044f \u0444\u043b\u043e\u0430\u0442\u043e\u0432.<\/p>\n<h4>.visually-hidden<\/h4>\n<p>  <\/p>\n<pre><code> .visually-hidden {   position: absolute;   z-index: -1;   width: 0;   height: 0;   padding: 0;   margin: 0;   border: none;   overflow: hidden; } <\/code><\/pre>\n<p>  <b>\u0414\u043b\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438:<\/b> \u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u0441\u043f\u0440\u044f\u0442\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 <i>\u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c<\/i>, \u043d\u043e \u0435\u0433\u043e \u043d\u0435\u0442 \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435. \u0421\u043a\u0440\u044b\u0442\u0438\u0435 \u044d\u0442\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043d\u0435 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u043a\u0440\u0438\u043d\u0440\u0438\u0434\u0435\u0440\u043e\u043c.<\/p>\n<p>  <b>\u0414\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0446\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432\/\u0440\u0430\u0434\u0438\u043e\u0431\u0430\u0442\u0442\u043e\u043d\u043e\u0432:<\/b> <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ge\/g7\/jb\/geg7jbosfv74t-cvq5vhyqp3_bu.png\"><\/p>\n<p>  \u0421\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>display: none;<\/code> \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>hidden<\/code> \u043f\u043b\u043e\u0445\u0430\u044f \u0438\u0434\u0435\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u043d\u043f\u0443\u0442 \u0442\u0435\u0440\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441, \u0430 \u0444\u043e\u043a\u0443\u0441(\u043a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c) \u044d\u0442\u043e \u0432\u0430\u0436\u043d\u043e. <br \/>  \u0410 \u0435\u0441\u043b\u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 <code>.visually-hidden<\/code> \u0442\u043e \u0438\u043d\u043f\u0443\u0442<b> \u043d\u0435 \u0442\u0435\u0440\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0444\u043e\u043a\u0443\u0441<\/b>.<\/p>\n<h4> \u041c\u0435\u0442\u043e\u0434 \u00abpadding-bottom\u00bb \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439(.cover-pic, .contain-pic.)<\/h4>\n<p>  \u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0441 \u0442\u0435\u0433\u043e\u043c   <\/p>\n<pre><code>&lt;img&gt;<\/code><\/pre>\n<p>  \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438:  <\/p>\n<ul>\n<li>\u041f\u043e\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c, \u043e\u043d\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u044b, \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0434\u0435\u0440\u0433\u0430\u043d\u044c\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0435.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u043e\u0441\u044c, \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u00ab\u043b\u043e\u043c\u0430\u0442\u044c\u0441\u044f\u00bb.<\/li>\n<li>\u041d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/li>\n<\/ul>\n<p>  \u041c\u0435\u0442\u043e\u0434 \u00abpadding-bottom\u00bb \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0441\u0447\u0435\u0442 \u043e\u0431\u0435\u0440\u0442\u043a\u0438.  <\/p>\n<pre><code>&lt;div class=\"img-wrap\"&gt; &lt;img src=\"\" alt=\"\"&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  \u041d\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u043e\u0431\u0435\u0440\u0442\u043a\u0435 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438.<br \/>  \u0418 \u0447\u0442\u043e\u0431 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e, \u0432\u044b\u0441\u043e\u0442\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0437\u0430 \u0441\u0447\u0435\u0442 padding \u0432 % \u0434\u043b\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0431\u0435\u0440\u0442\u043a\u0438(<b>:before<\/b>). \u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e <b>padding \u0432 % \u0431\u0435\u0440\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f<\/b>, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0437\u0430\u0434\u0430\u043d\u044b \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043b\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. <br \/>  (padding \u0432 % \u043d\u0435\u043a\u043e\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u043e\u0437\u0438\u043b\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d \u0437\u0430\u0434\u0430\u043d \u0444\u043b\u0435\u043a\u0441 \u0438\u0442\u0435\u043c\u0443).  <\/p>\n<pre><code> .img-wrap {   position: relative;   width: 30%; }  .img-wrap:before {   content: '';   display: block;   padding-bottom: 60%; } <\/code><\/pre>\n<p>  \u0421\u0430\u043c\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u043e \u0441\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0438.<br \/>  \u041a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e(\u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438 background-size: cover;). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 <b> .cover-pic<\/b>  <\/p>\n<pre><code> .cover-pic, .contain-pic {   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%; }  .cover-pic {   object-fit: cover; }  .contain-pic {   object-fit: contain; } <\/code><\/pre>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e \u043d\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e(\u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438 background-size: contain;). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441<b> .contain-pic<\/b><\/p>\n<p>  <b>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f:<\/b>  <\/p>\n<ul>\n<li>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u0437\u0438\u043d\u0438\u0442\u0441\u044f.<\/li>\n<li>\u0418\u043c\u0435\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438(\u0437\u0430\u0434\u0430\u043d\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c).<\/li>\n<li>\u041d\u0435 \u0434\u0435\u0440\u0433\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0435.<\/li>\n<\/ul>\n<p>  \u0418\u0437 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432: \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 <code>object-fit<\/code> IE.<br \/>  \u041f\u043e\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/jwoMWE?sort_col=item_updated_at\">\u043f\u043e\u043b\u0438\u0444\u0438\u043b<\/a>.<br \/>  <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/bxbNYN?editors=1100\">\u041f\u0440\u0438\u043c\u0435\u0440:<\/a><\/p>\n<h4>\u041f\u0440\u0438\u0436\u0430\u0442\u0438\u0435 \u0444\u0443\u0442\u0435\u0440\u0430<\/h4>\n<p>  <\/p>\n<pre><code>body {   display: flex;   flex-direction: column;   min-height: 100vh; }  .footer-page {   margin-top: auto; } <\/code><\/pre>\n<p>  <b>\u0424\u0438\u043a\u0441 \u043f\u0440\u0438 \u043f\u0440\u0438\u0436\u0430\u0442\u0438\u0438 \u0444\u0443\u0442\u0435\u0440\u0430 \u0434\u043b\u044f IE.<\/b> \u0412 \u0431\u043b\u043e\u043a\u0435 \u0441 min-height(\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043b\u0443\u0436\u0438\u0442 body) flex \u043d\u0435\u043a\u043e\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.   <\/p>\n<pre><code> @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {   html {     display: flex;     flex-direction: column;   } } <\/code><\/pre>\n<p>  \u0412\u044b\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432. <br \/>  \u041f\u0440\u0438\u0436\u0430\u0442\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/wxVePR\">\u0442\u0430\u0431\u043b\u0438\u0446<\/a> \u0438 <a href=\"https:\/\/codepen.io\/lucyhackwrench\/pen\/qjpZmr\">\u0433\u0440\u0438\u0434\u043e\u0432<\/a> \u0442\u043e\u0436\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u0444\u0443\u0442\u0435\u0440\u0430, \u043d\u043e \u0442\u0430\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043a\u0430\u043a-\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u044f\u0442\u043e(\u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0430 \u0433\u0440\u0438\u0434\u044b \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u043e\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e. <br \/>  <i>100vh \u043d\u0430 IOS \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b, \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/i><br \/>  <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/LBQbMg\">codepen<\/a>  <\/p>\n<hr>\n<p>  \u0422\u0430\u043a \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0440\u0435\u0441\u0435\u0442 \u0438\u043b\u0438 \u043d\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437? \u041e\u043d\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442, \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u0430\u043b\u043e \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c, \u0438 \u043f\u043e\u0442\u043e\u043c\u0443 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<br \/>  \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u043c\u043e\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u0430. \u0412\u043e\u043f\u0440\u043e\u0441\u044b \u0438 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0438\u0434\u0435\u0438 \u0438 \u0437\u0430\u043c\u0435\u0447\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442\u0441\u044f.<\/p>\n<p>  P. S. \u0421\u043e\u0432\u0443\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0435\u0439 <a href=\"https:\/\/habr.com\/post\/340420\/\">\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 (margin\/padding)<\/a>. \u0418 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c css \u043b\u0438\u043d\u0442\u0435\u0440\u044b. \u0418 \u043a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043c\u043e\u0436\u0435\u0442 \u0440\u0435\u0448\u0438\u0442\u044c <a href=\"https:\/\/codepen.io\/yurch-html\/pen\/ZLmyMa\">css \u0437\u0430\u0434\u0430\u0447\u043a\u0443<\/a>.<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/post\/348940\/\"> https:\/\/habr.com\/post\/348940\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/348940\/\" class=\"post__text post__text-html js-mediator-article\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/y8\/rw\/hw\/y8rwhwzwhrpubvzgl3wfyiuyy0e.jpeg\"><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u0442\u0438\u043b\u0435\u0439.<br \/>  \u0417\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0443 \u043c\u0435\u043d\u044f \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b, \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e, \u0431\u044b\u043b \u0432\u0437\u044f\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437.<\/p>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437, \u0430 \u043d\u0435 \u0440\u0435\u0441\u0435\u0442. \u041e\u043d \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434 \u043a\u0440\u043e\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e. \u041d\u043e \u0432 \u0447\u0438\u0441\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u043e\u043d \u043c\u0435\u043d\u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043b, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0431\u043e\u0440\u0434\u0435\u0440\u044b \u0438 \u0442. \u0434. \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0448\u0430\u043b\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u043e\u0433\u043d\u0430\u043b \u0435\u0433\u043e \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438, \u043f\u043e\u0443\u0434\u0430\u043b\u044f\u0432 \u0442\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <br \/>  \u0421\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0444\u0430\u0439\u043b \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u043b\u0441\u044f, \u043b\u0438\u0448\u043d\u0435\u0435 \u0438\u0437 \u043d\u043e\u0440\u043c\u0430\u043b\u0430\u0439\u0437\u0430 \u0443\u0434\u0430\u043b\u044f\u043b\u043e\u0441\u044c, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u044e\u0449\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u043b\u043e\u0441\u044c. <br \/>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0435\u043b\u044c\u044e \u0435\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u044b\u043b\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u0440\u043e\u044d\u043a\u0442\u0430, \u0447\u0442\u043e \u043f\u043e-\u043c\u043e\u0435\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0434\u0430\u0436\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u0430\u0447\u043d\u043e. \u0424\u0430\u0439\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u043e\u0439 \u043f\u0440\u043e\u044d\u043a\u0442\u0430 \u0432 \u043d\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u043b\u044f\u0434\u044b\u0432\u0430\u0442\u044c \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043a\u043e\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. <\/p>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0432\u044b \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0435\u0442\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435, \u0437\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u043d\u0438\u043c.<br \/>  <a href=\"https:\/\/yurch-html.github.io\/dist\/custom-reset.html\">custom-reset.css<\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-288196","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/288196","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=288196"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/288196\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=288196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=288196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=288196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}