{"id":159101,"date":"2012-11-18T11:19:03","date_gmt":"2012-11-18T07:19:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=159101"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=159101","title":{"rendered":"<span class=\"post_title\">\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 CSS-\u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/6b4\/2d3\/5a4\/6b42d35a44d89ccc7bfd12c089003c05.png\"\/><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u00a0\u0438 \u00ab\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435\u00bb \u0441\u0442\u0438\u043b\u0438 \u0438 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443.<a name=\"habracut\"><\/a><\/p>\n<h2>1. \u0411\u0430\u0437\u043e\u0432\u0430\u044f HTML5 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f<\/h2>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u0434 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043d\u043e\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0443\u0434\u0435\u043b\u044f\u044e\u0442 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b jQuery 1.8.2 \u0438\u00a0<a href=\"http:\/\/code.google.com\/p\/html5shiv\/\">HTML5shiv<\/a>\u00a0\u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445.<\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html lang=&quot;en-US&quot;&gt; &lt;head&gt;   &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text\/html; charset=utf-8&quot;&gt;   &lt;title&gt;Default Page Title&lt;\/title&gt;   &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot;&gt;   &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot;&gt;   &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;styles.css&quot;&gt;   &lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js&quot;&gt;&lt;\/script&gt; &lt;!--[if lt IE 9]&gt;   &lt;script src=&quot;http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js&quot;&gt;&lt;\/script&gt; &lt;![endif]--&gt; &lt;\/head&gt;  &lt;body&gt;  &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<h2>2. \u0421\u0431\u0440\u043e\u0441 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/h2>\n<p>  \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. \u0421\u0431\u0440\u043e\u0441 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<pre><code class=\"css\">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;   padding: 0;   border: 0;   font-size: 100%;   font: inherit;   vertical-align: baseline;   outline: none; } html { height: 101%; } \/* always display scrollbars *\/ body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; }  blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; }   input { outline: none; }  table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; }  a { text-decoration: none; } a:hover { text-decoration: underline; } <\/code><\/pre>\n<h2>3. CSS3 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/h2>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0438\u0436\u0435 \u043a\u043e\u0434 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c CSS-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<strong>rgba()<\/strong> \u0434\u043b\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438.<\/p>\n<pre><code class=\"css\">background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image: -o-linear-gradient(top, #bbb, #000); background-image: linear-gradient(top, #bbb, #000); <\/code><\/pre>\n<h2>4.\u00a0CSS3 Transform<\/h2>\n<p>  \u041d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438\u0437-\u0437\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0432 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435. \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c <a href=\"http:\/\/cssnerd.com\/2012\/04\/10\/pure-css3-animated-tooltip\/\">\u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438<\/a> \u0438\u043b\u0438 <a href=\"http:\/\/www.css3shapes.com\/\">\u0444\u0438\u0433\u0443\u0440\u044b<\/a>.<\/p>\n<pre><code class=\"css\">-webkit-transform: perspective(250) rotateX(45deg); -moz-transform: perspective(250) rotateX(45deg); -ms-transform: perspective(250) rotateX(45deg); -o-transform: perspective(250) rotateX(45deg); transform: perspective(250) rotateX(45deg); <\/code><\/pre>\n<h2>5. \u0421\u0432\u043e\u0439\u00a0@font-face<\/h2>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0414\u043b\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u00a0<a href=\"http:\/\/www.font2web.com\/\">Font2Web<\/a>.<\/p>\n<pre><code class=\"css\">@font-face{    font-family: 'MyFont';   src: url('myfont.eot');   src: url('myfont.eot?#iefix') format('embedded-opentype'),     url('myfont.woff') format('woff'),     url('myfont.ttf') format('truetype'),     url('myfont.svg#webfont') format('svg'); }  h1 { font-family: 'MyFont', sans-serif; } <\/code><\/pre>\n<h2>6. \u00a0\u041c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438<\/h2>\n<p>  \u0412\u0430\u0436\u043d\u044b\u0435 \u043c\u0435\u0442\u0430-\u0442\u0435\u0433\u0438 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430<\/p>\n<pre><code class=\"html\">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt; &lt;meta name=&quot;HandheldFriendly&quot; content=&quot;true&quot;&gt; <\/code><\/pre>\n<h2>7. HTML5-\u043c\u0435\u0434\u0438\u0430<\/h2>\n<p>  \u041a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0432\u0438\u0434\u0435\u043e \u0438 \u0430\u0443\u0434\u0438\u043e \u0434\u043b\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u043c\u0435\u0434\u0438\u0430-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<pre><code class=\"html\">&lt;video poster=&quot;images\/preview.png&quot; width=&quot;1280&quot; height=&quot;720&quot; controls=&quot;controls&quot; preload=&quot;none&quot;&gt;    &lt;source src=&quot;media\/video.mp4&quot; type=&quot;video\/mp4&quot;&gt;<\/code><\/pre>\n<p>   <\/p>\n<pre><code>  &lt;source src=&quot;music.mp3&quot; type=&quot;audio\/mpeg&quot;&gt; &lt;\/audio&gt; <\/code><\/pre>\n<h2>8. \u00a0\u041a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0438<\/h2>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435. \u0422\u0435\u0445\u043d\u0438\u043a\u0430 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u0445. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c float:<\/p>\n<pre><code class=\"css\">.float-left \/* Or whatever name you like *\/ {     float: left; }   .float-right \/* Or whatever name you like *\/ {     float: right; } <\/code><\/pre>\n<p>  \u0418\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432:<\/p>\n<pre><code class=\"css\">.hide {     display: none; }   .show {     display: block; } <\/code><\/pre>\n<h2>9. \u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/h2>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0443\u043f\u0440\u043e\u0449\u0430\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440: \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 CSS-\u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0433\u0434\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442. \u042d\u0442\u0430, \u0432\u0440\u043e\u0434\u0435 \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430, \u0447\u0430\u0441\u0442\u043e \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438.<\/p>\n<pre><code class=\"css\">.content {     font: 1em\/1.4 Segoe, &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; }   .title {     font: 1.7em\/1.2 Baskerville, &quot;Baskerville old face&quot;, &quot;Hoefler Text&quot;, Garamond, &quot;Times New Roman&quot;, serif; }   .code {     font: 0.8em\/1.6 Monaco, Mono-Space, monospace; } <\/code><\/pre>\n<h2>10. \u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h2>\n<p>  \u0421\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441\u0430\u0439\u0442\u0430. \u0412\u043e\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u0430\u043a\u043e\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0431\u043b\u043e\u043a\u0430:<\/p>\n<pre><code class=\"css\">*, *:before, *:after {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } <\/code><\/pre>\n<p>  \u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u00a0\u2014 \u044d\u0442\u043e clearfix, \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0449\u0438\u0439 \u0438\u0437\u0431\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0435\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445:<\/p>\n<pre><code class=\"css\">.clearfix:before, .clearfix:after {     content: &quot; &quot;;     display: table; }   .clearfix:after {     clear: both; }   \/* IE6\/7 support *\/ .clearfix {     *zoom: 1; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u00a0<em>position: absolute; left: -9999px;<\/em> \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0435\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u043e\u0434, \u0430\u0432\u0442\u043e\u0440\u00a0<a href=\"http:\/\/www.zeldman.com\/2012\/03\/01\/replacing-the-9999px-hack-new-image-replacement\/\">Scott Kellum<\/a>:<\/p>\n<pre><code class=\"css\">.ir {     text-indent: 100%;     white-space: nowrap;     overflow: hidden; } <\/code><\/pre>\n<p>  \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043b\u0438\u043d\u043d\u044b\u0435 URL \u043c\u043e\u0433\u0443\u0442 \u043b\u043e\u043c\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u043d\u0438\u043f\u043f\u0435\u0442 (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 <a href=\"http:\/\/css-tricks.com\/snippets\/css\/prevent-long-urls-from-breaking-out-of-container\/\">\u043d\u0430 css-tricks.com<\/a>), \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Opera \u0438 IE \u043d\u0438\u0436\u0435 \u0432\u043e\u0441\u044c\u043c\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438:<\/p>\n<pre><code class=\"css\">.break {     -ms-word-break: break-all;     word-break: break-all;       word-break: break-word;       -webkit-hyphens: auto;     -moz-hyphens: auto;     hyphens: auto; }   .ellipsis {     width: 250px;     white-space: nowrap;     overflow: hidden;     -ms-text-overflow: ellipsis; \/* Required for IE8 *\/     -o-text-overflow: ellipsis; \/* Required for Opera *\/     text-overflow: ellipsis; } <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u043d\u043e\u0441\u044b \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u0442\u0435\u0433\u0435 <strong>pre<\/strong>:<\/p>\n<pre><code class=\"css\">pre {     white-space: pre-wrap;       \/* Chrome & Safari *\/     white-space: -moz-pre-wrap;  \/* Mozilla since 1999 *\/     white-space: -pre-wrap;      \/* Opera 4-6 *\/     white-space: -o-pre-wrap;    \/* Opera 7 *\/     word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/ } <\/code><\/pre>\n<h2>11. \u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043b\u044f \u043f\u0435\u0447\u0430\u0442\u0438<\/h2>\n<p>  \u041f\u0435\u0440\u0435\u0432\u043e\u0434 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0447\u0435\u0440\u043d\u043e-\u0431\u0435\u043b\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f \u0443 \u0441\u0441\u044b\u043b\u043e\u043a, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 URL \u0440\u044f\u0434\u043e\u043c \u0432 \u0441\u043a\u043e\u0431\u043a\u0430\u0445:<\/p>\n<pre><code class=\"css\">@media print {     * {         background: none !important;         color: black !important;         box-shadow: none !important;         text-shadow: none !important;           \/* Images, vectors and such *\/         filter: Gray();                          \/* IE4-8: depreciated *\/         filter: url('desaturate.svg#grayscale'); \/* SVG version for IE10, Firefox, Safari 5 and Opera *\/         -webkit-filter: grayscale(100%);         \/* Chrome + Safari 6 *\/         -moz-filter: grayscale(100%);            \/* Future proof *\/         -ms-filter: grayscale(100%);             \/* Future proof *\/         -o-filter: grayscale(100%);              \/* Future proof *\/         filter: grayscale(100%);                 \/* Future proof or polyfilled *\/     }       a {         text-decoration: underline;     }       a[href]:after {         content: &quot; (&quot; attr(href) &quot;)&quot;;      }       a[href=&quot;#&quot;],     a[href=&quot;javascript:&quot;] {         content: &quot;&quot;;     } } <\/code><\/pre>\n<pre><code class=\"html\">&lt;!-- SVG version of grayscale filter: desaturate.svg --&gt; &lt;svg version=&quot;1.1&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;     &lt;filter id=&quot;grayscale&quot;&gt;         &lt;feColorMatrix type=&quot;matrix&quot; values=&quot;0.3333 0.3333 0.3333 0 0             0.3333 0.3333 0.3333 0 0             0.3333 0.3333 0.3333 0 0             0  0  0  1 0&quot;\/&gt;     &lt;\/filter&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b:  <\/p>\n<ul>\n<li><a href=\"http:\/\/webdesignledger.com\/tips\/8-code-snippets-templates-for-new-website-projects\">8 Code Snippets for New Website Projects<\/a><\/li>\n<li><a href=\"http:\/\/tympanus.net\/codrops\/2012\/10\/25\/kick-start-your-project-a-collection-of-handy-css-snippets\/#article-section-designrelated\">Kick-Start Your Project: A Collection of Handy CSS Snippets<\/a><\/li>\n<li><a href=\"http:\/\/css-tricks.com\/\">\u0421\u0430\u0439\u0442 CSS-Tricks<\/a><\/li>\n<\/ul>\n<div class=\"clear\"><\/div>\n<\/p><\/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=\"http:\/\/habrahabr.ru\/post\/159101\/\"> http:\/\/habrahabr.ru\/post\/159101\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t<img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/6b4\/2d3\/5a4\/6b42d35a44d89ccc7bfd12c089003c05.png\"\/><\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0441\u043e\u0431\u0440\u0430\u043d\u044b \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u00a0\u0438 \u00ab\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435\u00bb \u0441\u0442\u0438\u043b\u0438 \u0438 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0430\u0439\u0442\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0443.<\/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-159101","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/159101","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=159101"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/159101\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=159101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=159101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=159101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}