background-image — CSS | MDN
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎΒ CSSΒ background-image
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ ΡΠΈΡΡΡΡΡΡ Π² ΡΠ»ΠΎΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠΎΠ² Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΠ΅ΡΠ²ΡΠΉ ΡΠ»ΠΎΠΉ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±ΡΠ» Π±Π»ΠΈΠΆΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠ°Π½ΠΈΡΡ border
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°ΡΠ΅ΠΌ ΡΠΈΡΡΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π½ΠΈΡ
, ΠΈ background-color
ΡΠΈΡΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ Π½ΠΈΠΌΠΈ. Π’ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°ΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°ΠΌΠΊΠΈ ΠΈ Π΅Ρ Π³ΡΠ°Π½ΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ background-clip
ΠΈ background-origin
.
ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΠΉΠ», ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ URI, Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½), Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ΠΎ Π±ΡΠ»ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ none
.
background-color
. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ βΠ½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΠ»ΡΡΠ°Π΅ ΠΎΡΠΊΠ°Π·Π° ΡΠ΅ΡΠ΅Π²ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ β Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΡΠ½ ΡΠ²Π΅ΡΠ½ΠΎΠΉ ΡΠΎΠ½.background-image: none; background-image: url(http://www.example.com/bck.png); background-image: inherit;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
none
- ΠΡΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
<image>
<image>
(en-US) ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΡΡ Π·Π°ΠΏΡΡΡΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ² (en-US).
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
<bg-image># (en-US)Π³Π΄Π΅
<bg-image> = none | (en-US) <image> (en-US)
Π³Π΄Π΅
<image> = <url> (en-US) | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
Π³Π΄Π΅
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>Π³Π΄Π΅
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> (en-US) | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type(<string> (en-US)) ] (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )Π³Π΄Π΅
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>Π³Π΄Π΅
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<length-percentage> = <length> | (en-US) <percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>Π³Π΄Π΅
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ² ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π²Π΅Π·Π΄Ρ ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΊΠΈ.
HTML ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
<div> <p> This paragraph is full of cats<br />and stars. </p> <p>This paragraph is not.</p> <p> Here are more cats for you.<br />Look at them! </p> <p>And no more.</p> </div>
CSS ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅
pre, p { font-size: 1.5em; color: #FE7F88; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } p { background-image: none; } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; }
BCD tables only load in the browser
background — CSS | MDN
Π‘ΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠ΅Β CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎbackground
Β ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΠ°Π·Ρ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΈΠ»Ρ ΡΠΎΠ½Π°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ²ΡΠΎΡΠ°.ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄Β ΡΡΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ GitHub.Β ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²Π½Π΅ΡΡΠΈ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ Π² ΠΏΡΠΎΠ΅ΠΊΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ° ΠΊΠ»ΠΎΠ½ΠΈΡΡΠΉΡΠ΅ https://github.com/mdn/interactive-examplesΒ ΠΈ ΠΎΡΠΏΡΠ°Π²ΡΡΠ΅ Π½Π°ΠΌ Π·Π°ΠΏΡΠΎΡ Π½Π° ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½ΠΈΠ΅..
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΒ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΈ: background-clip
, background-color
, background-image
background-origin
, background-position
, background-repeat
, background-size
, ΠΈ background-attachment
.ΠΠ°ΠΊ ΠΈ Π²ΠΎ Π²ΡΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ , Π»ΡΠ±ΡΠ΅ ΠΏΡΠΎΠΏΡΡΠ΅Π½Π½ΡΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ Π² ΡΠ²ΠΎΠΈ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
[ (en-US) <bg-layer> , ] (en-US)* (en-US) <final-bg-layer>Π³Π΄Π΅
<bg-layer> = <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>
<final-bg-layer> = <'background-color'> || (en-US) <bg-image> || (en-US) <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <attachment> || (en-US) <box> || (en-US) <box>Π³Π΄Π΅
<bg-image> = none | (en-US) <image> (en-US)
<bg-position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US) | (en-US) [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US) ] (en-US)<bg-size> = [ (en-US) <length-percentage> | (en-US) auto ] (en-US){ (en-US)1,2} (en-US) | (en-US) cover | (en-US) contain
<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)
<attachment> = scroll | (en-US) fixed | (en-US) local
<box> = border-box | (en-US) padding-box | (en-US) content-boxΠ³Π΄Π΅
<image> = <url> (en-US) | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
<length-percentage> = <length> | (en-US) <percentage>Π³Π΄Π΅
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>Π³Π΄Π΅
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> (en-US) | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> (en-US) | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type(<string> (en-US)) ] (en-US)<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image> (en-US)
<cf-final-image> = <image> (en-US) | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> (en-US) ] (en-US)? (en-US), <angular-color-stop-list> )Π³Π΄Π΅
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>Π³Π΄Π΅
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>Π³Π΄Π΅
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>
img ΠΈΠ»ΠΈ background-image? Π§ΡΠΎ Π»ΡΡΡΠ΅?
Π Π»ΡΠ±ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΡΠ°ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΠΎ ΠΌΠ°Π»ΠΎ ΠΊΡΠΎ Π·Π°Π΄ΡΠΌΡΠ²Π°Π΅ΡΡΡ Π½Π°Π΄ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ Π° ΠΊΠΎΠ³Π΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΡΡΠΎΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ html ΡΠ΅Π³ img, Π° ΠΊΠΎΠ³Π΄Π° css ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image? ΠΡΡΡ Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅? ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΅ΡΡΡ ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅. ΠΠ± ΡΡΠΎΠΌ ΠΈ ΠΏΠΎΠΉΠ΄Π΅Ρ ΡΠ΅ΡΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΠ»Π°Π²Π½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ img ΠΈ background-image
ΠΠΎΠ³Π΄Π° ΠΌΡ Π²ΡΠΏΠΎΠΌΠΈΠ½Π°Π΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ html ΠΈ css ΠΎΠ½ΠΎ Π΄Π»Ρ Π½Π°Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ, Π½ΠΎ ΠΏΠΎΡΠ΅ΠΌΡ-ΡΠΎ ΠΏΠΎΠΊΠ° Π½Π°Π΄ ΡΡΠΈΠΌ Π½Π΅ Π·Π°Π΄ΡΠΌΡΠ²Π°Π΅ΡΡΡΡ Π·Π°ΠΌΠ΅ΡΠΈΡΡ Π΅Π³ΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΠΈ ΠΏΡΠΎΡΡΠΎ.
Π Π°Π·Π»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π΅ΡΡΡΠΈΠ΅ ΡΠΌΡΡΠ»ΠΎΠ²ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅Π³ΠΎΠΌ img (ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΡΠ΅ΠΊΡΡΠ΅, Π±Π°Π½Π½Π΅ΡΡ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ°, Π°Π²Π°ΡΠ°ΡΠΊΠΈ ΠΈ ΡΠ΄). ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ (ΠΏΡΠΎΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ: ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π° ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ, ΠΌΠ°ΡΠΊΠ΅ΡΡ, ΡΠΎΠ½Ρ ΠΈ ΡΠ΄.) ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ background-image.
Π ΡΠ΅ΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°?
- Π ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΠΎΡΠΈΡΠ°Π΅ΠΌ ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΡ, ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌ ΡΠΎΠ±ΠΎΡΠ°ΠΌ, ΡΡΠΊΠΎΡΡΠ΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π° ΡΡΠ΅Ρ Π²ΡΠ΅ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π² ΠΎΠ±ΡΠ΅ΠΌ ΠΊΡΠ°ΠΉΠ½Π΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° SEO ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ img Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π½Π΅ΡΡΡΠΈΡ Π½Π° ΡΠ΅Π±Π΅ ΡΠΌΡΡΠ»ΠΎΠ²ΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ ΠΌΡ Π΄Π°Π΅ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠ°ΠΌ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π°Π»ΡΡΡ ΡΡΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΈ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΈΠ· ΡΠ΅Π±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ, Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠ°ΡΠΈΠΊΠ° Π½Π° ΡΠ°ΠΉΡ ΠΈΠ· ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ, ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π»ΡΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° (ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠΈ Π»ΡΠ±ΡΡ ΡΠ΅ΠΊΡΡ ΡΠ°Π·Π±Π°Π²Π»Π΅Π½Π½ΡΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΊΡΠΎΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ΅ΡΡΡΡΠ°).
- Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ, ΡΡΠ΅ΡΡΠΈΠΊΠΈ ΠΈ CMS Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ Π°Π²Π°ΡΠ°ΡΠΎΠΊ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ ΠΈ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π΄Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ Π»ΠΎΠ³ΠΈΠΊΠ΅ Π²Π΅ΡΠ΅ΠΉ ΠΎΡΠ½ΠΎΡΡΡΡΡ Π½Π΅ ΠΊ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΠΊ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ.
ΠΡΠ°Π½ΡΡ ΠΈΠ· ΠΏΡΠ°ΠΊΡΠΈΠΊΠΈ
- ΠΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° ΡΠ΅Π³ΠΈ img ΠΏΠ΅ΡΠ°ΡΠ°ΡΡΡΡ, Π° background-Ρ Π½Π΅Ρ.
- ΠΡΠ΅, ΡΡΠΎ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΊ ΠΈΠ½Π΄Π΅ΠΊΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΈΠΊΠ°ΠΌΠΈ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ, Π²ΡΠ΅ ΡΡΠΎ Ρ ΠΎΡΠΈΠΌ ΡΠΊΡΡΡΡ- ΡΠΎΠ½Π°ΠΌΠΈ.
- ΠΡΠ°ΡΠ·Π΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠ΅ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΡΠΈΡΠ°ΡΡ Π°Π»ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΏΠΎΡΠΎΠΌΡ Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠ΅Ρ Π²Π°ΠΆΠ½ΡΠΉ ΡΠΌΡΡΠ», ΠΎΠ½ΠΎ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΎ html ΡΠ΅Π³ΠΎΠΌ.
- ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°ΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-size ΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠ½Π° Π² Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅Π³, Π° Π½Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°.
- Img Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΌΠ΅Π½ΡΡΠ΅ Π½Π°Π³ΡΡΠΆΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΡ.
- ΠΠ»Ρ Π·Π°ΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ background-image (ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ²Π΅ΡΡΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ).
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π° ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΡΡΠ΅ΠΊΠ°ΡΡΠ°Ρ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΡΠΈΡΠΊΠ°- background-image Π΄Π°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΏΡΠ°ΠΉΡΠΎΠ² (Π·Π° ΡΡΠ΅Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°ΡΡΡΡ Ρ 1 ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΉ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΊΠΎΡΠΎΡΡΠΈ) Π΄Π»Ρ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΡΠ°.
- ΠΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠΏΡΡΡΠ°Π½Π½ΡΡ Π² ΡΠΎΠ½ ΡΠ°ΠΉΡΠ° ΡΠ»ΠΎΠΆΠ½Π΅Π΅ Π²ΡΠΊΠ°ΡΠ°ΡΡ. Π₯ΠΎΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ ΠΌΠ½Π΅ Π΄Π»Ρ Π·Π°ΡΠΈΡΡ ΡΠ²ΠΎΠΈΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ Π½Π° Π½ΠΈΡ , ΡΡΠΎ Ρ ΠΎΡΡ Π·Π°ΡΡΠ°Π²ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ°ΡΡΠΈΠΊΠΎΠ² ΠΏΠΎΠ²ΠΎΠ·ΠΈΡΡΡΡ Ρ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π΅Π΅ Π² ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Π·Π°ΡΠΈΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΎΡ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ΄Π²ΠΎΠ΄Ρ ΠΈΡΠΎΠ³ΠΈ
ΠΠΈΡΠ΅Π³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ Π² ΡΠ°Π·ΠΌΠ΅ΠΆΠ΅Π²Π°Π½ΠΈΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π²ΡΠ²ΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅Ρ. Π‘ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ Π²ΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π½Π° ΡΠ²ΠΎΠΈ ΠΌΠ΅ΡΡΠ° ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΠΎΠΌΠ½ΠΈΡΡ, ΡΡΠΎ Π²ΡΠ΅ ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠ΅ Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΉΡΠ° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΎ Π² css, Π° Π²ΡΠ΅ ΡΠ²ΡΠ·Π°Π½Π½ΠΎΠ΅ Ρ Π΅Π³ΠΎ ΡΡΡΡΠΊΡΡΡΠΎΠΉ ΠΈ ΡΠΌΡΡΠ»ΠΎΠ²ΡΠΌ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ Π² html.
ΠΡΠ΅Π½ΠΎΠΊ: 19 (ΡΡΠ΅Π΄Π½ΡΡ 4.9 ΠΈΠ· 5)
- 24439 ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠ²
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ°ΡΡΡ? Π Π°ΡΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΎ Π½Π΅ΠΉ Π΄ΡΡΠ·ΡΡΠΌ:
ΠΡΡΡΡ ΠΏΠΎ CSS (Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅)
Π£ΡΠΎΠ²Π΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ:
Π‘ΡΠ΅Π΄Π½ΠΈΠΉ
ΠΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅
ΠΡΠ°ΡΠΈΠΊΠ° Π² Π²Π΅Π±Π΅, img, background-image, CSS-ΡΠΏΡΠ°ΠΉΡΡ
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ: Π² Π²Π΅Π±Π΅ Π·Π°ΠΏΡΠ΅ΡΠ΅Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΈΠΌΠ΅Π½Π°Ρ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ URL:1) ΠΡΠΎΠ±Π΅Π»Ρ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π΅ΡΠΈΡ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠ±Π΅Π»Π°)
2) ΠΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π΅ΡΠΈΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π² Π²Π΅Π±Π΅ ΠΏΡΠΈΠ½ΡΡΠΎ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ (Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΡΠΌ) ΡΠ»ΠΈΠ²Π°Π΅ΡΡΡ Ρ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ (Π² ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°ΠΉΠ»Π°), ΡΡΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΠΎΠ½ΡΡΡ, Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π»ΠΈ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°ΠΌΠΈ ΠΏΡΠΎΠ±Π΅Π» ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
3) ΠΠΈΡΠΈΠ»Π»ΠΈΡΡ (Π ΡΡΡΠΊΠΈΠ΅ Π±ΡΠΊΠ²Ρ) Π° ΡΠ°ΠΊ ΠΆΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π»Π°ΡΠΈΠ½ΠΈΡΡ (ΠΠ½Π³Π»ΠΈΠΉΡΠΊΠΈΠ΅ Π±ΡΠΊΠ²Ρ). Π‘Π²ΡΠ·Π°Π½ΠΎ Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ ΡΠ°Π±ΠΎΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠΎΠ².
4) Π‘ΠΏΠ΅ΡΡΠΈΠΌΠ²ΠΎΠ»Ρ Π·Π°ΠΏΡΠ΅ΡΡΠ½Π½ΡΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ.
ΠΠ»Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ²ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π² Π³ΡΠ³Π»Π΅ ΠΏΠΎ Π·Π°ΠΏΡΠΎΡΡ: «sprites generator online», Π²ΠΎΡ Π΄Π°ΠΌ ΠΏΠ°ΡΡ ΡΡΡΠ»ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΌΡΡ
Π»Π΅Π½ΠΈΠ²ΡΡ
π ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠ°ΠΌ ΡΠ°Π²Π½ΡΠ΅ ΠΈΠΌΠ΅Π½Π°ΠΌ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π² Π½ΡΠΆΠ½ΡΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΡ.
ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π° Π΄Π»Ρ CSS ΠΊΠ»Π°ΡΡΠΎΠ², ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ
ΠΡΡ ΠΎΠ΄ΠΈΠ½ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ, Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ.
Π Π°Π· ΠΌΡ Π΄ΠΎΡΠ»ΠΈ Π΄ΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ Π°ΠΊΡΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ. ΠΡΠ²Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΏΡΠΎΠ΅ΠΊΡ Π½Π° ΡΡΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»ΡΡΠΎΠΉ, ΡΡΠΎ ΡΡ
ΠΎΠΆΠΈΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ
ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
. ΠΠΎΠΏΡΡΡΠΈΠΌ Ρ Π½Π°Ρ Π΅ΡΡΡ ΡΠΎΡΠΌΠ° Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΠΈ .form-auth , ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Ρ Π·Π΅Π»Π΅Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, Π° Π½Π° Π²ΡΠΎΡΠΎΠΉ Ρ ΠΆΠ΅Π»ΡΡΠΌ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ΄Π½Ρ ΡΠΎΡΠΌΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊ, Π° Π²ΡΠΎΡΡΡ — Π²ΡΠΎΡΠΎΠΉ. Π§ΡΠΎΠ±Ρ ΡΡΠΈΠ»ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅Π±ΠΈΠ²Π°Π»ΠΈ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ 2 ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°:
1) ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ΄ΠΈΠ½ css ΡΠ°ΠΉΠ», ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π½Π° Π²ΡΠΎΡΠΎΠΉ — Π²ΡΠΎΡΠΎΠΉ, ΠΈ ΡΡΠΈΠ»ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΡΡΡΡ.
2) Π£ΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ ΡΠ°ΠΊ: .reg-form-auth , ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ ΡΠ°Π·Π΄Π΅Π»ΡΠ½Π½ΠΎΠ΅ Π»ΡΠ±ΡΠΌ ΡΠΏΠ΅Ρ.ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠΌ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π΅ΡΠΈΡΠΎΠΌ, ΠΈ Π³ΠΎΠ²ΠΎΡΡΡΠ΅Π΅ ΡΠ°ΠΌΠΎ Π·Π° ΡΠ΅Π±Ρ, ΡΡΠΎ Π΄Π°Π½Π½Π°Ρ ΡΠΎΡΠΌΠ° Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ. ΠΠ»ΠΈ ΠΆΠ΅ .inpost-form-auth — Π³ΠΎΠ²ΠΎΡΠΈΡ, ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ Π΄Π°Π½Π½ΠΎΠΉ ΡΠΎΡΠΌΡ Π±ΡΠ» inpost, ΠΌΠΎΠΉ Π»ΠΈΡΠ½ΡΠΉ Π½ΠΈΠΊΠ½Π΅ΠΉΠΌ (ΠΎΠ½ ΠΆΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌ). ΠΡΠ΅ΡΠΈΠΊΡ ΠΈΠ·Π±Π°Π²ΠΈΡ Π½Π°Ρ ΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ Π½Π° Π²ΡΠ΅Ρ
ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Ρ Π² ΠΎΠ±ΡΠ΅ΠΌ css ΡΠ°ΠΉΠ»Π΅ (Π±Π°Π·ΠΎΠ²ΠΎΠΌ), Π° ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΈΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ
(Π½Π΅ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ) ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
. ΠΠ»ΠΈ ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° Π½Π°Π΄ ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΎΠΉ ΠΌΠΎΠ³ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ². ΠΡΠΎΡΠ°Ρ ΠΏΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ (ΠΊΠΎΠ΄ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌΠΈ), Π΄ΠΎΠΏΡΡΡΠΈΠΌ Π΄Π»Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠ², Π³Π°Π»Π΅ΡΠ΅ΠΉ, ΠΈ ΡΡΠΎΠ±Ρ ΠΈΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π±Π΅Π· ΡΡΡΠ΄Π° Π²ΡΡΡΠΎΠΈΡΡ Π² Π»ΡΠ±ΠΎΠΉ ΡΠ°ΠΉΡ, ΡΠΎ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΡ. ΠΡΠΈΠΌΠ΅Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠ° «fa» Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΎΡΠΎΠ±ΡΡ
ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΡ font-awesome, ΡΠ΄ΠΎΠ±Π½Π°Ρ, ΠΊΡΡΠ°ΡΠΈ, Π²Π΅ΡΡ, Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π² ΡΠ²ΠΎΠΈΡ
ΡΠ°ΠΉΡΠ°Ρ
π .
Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ β ΡΡΠ΅Π±Π½ΠΈΠΊ CSS
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <img>
ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠ², Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΈ Ρ.Β ΠΏ. ΠΠ»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅Π³Π° img ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, border, box-shadow, opacity, float ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π²ΠΈΠ΄ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅, ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊ ΡΠ΅Π³Ρ img ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
border
β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΌΠΊΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ΅Π»ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ), ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΊΠ°Π·Π°Π² Π»ΡΠ±ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡ. ΠΠ°ΠΊ Π²Ρ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΊΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ.padding
β Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΡΠ°ΠΌΠΊΠΎΠΉ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΡΠΌΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΈ. Π Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background-color ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈ ΡΠ°ΠΌ ΡΠ²Π΅Ρ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΈ.box-shadow
β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² ΠΏΠ°ΡΠ΅ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌΠΈ, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΎΡΠΌΠΈΡΡ ΠΏΠΎΡΡΡΠ΅Ρ Π² ΡΡΠΈΠ»Π΅ Polaroid:
ΠΡΡΠ΅ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Polaroid Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS (ΡΠΊΡΠΈΠ½ΡΠΎΡ)Π Π²ΠΎΡ ΠΈ ΠΊΠΎΠ΄ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° (ΡΠ°Π·Π²Π΅ΡΠ½ΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ HTML ΠΈ CSS):
<div> <img src="URL-of-your-photo" /> </div>
.polaroid { position: relative; } .polaroid img { border: 25px solid #fafafa; border-top-width: 35px; border-bottom-width: 100px; -webkit-box-shadow: 3px 3px 6px 4px #888; -moz-box-shadow: 3px 3px 6px 4px #888; box-shadow: 3px 3px 6px 4px #888; }
float
β ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ² ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ CSS-ΠΊΠΎΠ΄Π°, ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΠΎΡΠ½ΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ:
Π€ΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS (ΡΠΊΡΠΈΠ½ΡΠΎΡ)
ΠΡΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ΅Π³ΠΎΠ² img ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠΊΠΈ, ΡΡΠΎΠ±Ρ Π½Π΅ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΌΠΊΠΈ ΠΊ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°). Π’Π°ΠΊ, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΊΠ»Π°ΡΡ .gallery-photo
Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ, ΠΈ ΡΠΆΠ΅ ΠΊ Π½Π΅ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΠΈ. ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² β Π±Π»Π°Π³ΠΎ, CSS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΈΡΠΎΠΊΠΈΠΉ Π²ΡΠ±ΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ.
ΠΠ°Π»Π΅Π΅ Π² ΡΡΠ΅Π±Π½ΠΈΠΊΠ΅: ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ background-image.
background-image — CSS: ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS background-image
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΡΡΡΡΡΡ Π½Π° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΡΠ»ΠΎΠ΅Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. ΠΠ΅ΡΠ²ΡΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΡΠ»ΠΎΠΉ ΡΠΈΡΡΠ΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» Π±Π»ΠΈΠΆΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ°ΡΠ΅ΠΌ ΠΏΠΎΠ²Π΅ΡΡ
Π½ΠΈΡ
ΡΠΈΡΡΡΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° ΠΏΠΎΠ΄ Π½ΠΈΠΌΠΈ ΡΠΈΡΡΠ΅ΡΡΡ background-color
. Π’ΠΎ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΡΡΡΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ background-clip
ΠΈ background-origin
.
ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½ΠΎ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ°ΠΉΠ», ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΡΠΉ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ URI, Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½), Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π΅Π³ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none
.
background-color
. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°ΠΏΠ°ΡΠ½ΠΎΠ³ΠΎ. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ Π»ΠΈΠ±ΠΎ ΠΊΠ°ΠΊ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ none
, Π»ΠΈΠ±ΠΎ ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
.
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΊΠ°ΠΆΠΈΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ Π·Π°ΠΏΡΡΠΎΠΉ:
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅:
Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ (ΠΊ Π½ΠΈΠ·Ρ, rgba (255,255,0,0,5), rgba (0,0,255,0,5)),
url ('catfront.png');
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅;
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²Π΅ΡΠ½ΡΡΡΡΡ;
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΎ;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
-
Π½Π΅Ρ
- — ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ΅Π΅ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
-
<ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅>
- — ΡΡΠΎ
<ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅>
, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ Π·Π°ΠΏΡΡΡΠΌΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ½ΠΎΠ².
ΠΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ. ΠΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π΄Π»Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° Π½Π΅ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΠΎ ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΈΠΈ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΠΎΠΎΠ±ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π²Π°ΠΆΠ½ΡΡ Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π³ΠΎ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π»ΡΡΡΠ΅ ΠΎΠΏΠΈΡΠ°ΡΡ Π΅Π΅ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
# , Π³Π΄Π΅
= none | , Π³Π΄Π΅
= | <ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ()> | <Π½Π°Π±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ()> | | <ΠΊΡΠ°ΡΠΊΠ° ()> | <ΠΏΠ»Π°Π²Π½ΠΎΠ΅ Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅ ()> | <Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ> Π³Π΄Π΅
= image ( ? [ ?, ?]!)
= image-set ( #)
= element ( )
= paint ( , ?)
<ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎΠ΅ Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅ ()> = ΠΏΠ»Π°Π²Π½ΠΎΠ΅ Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅ (, ?)
= | <ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ()> | <ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ()> | <ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ()> | , Π³Π΄Π΅
= ltr | rtl
= | <ΡΡΡΠΎΠΊΠ°>
<ΡΠ²Π΅Ρ> =| | | | <ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΡΠ²Π΅Ρ> | <ΠΈΠΌΡ-ΡΠ²Π΅ΡΠ°> | ΡΠ΅ΠΊΡΡΠΈΠΉ ΡΠ²Π΅Ρ | <ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΉ-ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠΉ-ΡΠ²Π΅Ρ>
= [ | <ΡΡΡΠΎΠΊΠ°>] [<ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅> || type ( )]
=
= <ΠΏΡΠΎΡΠ΅Π½Ρ>? && <ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅>
= <ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅> |
= linear-gradient ([ | to ]?, )
= ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ-Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ-Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ([<ΡΠ³ΠΎΠ»> | Π΄ΠΎ <ΡΡΠΎΡΠΎΠ½Ρ- ΠΈΠ»ΠΈ-ΡΠ³Π»Π°>]?, <ΡΠΏΠΈΡΠΎΠΊ-ΠΎΡΡΠ°Π½ΠΎΠ²ΠΎΠΊ-ΡΠ²Π΅ΡΠΎΠ²>)
<ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ-Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ()> = ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ-Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ([|| ]? [at ]?, )
= ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ-ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠΉ-Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ([ || <ΡΠ°Π·ΠΌΠ΅Ρ >]? [at ]?, )
= conic-gradient ([from ]? [at ] ?, ) Π³Π΄Π΅
= rgb (<ΠΏΡΠΎΡΠ΅Π½Ρ> {3} [/ ]?) | rgb (<ΡΠΈΡΠ»ΠΎ> {3} [/ <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>]?) | rgb (<ΠΏΡΠΎΡΠ΅Π½Ρ> # {3}, <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>?) | rgb (<ΡΠΈΡΠ»ΠΎ> # {3}, <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>?)
= rgba (<ΠΏΡΠΎΡΠ΅Π½Ρ> {3} [/ <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>]?) | rgba (<ΡΠΈΡΠ»ΠΎ> {3} [/ <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>]?) | rgba (<ΠΏΡΠΎΡΠ΅Π½Ρ> # {3}, <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>?) | rgba (<ΡΠΈΡΠ»ΠΎ> # {3}, <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>?)
= hsl (<ΠΎΡΡΠ΅Π½ΠΎΠΊ> <ΠΏΡΠΎΡΠ΅Π½Ρ> <ΠΏΡΠΎΡΠ΅Π½Ρ> [/ <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>]?) | hsl (<ΠΎΡΡΠ΅Π½ΠΎΠΊ>, <ΠΏΡΠΎΡΠ΅Π½Ρ>, <ΠΏΡΠΎΡΠ΅Π½Ρ>, <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>?)
= hsla (<ΠΎΡΡΠ΅Π½ΠΎΠΊ> <ΠΏΡΠΎΡΠ΅Π½Ρ> <ΠΏΡΠΎΡΠ΅Π½Ρ> [/ <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>]?) | hsla (<ΠΎΡΡΠ΅Π½ΠΎΠΊ>, <ΠΏΡΠΎΡΠ΅Π½Ρ>, <ΠΏΡΠΎΡΠ΅Π½Ρ>, <Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅>?)
<ΡΡΠΎΡΠΎΠ½Π°-ΠΈΠ»ΠΈ-ΡΠ³ΠΎΠ»> = [ΡΠ»Π΅Π²Π° | ΡΠΏΡΠ°Π²Π°] || [Π½Π°Π²Π΅ΡΡ | Π²Π½ΠΈΠ·Ρ]
<ΡΠΏΠΈΡΠΎΠΊ-ΠΎΡΡΠ°Π½ΠΎΠ²ΠΎΠΊ-ΡΠ²Π΅ΡΠΎΠ²> = [<ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ°-ΡΠ²Π΅ΡΠΎΠ²> [, <ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°-ΡΠ²Π΅ΡΠΎΠ²>]? ] #,
= ΠΊΡΡΠ³ | ΡΠ»Π»ΠΈΠΏΡ
<ΡΠ°Π·ΠΌΠ΅Ρ> = Π±Π»ΠΈΠΆΠ°ΠΉΡΠ°Ρ ΡΡΠΎΡΠΎΠ½Π° | Π΄Π°Π»ΡΠ½ΡΡ ΡΡΠΎΡΠΎΠ½Π° | Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠ³ΠΎΠ» | Π΄Π°Π»ΡΠ½ΠΈΠΉ ΡΠ³ΠΎΠ» | <Π΄Π»ΠΈΠ½Π°> | <Π΄Π»ΠΈΠ½Π°- ΠΏΡΠΎΡΠ΅Π½Ρ> {2}
<ΠΏΠΎΠ·ΠΈΡΠΈΡ> = [[ΡΠ»Π΅Π²Π° | ΡΠ΅Π½ΡΡ | ΡΠΏΡΠ°Π²Π°] || [Π½Π°Π²Π΅ΡΡ | ΡΠ΅Π½ΡΡ | Π²Π½ΠΈΠ·Ρ] | [ΡΠ»Π΅Π²Π° | ΡΠ΅Π½ΡΡ | ΠΏΡΠ°Π²ΠΎ | <Π΄Π»ΠΈΠ½Π°- ΠΏΡΠΎΡΠ΅Π½Ρ>] [Π½Π°Π²Π΅ΡΡ | ΡΠ΅Π½ΡΡ | Π²Π½ΠΈΠ·Ρ | <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>]? | [[ΡΠ»Π΅Π²Π° | ΡΠΏΡΠ°Π²Π°] <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>] && [[Π²Π²Π΅ΡΡ | ΡΠ½ΠΈΠ·Ρ] <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>]]
<ΡΠ³Π»ΠΎΠ²ΠΎΠΉ-ΡΠΏΠΈΡΠΎΠΊ-ΠΎΡΡΠ°Π½ΠΎΠ²ΠΎΠΊ> = [<ΡΠ³Π»ΠΎΠ²ΠΎΠΉ-ΡΠ²Π΅Ρ-ΡΡΠΎΠΏ> [, <ΡΠ³Π»ΠΎΠ²ΠΎΠΉ-ΡΠ²Π΅Ρ-ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°>]? ] #, <ΡΠ³Π»ΠΎΠ²ΠΎΠΉ-ΡΠ²Π΅ΡΠ½ΠΎΠΉ-ΡΡΠΎΠΏΠΎΡ>, Π³Π΄Π΅
<Π°Π»ΡΡΠ°-Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅> = <ΡΠΈΡΠ»ΠΎ> | <ΠΏΡΠΎΡΠ΅Π½Ρ>
<ΠΎΡΡΠ΅Π½ΠΎΠΊ> = <ΡΠΈΡΠ»ΠΎ> | <ΡΠ³ΠΎΠ»>
= ?
<Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ-ΡΠ²Π΅Ρ-ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°> = <Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ>
<Π΄Π»ΠΈΠ½Π°-ΠΏΡΠΎΡΠ΅Π½Ρ> = <Π΄Π»ΠΈΠ½Π°> | <ΠΏΡΠΎΡΠ΅Π½Ρ>
<ΡΠ³Π»ΠΎΠ²Π°Ρ-ΡΠ²Π΅Ρ-ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ°> = <ΡΠ²Π΅Ρ> && <ΡΠ²Π΅Ρ-ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ°-ΡΠ³ΠΎΠ»>?
= , Π³Π΄Π΅
= {1,2}
= {1,2}
<ΡΠ³ΠΎΠ»-ΠΏΡΠΎΡΠ΅Π½Ρ> = <ΡΠ³ΠΎΠ»> | <ΠΏΡΠΎΡΠ΅Π½Ρ>
ΠΠ°ΡΠ»ΠΎΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π²Π΅Π·Π΄Ρ ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΊΠΈ.
HTML
ΠΡΠΎΡ Π°Π±Π·Π°Ρ ΠΏΠΎΠ»ΠΎΠ½ ΠΊΠΎΡΠ΅ΠΊ
ΠΈ Π·Π²Π΅Π·Π΄.
ΠΡΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π½Π΅Ρ.
ΠΠΎΡ Π²Π°ΠΌ Π΅ΡΠ΅ ΠΊΠΎΡΠ΅ΠΊ.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π½ΠΈΡ
!
Π Π½Π΅ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ.
CSS
ΠΏ {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 1.5em;
ΡΠ²Π΅Ρ: # FE7F88;
ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π½Π΅Ρ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ;
}
div {
ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°:
url ("mdn_logo_only_color.png ");
}
.catsandstars {
ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°:
url ("startransparent.gif"),
url ("catfront.png");
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΡΠ°Π±Π»ΠΈΡ BCD Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅
HTML img vs CSS background-image
ΠΡΠ°ΠΊ, Π²Ρ ΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½-ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Π½Π΅ΠΉ ΠΈ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML & lt; img & gt;
ΠΈΠ»ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS.
Π‘Π½Π°ΡΠ°Π»Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ: Β«ΠΡΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅?Β»
Π ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠΈΡΡΠ°ΡΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° ΠΏΡΠΈΠ²ΠΎΠ΄ΡΡ ΠΊ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ.
ΠΠΎ Π²Ρ Π·Π΄Π΅ΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΡΠΈΠ½ΡΡΡ ΠΎΠ±ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ .
ΠΠΎΡ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ ΠΏΡΠΎΡΠ΅ΡΡ Π²ΡΠ±ΠΎΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ.
Π¨Π°Π³ 1. Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²ΠΈΠ΄Π½Ρ, Π½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡΡ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, & lt; img & gt; Π’Π΅Π³ΠΈ
ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΈ Π°ΡΡΠΈΠ±ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²ΡΠ±ΡΠ°Π½Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°. ΠΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ ΠΈ Π΄Π»Ρ ΠΈΠ½Π΄Π΅ΠΊΡΠ°ΡΠΈΠΈ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ
ΠΏΠΎΠΈΡΠΊΠ° Google.ΠΠΎΡ Π²ΡΠ΄Π΅ΡΠΆΠΊΠ° ΠΈΠ· ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠ³Π° Google Π΄Π»Ρ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠΎΠ² ΠΎΠ± ΡΠΌΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ²:
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΠ±ΠΎΡ Googlebot Π½Π΅ Π²ΠΈΠ΄ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°ΠΏΡΡΠΌΡΡ, ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΠΌΡΡ Π½Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ alt. ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ Β«altΒ» ΡΠ»ΠΎΠ²ΠΎΠΌ Β«titleΒ» ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π°ΡΡΠΈΠ±ΡΡΠ°ΠΌΠΈ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅Π½Π½ΠΎΡΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ!
Π₯ΠΎΡΠΈΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΈ Π»ΡΡΡΠ΅Π³ΠΎ SEO? ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ & lt; img & gt;
ΡΠ΅Π³.
ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΊΠ°ΠΊ ΡΠΈΡΡΠΎΠΌΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ-ΡΠ»ΡΡΡΠ΅Π½ΠΈΡΠΌ .
Π¨Π°Π³ 2. Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ
ΠΡΠ»ΠΈ Π²Ρ ΡΡΡΠ»Π°Π΅ΡΠ΅ΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈ Π·Π°ΠΏΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΏΠΎΡΡΠΎΠΌΡ Π²ΡΠ΅ΠΌΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊ ΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»Π°Π΅ΡΡΡ Π·Π°ΠΏΡΠΎΡ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π³ΡΡΠΏΠΏΠ° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΠ±ΡΡΠ²Π»Π΅Π½Π½ΡΡ Π² Π²Π°ΡΠ΅ΠΌ CSS, Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ» CSS ΠΈ ΠΈΠ·Π²Π»Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎ Π·Π°Π΄Π΅ΡΠΆΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
Ρ & lt; img & gt;
, Π·Π°ΠΏΡΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π°Π½Π°Π»ΠΈΠ·Π° HTML, ΠΏΠΎΡΡΠΎΠΌΡ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΅Π³Ρ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π½Π°ΡΠ°ΡΡ ΡΠΈΡΠ°ΡΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ( & lt; img & gt;
ΠΈΠ»ΠΈ & lt; picture & gt;
) ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°, Π΄Π»Ρ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π¨Π°Π³ 3. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΡΠΈΠΊΠΈ, Π° ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½Ρ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π²Π°Ρ Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
Π€ΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ background-color
, background-repeat
, background-attachment
, background-position
ΠΈ background-blend-mode
. ΠΡΠΎ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, Π΅ΡΠ»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΡΡ
.
ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΠ΅ ΡΠ΅ΠΊΡΡ ΠΏΠΎΠ²Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΏΡΠΎΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΠΎΡΠΈΠΏ Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ CSS.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
HTML & lt; img & gt; Π’Π΅Π³ΠΈ
ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΈ SEO.Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎ ΡΠΊΠΎΡΠΎΡΡΠΈ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΡΡ
, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΡΡΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
ΠΠ·Π±Π΅Π³Π°ΠΉΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠΎΠ½Π΅ CSS
ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²Π°ΠΆΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ,
ΡΠΎΠ³Π΄Π° ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ Π² HTML
ΡΠ΅Π³ Ρ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠΈΠΌ Π²ΠΌΠ΅ΡΡΠΎ
ΡΠ΅ΠΊΡΡ. Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Π³Π»Π°ΡΠΈΡ:
ΠΠΎ ΠΏΡΠΈΡΠΈΠ½Π°ΠΌ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π°Π²ΡΠΎΡΠ°ΠΌ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.Π‘ΠΌ. ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° F3 [WCAG20]. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² Π½Π΅Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡΡ , ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Ρ Π² Π²ΡΡΠΎΠΊΠΎΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠ΅ ΡΠ΅ΠΆΠΈΠΌΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠΎΡΠ½ΠΈΠΊ .
ΠΠ΅ ΠΌΠΎΠ³Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ «Π½Π΅Π²Π°ΠΆΠ½ΡΠ΅» ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅ΠΉ ΡΡΠ΅Π΄Ρ ΠΈ Ρ. Π΄.?
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ CSS Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ «ΠΠΠΠΠΠ«», Π° Π½Π΅ Β«ΠΠΠΠΠΠΒ», ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π±ΡΠ²Π°ΡΡ ΡΠ»ΡΡΠ°ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ Π·Π°ΡΡΡΠ΄Π½ΡΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π³ΠΎ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ HTML Π±Π΅Π· ΡΠ΅Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.Π Π΄ΡΡΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π°Π²ΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Ρ ΠΎΡΠ΅ΡΡ ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ , Π° Π½Π΅ «Π²Π°ΠΆΠ½ΠΎ» Π΄Π»Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ, Π½ΠΎ ΠΈΠ· Π²Π΅ΠΆΠ»ΠΈΠ²ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°ΡΡ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΎ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅. ΠΠΎΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΠΌΠ±ΠΈΠ΅Π½ΡΠ΅. ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ vs ΡΠΈΡΡΠΎΠ΅ ΡΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ vs ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΎΠ±ΡΠ°Π·Ρ.
ΠΡΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS Π΅ΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠΉ
ΠΡΠ»ΠΈ ΠΠΎΡΡΠΎΠΌΡ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π²Π½ΡΡΡΠΈ Π‘Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎ: ΠΠ΅ Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎΠ³ΠΎ: ΠΠ½ΠΎΠ³Π΄Π° Π΅ΡΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ Π² ΡΡΠ΅ΠΊΠ΅ CSS ΠΈ Π²ΠΎΠ·Π½ΠΈ Ρ
ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΡΡΠΎΠΈΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π²Π΅ΡΡΡΠΊΡ ΡΠ°ΠΉΡΠ°, Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΡΡΠ±Ρ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΌΠΎΠ³Π»ΠΎ Π·Π°Π²ΠΈΡΠ½ΡΡΡ ΠΎΡ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΡΡΠΎΡΠΎΠ½Ρ.Π ΡΠ»ΡΡΠ°ΡΡ
, ΠΊΠΎΠ³Π΄Π° Ρ Π°Π²ΡΠΎΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΡΠΎΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΡΠΎ Π²Π·Π»ΠΎΠΌ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½
ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Ρ ΡΠΊΡΠ°Π½Π°
ΡΠΈΡΠ°ΡΠ΅Π»Ρ Π²ΠΈΠ΄ΠΈΡ ΠΠ΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π² Twitter @davidmacd ΠΡΠ²ΠΈΠ΄ ΠΠ°ΠΊΠ΄ΠΎΠ½Π°Π»ΡΠ΄ — Π²Π΅ΡΠ΅ΡΠ°Π½ WCAG, ΡΠΎΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ WAI ARIA Π²
HTML5
ΠΈ ΡΠ»Π΅Π½ ΡΠ°Π±ΠΎΡΠ΅ΠΉ Π³ΡΡΠΏΠΏΡ ΠΏΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ HTML5. ΠΠ½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ΅ΡΠ°ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΠ΄Ρ ΡΠΎ ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²ΡΠ΅ Π±Π°Π½Π½Π΅ΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² ΠΈΠ»ΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ, Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡ Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΈΡ
ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠ°ΠΊΡΠΎΡΠΎΠΌ, Π²Π»ΠΈΡΡΡΠΈΠΌ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ. Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ Π΄Π°Π½Π½ΡΠΌ HTTP-Π°ΡΡ
ΠΈΠ²Π°, ΡΡΠ΅Π΄Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ°Ρ
ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 1511 ΠΠ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΡΡΠΈ 650 ΠΠ ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 45% ΠΎΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. Π’Π΅ΠΏΠ΅ΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°Π³ΡΡΠΆΠ°Π»ΠΈΡΡ Ρ Π½ΠΈΠΌΠΈ Π±ΡΡΡΡΠ΅Π΅. Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΌΠ΅ΡΠΎΠ΄Π΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π² Π²ΠΈΠ΄Π΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΈ. ΠΡΡΠΌΠΎ Π² Π²Π°Ρ ΠΏΠΎΡΡΠΎΠ²ΡΠΉ ΡΡΠΈΠΊ! ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ — ΠΊΠΎΠ³Π΄Π° ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½Ρ, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΡ
Π·Π°ΡΠ°Π½Π΅Π΅. ΠΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΡΡΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠ½ΠΈΠ·ΠΈΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΡΠΈΠΌ ΡΠ°ΡΡ
ΠΎΠ΄Ρ. ΠΠΎΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΠΈΠ΄Π΅ΠΎΡΠΎΠ»ΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ: Π‘Π»ΠΎΠ²ΠΎ Β«Π»Π΅Π½ΠΈΠ²ΡΠΉΒ» Π² Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅ ΡΠ°ΡΡΠΎ ΠΏΡΠΈΠΏΠΈΡΡΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ»ΡΡΠ΅ ΠΈΠ·Π±Π΅Π³Π°ΡΡ ΡΠ°Π±ΠΎΡΡ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠ΅ΡΡΡΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΎΠ½ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ. ΠΠΌΠ΅ΡΡΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΠΈΡ
ΡΠ΅ΡΡΡΡΠΎΠ² ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ, Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΡΠΈΡ
ΡΠ΅ΡΡΡΡΠΎΠ² ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΡΡ Π΄ΠΎ ΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡ
ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ. Π’Π΅Ρ
Π½ΠΈΠΊΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ΅ΡΡΡΡΠ°ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΉΠ» JS ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅, Π»ΡΡΡΠ΅ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π΅Π³ΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ. ΠΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π·Π°ΡΠ°Π½Π΅Π΅, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ. ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ.ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ Π΄Π²Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°. 1. ΠΠΎΠ²ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΉ ΡΠ°Π³ Π΄Π»Ρ Π²Π°Ρ ΠΊΠ°ΠΊ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ° — ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π²Ρ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ½Π°ΡΠ°Π»Π° Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅Π½ΡΡΠΈΠ΅ Π·Π°ΠΏΡΠΎΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΌΠ΅Π½ΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π±Π°ΠΉΡΠΎΠ² Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΠΌΠ΅Π½ΡΡΡΡ ΠΊΠΎΠ½ΠΊΡΡΠ΅Π½ΡΠΈΡ Π·Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ½ΡΡ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ ΡΠ΅ΡΠΈ, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.ΠΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΡΠΌΠΎΠΆΠ΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΡΠ΅ΡΡΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΡΡΡΡΠ΅Π΅. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΡΠ°Π½ΠΈΡΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄Π½ΠΎΠΉ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ°Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΠ° Π±Π΅Π· ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. 2. Π‘Π½ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΡΡΠ°Ρ ΠΡΠΎΡΡΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ Π΄Π»Ρ Π²Π°Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠΎΠΈΠΌΠΎΡΡΡ Π΄ΠΎΡΡΠ°Π²ΠΊΠΈ. ΠΠΎΡΡΠ°Π²ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π΄ΠΎΡΡΠ°Π²ΠΊΠ° Π»ΡΠ±ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ Π°ΠΊΡΠΈΠ²Π° ΠΎΠ±ΡΡΠ½ΠΎ Π²Π·ΠΈΠΌΠ°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΡ
Π±Π°ΠΉΡΠΎΠ². ΠΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ ΡΠ°Π½Π΅Π΅, ΠΏΡΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, ΠΎΠ½ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΠ΅ ΠΎΠ±ΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π±Π°ΠΉΡΠΎΠ², Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ
Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ Π±Π°ΠΉΡΠΎΠ², ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°Π΅ΠΌΡΡ
ΠΈΠ· Π²Π°ΡΠ΅ΠΉ ΡΠ΅ΡΠΈ Π΄ΠΎΡΡΠ°Π²ΠΊΠΈ, ΡΠ½ΠΈΠΆΠ°Π΅Ρ Π·Π°ΡΡΠ°ΡΡ Π½Π° Π΄ΠΎΡΡΠ°Π²ΠΊΡ. ΠΡΠΎ ΡΡΠ°Π½Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΈΠ΄Π΅Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΡΠΎΡΡΠ° — ΠΎΡΠ»ΠΎΠΆΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π½Π΅ Π½ΡΠΆΠ½ΠΎ. ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½ΠΎ Π»Π΅Π½ΠΈΠ²ΠΎ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π°ΡΠΈΠ½Π°ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ ΡΠ°ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ). ΠΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±Π°ΠΉΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΏΡΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π°ΡΠ΄ΠΈΡΠ° Google Lighthouse. Π Π°ΡΠ΄ΠΈΡΠ΅, ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌΠΎΠΌ ΡΡΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ, Π΅ΡΡΡ ΡΠ°Π·Π΄Π΅Π», ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π½ΡΠΉ Π·Π°ΠΊΠ°Π΄ΡΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°Π½Π°Π»ΠΈΠ·Π°ΡΠΎΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ² ImageKit, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π»ΠΈ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ»ΠΈ Π½Π΅Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π²Π°ΠΆΠ½Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ Ρ
ΠΎΡΠΎΡΠ΅ΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Π½ΠΎ ΠΈ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ — Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS `background`. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΠΈΠ· Π΄Π²ΡΡ
ΡΠ΅Π³ΠΎΠ², , Π° Π·Π°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ CSS. ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°Π·Π±ΠΈΡΠ° Π½Π° Π΄Π²Π° ΡΡΠ°ΠΏΠ°: Π¨Π°Π³ ΠΏΠ΅ΡΠ²ΡΠΉ — ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°ΡΠ°Π½Π΅Π΅.ΠΠ»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΡ
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π³Π° Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠ°ΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π°ΡΡΠΈΠ±ΡΡ, ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΡ Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ, ΡΡΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (ΡΠΎ Π΅ΡΡΡ Π΅Π³ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ) ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΌΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΠΌ Π·Π°Π³ΡΡΠ·ΠΊΡ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°: Π ΡΡΠΎΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ Π½Π° ΠΠΎΠ³Π΄Π° ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ ΠΈΠ· ΡΡΠΈΡ
ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΌΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΠΌ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ Π»Π΅Π½ΠΈΠ²ΠΎ ΠΈ Π΅ΡΠ΅ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ.ΠΠΎ ΡΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΌΡ ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ
ΡΠ΅ΠΉΡΠ°Ρ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π²ΠΎ Π²ΡΡΠΏΠΎΡΡΠ΅. ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π°. ΠΡΠ»ΠΈ ΠΎΠ½ Π²ΠΎΡΠ΅Π» Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΌΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ° ΠΠΎΡ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°. ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, ΠΏΠ΅ΡΠ²ΡΠ΅ 3 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π·Π°ΡΠ°Π½Π΅Π΅. URL-Π°Π΄ΡΠ΅Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ Intersection Observer API — ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΠΎΠ²ΡΠΉ API Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈ ΠΏΡΠ΅Π΄ΠΏΡΠΈΠ½ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ. Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄Π΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ, ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΠΎΡΠΎΠ± Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΡ, Π±ΡΠ» Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ»ΠΈ Π½Π΅Ρ. API-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Intersection Observer Π΄Π΅Π»Π°Π΅Ρ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌ, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ
Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Intersection Observer API Π΄Π»Ρ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ: ΠΡ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»ΡΠ΅ΠΌ Π½Π°Π±Π»ΡΠ΄Π°ΡΠ΅Π»Ρ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π΄Π»Ρ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ API ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΠΎΡΠ΅Π» Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΡΠ»ΠΈ Π²Ρ ΡΡΠ°Π²Π½ΠΈΡΠ΅ Π²ΡΠ΅ΠΌΡ, Π·Π°ΡΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ Π½Π° Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΠ±ΠΎΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄Π°Ρ
, ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»ΡΡ
ΡΠΎΠ±ΡΡΠΈΠΉ ΠΈ Intersection Observer, Π²Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΠ΅, ΡΡΠΎ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Intersection Observer API Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΡΡΡΡΠ΅Π΅, ΠΈ Π²ΡΠ΅ ΠΆΠ΅ ΡΠ°ΠΉΡ Π½Π΅ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΡΠ»ΡΠΌ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. Π ΠΌΠ΅ΡΠΎΠ΄Π΅, Π²ΠΊΠ»ΡΡΠ°ΡΡΠ΅ΠΌ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, Π½Π°ΠΌ ΠΏΡΠΈΡΠ»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΉΠΌ-Π°ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ, ΡΡΠΎ ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²Π»ΠΈΡΠ½ΠΈΠ΅ Π½Π° Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Intersection Observer API Π΄ΠΎΡΡΡΠΏΠ½Π° Π½Π΅ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΊ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π³Π΄Π΅ API-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Intersection Observer Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ. ΠΡ ΡΡΠ»ΠΈ ΡΡΠΎ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅. Π ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Google Π΄ΠΎΠ±Π°Π²ΠΈΠ»Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Chrome — Chrome 76. ΠΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Chromium, ΡΠΎ Π΅ΡΡΡ Chrome, Edge, Safari ΠΈ Firefox. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π½Π°ΡΠΈΠ²Π½ΠΎΠΉ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° caniuse.com. Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π² ΠΈΠ³ΡΡ Π²ΡΡΡΠΏΠ°Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡ Β«Π·Π°Π³ΡΡΠ·ΠΊΠ°Β» ΠΏΡΠΈ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Π½Π° ΡΠ²ΠΎΠΈΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ
. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π±ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΡ
Π±Π°Π·ΠΎΠ²ΡΡ
Π·Π½Π°Π½ΠΈΠΉ HTML Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π°ΡΡΠΈΠ±ΡΡΠ° Β«Π·Π°Π³ΡΡΠ·ΠΊΠ°Β», ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ
Π΄ΡΡΠ³ΠΈΡ
Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠΎΠ² Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΡΠ°ΠΊ, ΠΊΠΎΠ΄ ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ — ΠΡΡΠΈΠ±ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π²ΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π΄Π»Ρ Π΅Π΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π΄Π°Π»Π΅Π΅ Π² ΡΡΠΎΠΌ Π±Π»ΠΎΠ³Π΅, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡ ΠΎΠΊΡΡΠΆΠ°ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π»Π΅Π½ΠΈΠ²ΠΎ Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ Π² Π²ΠΈΠ΄Π΅ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠ½ΠΈΠ³ΠΈ. ΠΡΡΠΌΠΎ Π² Π²Π°Ρ ΠΏΠΎΡΡΠΎΠ²ΡΠΉ ΡΡΠΈΠΊ! ΠΠΎΡΠ»Π΅ Π‘ ΡΠΎΠ½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ CSS Π²ΡΠ΅ Π½Π΅ ΡΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ.Π§ΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS, Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π΄Π΅ΡΠ΅Π²ΠΎ DOM (ΠΎΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ CSSOM (ΠΎΠ±ΡΠ΅ΠΊΡΠ½Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ CSS), ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΈΠ»Ρ CSS ΠΊ ΡΠ·Π»Ρ DOM Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ΅Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ CSS ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠ΅ΠΊΡΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π‘Π½Π°ΡΠ°Π»Π° ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ, Π½ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΆΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π»Π΅ΠΆΠΈΡ Π² ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΌΡ ΠΎΠ±ΠΌΠ°Π½ΡΠ²Π°Π΅ΠΌ Π±ΡΠ°ΡΠ·Π΅Ρ, Π·Π°ΡΡΠ°Π²Π»ΡΡ Π΅Π³ΠΎ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠΏΠ°Π΄Π΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΠΎΡ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS. Π‘Π»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ΄ Javascript Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΎΡΡΠ°Π»ΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ. ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ API Intersection Observer Ρ ΠΎΡΠΊΠ°ΡΠΎΠΌ ΠΊ ΡΠ»ΡΡΠ°ΡΠ΅Π»ΡΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ. Π£Π»ΠΎΠ²ΠΊΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² CSS. ΠΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ bg-image ΠΈΠΌΠ΅Π΅Ρ ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠ΅Π΅ ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ Π² ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. ΠΠ»Ρ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ ΡΠΎΡΠ½ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΠΈ ΠΏΠΎΡΡΠ΅Π±Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π½Π΅ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π»Π΅Π½ΠΈΠ²ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΡ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Ρ
ΠΎΡΠΎΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡΡΠ°, ΡΠΈΡΠΈΡΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠΈΡΠΈΠ½Ρ, ΠΊΠ°ΠΊ Β«Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΡΡΠΎΠ΄Π»ΠΈΠ²Β», Β«Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ΅Β» ΠΈ Ρ. Π. ΠΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΅ΡΠΈΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ, Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ? ΠΠ°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ — ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ Π΄ΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ±ΡΡΠ½ΠΎ ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ, ΡΡΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π’ΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΊΠΎΠ΄Π°. Π‘ΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠ΅ΡΡΠΉ ΡΠ²Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠΎΠ½ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ Π»ΡΡΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π±ΡΠ» Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΡΠΌ. ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π»ΡΡΡΠΈΡ
Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ Π½Π°ΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ: ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΠΌ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠΈΠΉ ΡΠ²Π΅Ρ ΠΈΠ· ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΅Π³ΠΎ. ΠΊΠ°ΠΊ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π΄Π°Π²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ
ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Google ΠΈ Pinterest. ΠΡΠΈΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Π·ΡΡΠΎΠ³ΠΎ ΠΈΠ· Manu.ninja ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΡΠΎΠ³ΠΎ — ΡΠ½Π°ΡΠ°Π»Π° ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ 1×1 ΠΏΠΈΠΊΡΠ΅Π»Ρ, Π° Π·Π°ΡΠ΅ΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ — ΠΎΡΠ΅Π½Ρ Π³ΡΡΠ±ΠΎΠ΅ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π±Π΅Π· ΡΡΠ΅ΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠΈΠΉ ΡΠ²Π΅Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ImageKit, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π² ImageKit, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π·Π΄Π΅ΡΡ: ΠΡΠΈΠΌΠ΅Ρ URL-Π°Π΄ΡΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ImageKit Π Π°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅Π³ΠΎ 661 Π±Π°ΠΉΡ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ 12700 Π±Π°ΠΉΡ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ 19x ΠΌΠ΅Π½ΡΡΠ΅ . Π ΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΠΎΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΊ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠΎΡ Π²ΠΈΠ΄Π΅ΠΎ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠ΅Π΅, ΠΊΠ°ΠΊ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ: ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠΈΠΉ Π·Π΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°ΡΡΠΈΡΠΈΡΡ Π²ΡΡΠ΅ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ ΠΈΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ°. ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΎΡΠ΅Π½Ρ Π½ΠΈΠ·ΠΊΠΎΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠ°Π·ΠΌΡΡΡΡ Π²Π΅ΡΡΠΈΡ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ. ΠΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π»ΡΡΡΠ΅, Π½ΠΎ ΠΈ Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΠ΅Π³ΠΎ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΎΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Facebook ΠΈ Medium.com Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΠ²ΠΎΠΈΡ
Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ
ΠΈ ββΠ² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
. ΠΡΠΈΠΌΠ΅Ρ URL-Π°Π΄ΡΠ΅ΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ LQIP Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ImageKit LQIP ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 1300 Π±Π°ΠΉΡ, ΡΡΠΎ ΠΏΠΎΡΡΠΈ Π² 10 ΡΠ°Π· ΠΌΠ΅Π½ΡΡΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ Π»ΡΠ±ΡΠΌ Π΄ΡΡΠ³ΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ. ΠΠΎΡ Π²ΠΈΠ΄Π΅ΠΎ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠ΅Π΅, ΠΊΠ°ΠΊ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ: ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΠΊΠΎΠ΄ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ LQIP Π·Π΄Π΅ΡΡ. ΠΠ· ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π²ΠΈΠ΄Π΅ΠΎ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ
Π΄Π²ΡΠΌΡ Π²ΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ, ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΉ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ ΠΎΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΊ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΄Π°Π²Π°Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π΄Π°Π»ΡΡΠ΅. ΠΈ ΡΠ»ΡΡΡΠ°Π΅Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΠ΅ Π½Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ Π·Π°ΠΏΡΡΠΊΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΡΠ΅, ΠΌΡ ΠΏΡΠΎΠ²Π΅ΡΡΠ»ΠΈ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ
ΠΎΠ΄ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΠΎ Π΅ΡΡΡ ΠΊΠΎΠ³Π΄Π° Π²Π΅ΡΡ
Π½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΊΡΠ°Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π₯ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Intersection Observers Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π»ΡΡΡΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Π³Π΄Π° Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π²Ρ
ΠΎΠ΄ΡΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° — Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π°ΠΏΠ°Ρ Π΄ΠΎ ΡΠΎΡΠΊΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Intersection Observer API Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ root Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ rootMargin (ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΊΠ°ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΏΠΎΠ»Π΅ΠΉ CSS), ΡΡΠΎΠ±Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΡΠ°ΠΌΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π½Π°Ρ
ΠΎΠ΄ΡΡΠ΅ΠΉ Β«ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Π½ΠΈΠ΅Β». Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΠ°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΡΠ°Π΅ΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°Π²Π½Π° 0, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠΎΠ³. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΡΠΎΠ³ Π² 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π²ΠΈΠ΄Π΅ΠΎ Π½ΠΈΠΆΠ΅ (ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΠΉΡΠ΅ ΡΠ΅ΡΠ΅Π²ΡΠ΅ Π·Π°ΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΡΠΊΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π½ΠΈΠ·Ρ), ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΡΠ΅ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ 5-Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎΠ³Π΄Π° Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ 4-Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ 6-Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ Π΄Π°Π΅ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ. ΠΡΠ»ΠΈ Π²Ρ Π΅ΡΠ΅ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ, Π²ΠΎ Π²ΡΠ΅Ρ
Π½Π°ΡΠΈΡ
ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΡΡΠ΅ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (image3.jpg) Π²ΡΠ΅Π³Π΄Π° Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ ΠΏΠΎ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ — Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΡΠ°Π½Π΅Π΅, Π° Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΡΠΎΡΠ½ΠΎ Π½Π° ΠΏΠΎΡΠΎΠ³Π΅ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π±ΡΠ°ΡΠ·Π΅ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΡΠΈΡΠ»ΡΡΡ ΡΡΠΎ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΏΠΎΡΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ°ΡΠ·Π΅ΡΡ ΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠΈΠΏ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΠΈ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠΈ Π΄Π°Π½Π½ΡΡ
Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΎΡ ΠΏΠΎΡΠΎΠ³, ΡΡΠΈΡΡΠ²Π°Ρ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ. ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΡΠΈΠ²ΠΈΠ°Π»ΡΠ½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ, Π΅ΡΠ»ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ΅ΡΠ΅Π½, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ Ρ
ΠΎΡΠΎΡΠ΅Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠΈΠ±ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΡΡΠΎ Π΄ΠΎΠΏΡΡΠΊΠ°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ — Π»Π΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° Π²ΡΠ΅Ρ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ Π½Π΅ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΄Π°ΠΆΠ΅ ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π² Π²Π΅ΡΡ
Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠ΅Π½ Javascript. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠ±ΡΠΈΡ
ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ. a) ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΠ»ΠΈ Π² Π½Π°ΡΠ°Π»Π΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Ρ Π»Π΅Π½ΠΈΠ²ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ , Π° Π½Π΅ . ΠΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΌΠ°ΡΠΊΠ΅ΡΠΈΠ½Π³ΠΎΠ²ΠΎΠΌΡ Π±Π°Π½Π½Π΅ΡΡ, Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°ΠΌ ΠΈ Ρ. Π., ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΡ
, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΊΡΠ°Π½Π°, ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠ½ΡΡΡ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠΈΠΏ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π·Π°ΡΠ°Π½Π΅Π΅, Π° ΠΊΠ°ΠΊΠΈΠ΅ — Π»Π΅Π½ΠΈΠ²ΠΎ. b) ΠΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π»Π΅Π½ΠΈΠ²ΠΎ. ΠΡΠΎ ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΎ Π½Π° ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΎΡΡ ΡΠ°Π½Π΅Π΅ — Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΡΠ°Π½Π΅Π΅. ΠΡΠ°ΠΊ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΡΠ½ΠΈΠ·Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Π° Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ. c) ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½Π°Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½Π° ΠΈΠ»ΠΈ Π΄Π²Π΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΈΠ»ΠΈ Π΅ΡΠ»ΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΌΠ΅Π½ΡΡΠ΅ 5 ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ. ΠΡΠΎ Π½Π΅ ΠΏΡΠΈΠ½Π΅ΡΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ JS, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡΡΠ΅Ρ Π»ΡΠ±ΡΡ Π²ΡΠ³ΠΎΠ΄Ρ, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΡ ΠΎΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΊΠΎΠ³ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΡ ΠΈΠ΄Π΅Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Javascript Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. Π₯ΠΎΡΡ Π½Π°ΡΠΈΠ²Π½Π°Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΎΠ±Π΅ΡΠ°Π΅Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΡΡΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ, ΠΏΡΠΈ ΡΠΎΠΌ, ΡΡΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π²ΡΠ΅ Π΅ΡΠ΅ Π±Π»ΠΈΠ·ΠΊΠ° ΠΊ 70%, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΠΎΠΏΡΡ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π²Π°ΠΌ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ JS. Π₯ΠΎΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π²Π°ΡΠΈΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Javascript, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π½Π°ΡΠΈ Π΄Π½ΠΈ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ
Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ°ΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ javascript, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ javascript. Π²ΠΎΠΎΠ±ΡΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΈΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎ ΡΠΎΠΌ, ΠΏΠΎΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΈ ΡΡΠΎ ΠΈΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡΡ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΈΠ»ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ Javascript. ΠΠ»ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³ noscript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π΄Π»Ρ ΡΡΠΈΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π° ΠΡΠ° Π²Π΅ΡΠΊΠ° Π½Π° Stack Overflow ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΡΠΈΠΌΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, ΠΈ Π΅Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π²ΡΠ΅ΠΌ, ΠΊΡΠΎ Ρ
ΠΎΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΡΡΠΎΠΉ Π³ΡΡΠΏΠΏΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π΄Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ², Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡΠΏΡΡΠ°Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΠΏΠ»Π°ΡΡΠΎΡΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΠΈΡΠΌΠΈ. yall.js (Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π»Π΅Π½ΠΈΠ²ΡΠΉ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ) lazysizes jQuery Lazy WeltPixel Lazy Loading Enhanced Magento Lazy Image Loader Shopify ΠΠ»Π°Π³ΠΈΠ½ Lazy Image WordPress A3 Lazy Load ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π²Π½Π΅Π΄ΡΠΈΠ»ΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ, Π²Ρ Π·Π°Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠΌΡ. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± — ΠΎΡΠΊΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«Π‘Π΅ΡΡΒ»> Β«ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ». ΠΠ΄Π΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π² ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°Π·, Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ Π·Π°ΡΠ°Π½Π΅Π΅.ΠΠ°ΡΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΡΠ½Π΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, Π±ΡΠ΄ΡΡ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π°ΠΏΡΠΎΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠ»Π±ΡΠ΅ Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄Π° Π² ΡΡΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΡΠ°ΠΊΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅ΡΡΡΡ, ΠΈΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ³ΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± — Π·Π°ΠΏΡΡΡΠΈΡΡ ΠΎΡΡΠ΅Ρ Π°ΡΠ΄ΠΈΡΠ° Google Chrome Lighthouse Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π²Π½Π΅Π΄ΡΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΈ ΠΏΠΎΠΈΡΠΈΡΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠ΅ΡΠΊΡΠ°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΒ». Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅, ΡΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ»ΡΡΡΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²Π°ΡΠΈΡ
Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΡΠΌΠ΅Π½ΡΡΠΈΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π·Π°ΡΡΠ°ΡΡ Π½Π° Π΄ΠΎΡΡΠ°Π²ΠΊΡ Π·Π° ΡΡΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΡ Π½Π΅Π½ΡΠΆΠ½ΡΡ
ΡΠ΅ΡΡΡΡΠΎΠ², Π·Π°Π³ΡΡΠΆΠ°Π΅ΠΌΡΡ
Π·Π°ΡΠ°Π½Π΅Π΅, ΠΏΡΠΈ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π§Π΅ΠΌ Π±ΡΡΡΡΠ΅Π΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅ΠΌ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ, ΡΡΠΎ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ. ΠΡΠ°ΠΊ, ΡΠ΅Π³ΠΎ Π²Ρ ΠΆΠ΄Π΅ΡΠ΅? ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ! ΠΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°? ΠΠ΅Ρ? ΠΠ°ΡΠ½ΠΈΡΠ΅ ΡΠ°Π±ΠΎΡΡ Ρ CDN ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ImageKit Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ! Π ΡΡΠΎΠΌ Π±Π»ΠΎΠ³Π΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³ΠΎΠΌ HTML img ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ CSS, ΡΡΠΎΠ±Ρ Π²Π°ΠΌ Π±ΡΠ»ΠΎ ΠΏΡΠΎΡΠ΅ ΡΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. 1. Π‘ΠΠΠΠ ΠΠΠΠΠ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ , Π΅ΡΠ»ΠΈ ΠΎΠ½ ΡΠ²ΡΠ·Π°Π½ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π½ΠΈΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ΅Π³ΠΎ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. 2. ΠΠΠ‘Π’Π£ΠΠΠΠ‘Π’Π¬: ΠΡΠ»ΠΈ Π΅ΡΡΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΡΡΡ ΠΏΡΠΎΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ. Google Π½Π΅ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΡΠΈΠΉ ΡΠ΅ΠΊΡΡ ΠΈ Π°ΡΡΠΈΠ±ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°ΡΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π°.ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΠΈΠ½Π΄Π΅ΠΊΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌΠΈ ΡΠΈΡΡΠ΅ΠΌΠ°ΠΌΠΈ. ΠΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ΠΌ Π½ΡΠΆΠ΅Π½ Π±ΡΠ» Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π² ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ
ΡΠΈΡΡΠ΅ΠΌΠ°Ρ
Π±ΡΠ»ΠΎ ΠΏΡΠΈΠΎΡΠΈΡΠ΅ΡΠ½ΡΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ . ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌΠΈ ΡΠ°ΠΊΠΈΡ
ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠ°ΠΊ Π·Π°Π»ΠΈΠ²ΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ ΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°, ΡΡΠΎΠ±Ρ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ. 3. ΠΠ ΠΠΠΠΠΠΠΠ’ΠΠΠ¬ΠΠΠ‘Π’Π¬: ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π² CSS ΠΏΠΎΡΡΠ΅Π±ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π°, ΡΡΠΎΠ±Ρ ΠΈΠ·Π²Π»Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΈ ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Ρ HTML img , Π·Π°ΠΏΡΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π°Π½Π°Π»ΠΈΠ·Π° HTML.Π₯ΠΎΡΡ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΡΡΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠ»ΡΡΡΠ΅Π½ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ Π·Π½Π°ΡΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΠ΅ΠΉ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. 4. ΠΠΠ§ΠΠ’Π¬: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ΅Π³ HTML , Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°Π»ΠΈΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ°ΡΠΏΠ΅ΡΠ°ΡΡΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°Π»ΠΈΡΡ Π² ΠΏΠ΅ΡΠ°ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS. ΠΠ«ΠΠΠ: HTML-ΡΠ΅Π³ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΠΎΠΉ ΡΠ°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.Π Π΅ΡΠ΅Π½ΠΈΠ΅ ΠΎ Π²ΡΠ±ΠΎΡΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π½ΠΈΠΌΠΈ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²ΠΎΠΏΡΠΎΡΠ°, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΡΠ΄ΡΠΌ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅. Π‘ΠΠΠ‘ΠΠΠ ΠΡΡΠΈΠ±ΡΡ background ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² TABLE, TR ΠΈ TD (TH) ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ. ΠΡΡΠΈΠ±ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ. (ΠΠ΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ) ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°. ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ CSS ΡΠΌ. Π Β«Π‘Π²ΡΠ·Π°Π½Π½ΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅Β». Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΠ°Ρ ΡΠ°Π±Π»ΠΎΠ½ ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ — ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠΈΡ
ΠΊΠ°ΡΡΠΎΡΠ΅ΠΊ. ΠΠΎΡ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΠ²ΠΎΠΈ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ: ΠΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΠΌΠ΅Π½Ρ Β«ΠΠ°ΡΡΡΒ» Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ
ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΠ°ΠΊΠ΅Ρ ΠΊΠ°ΡΡΡ .Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Β«ΠΠ°ΡΡΡΠΎΠΈΡΡ HTML ΠΊΠ°ΡΡΡΒ» Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π° Β«ΠΠ°ΡΡΡΒ» Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS. role = "img"
Π° ΡΠ°ΠΊΠΆΠ΅ Π°ΡΠΈΡ-ΡΡΠΈΠΊΠ΅ΡΠΊΠ°
ΠΌΠΎΠΆΠ΅Ρ ΡΠΊΡΡΡΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ·-Π·Π° Π΄ΠΎΡΡΡΠΏΠ½ΡΡ
ΡΠ°ΡΡΠ΅Ρ ΠΈΠΌΠ΅Π½ΠΈ
, ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΡΡΠΎ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ Π°ΡΠΈΡ-ΡΡΠΈΠΊΠ΅ΡΠΊΠ°
.
ΠΈ Π°ΡΠΈΡ-ΡΡΠΈΠΊΠ΅ΡΠΊΠ°
Ρ ΡΡΠ°ΡΡΠΈΠ΅ΠΌ role = "img"
<Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½
role = "img" aria-label = "[ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π·Π΄Π΅ΡΡ]>
[Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅]
[Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅
ΠΌΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ] Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Ρ Π°Π²ΡΠΎΡΠ° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ CSS Π² div,
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ
<Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½
role = "img" aria-label = "[ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π·Π΄Π΅ΡΡ]>
[Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅]
Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΡΠ»Π΅ Π½Π΅Π³ΠΎ ΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π° ββΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ
Π±ΡΠ΄Π΅Ρ ΠΊΠ°Π·Π°ΡΡΡΡ, ΡΡΠΎ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΌ ΠΆΠ΅ ΠΌΠ΅ΡΡΠ΅, ΡΡΠΎ ΠΈ
ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. Π Π΅Π·ΡΠΌΠ΅
Ρ aria-label
ΠΈ role = "img.
ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π²Π΅ΡΠ½ΠΎ, Π² ΡΠΈΡΡΠ°ΡΠΈΠΈ
Π³Π΄Π΅ CSS Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ.
Ρ aria-label
ΠΈ role = "img"
ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± Π°Π²ΡΠΎΡΠ΅:
ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ
Π·Π°Π³ΡΡΠ·ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ — ΠΏΠΎΠ»Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ?
ΠΠ°ΡΠ΅ΠΌ Π²ΠΎΠΎΠ±ΡΠ΅ Π½ΡΠΆΠ½Π° ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ?
ΠΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π»Π΅Π½ΠΈΠ²ΠΎ?
Π‘ΠΏΠΎΡΠΎΠ±Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ±ΡΠ°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ΅Π³Π΅
, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°ΡΡΠΈΠ±ΡΡ src
ΡΠ΅Π³Π° Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΎ 1-ΠΌ ΠΈΠ»ΠΈ 1000-ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Π²Π°ΡΠ΅ΠΌ HTML ΠΈ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½Π΅ ΡΠΊΡΠ°Π½Π°, Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡ Π°ΡΡΠΈΠ±ΡΡ src
, ΠΎΠ½ Π²ΡΠ·ΠΎΠ²Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. src
. ΠΠΎΠΏΡΡΡΠΈΠΌ, ΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ URL ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ data-src
ΡΠ΅Π³Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° src
ΠΏΡΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΠΉ Javascript
scroll
, resize,
ΠΈ ΠΡΠΈΠ΅Π½ΡΠ°ΡΠΈΡ ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ
ΡΠΎΠ±ΡΡΠΈΠΉ Π² Π±ΡΠ°ΡΠ·Π΅Ρ.Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ — ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ. Π‘ΠΎΠ±ΡΡΠΈΡ resize ΠΈ directionChange ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²Π°ΠΆΠ½Ρ Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ. Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°. Π‘ΠΎΠ±ΡΡΠΈΠ΅ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈChange Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ· Π»Π°Π½Π΄ΡΠ°ΡΡΠ½ΠΎΠ³ΠΎ Π² ΠΏΠΎΡΡΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅ΠΆΠΈΠΌ ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ. Π ΡΠ°ΠΊΠΈΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΡΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. data-src
ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡ src
. ΠΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡ lazy
, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ, ΠΌΡ ΡΠ΄Π°Π»ΡΠ΅ΠΌ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ. ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌ, ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π±ΡΡΡΡΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°ΠΉΠΌ-Π°ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
src
Π²ΠΌΠ΅ΡΡΠΎ Π°ΡΡΠΈΠ±ΡΡΠ° data-src
. ΠΡΠΎ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ Ρ
ΠΎΡΠΎΡΠ΅Π³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π°Ρ
ΠΎΠ΄ΡΡΡΡ Π²Π²Π΅ΡΡ
Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡ
ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌΠΈ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΡΠ΅Π΅.ΠΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΆΠ΄Π°ΡΡ, ΠΏΠΎΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠ΅ ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ JS Π·Π°Π³ΡΡΠ·ΡΡ ΠΈΡ
. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Intersection Observer API Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
isIntersecting
, ΠΌΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ· Π°ΡΡΠΈΠ±ΡΡΠ° data-src
ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ Π΅Π³ΠΎ Π² Π°ΡΡΠΈΠ±ΡΡ src
, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°Π» Π·Π°Π³ΡΡΠ·ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°Π½ΠΎ, ΠΌΡ ΡΠ΄Π°Π»ΡΠ΅ΠΌ Π»Π΅Π½ΠΈΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ΄Π°Π»ΡΠ΅ΠΌ Π½Π°Π±Π»ΡΠ΄Π°ΡΠ΅Π»Ρ ΠΈΠ· ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°
height
ΠΈ width
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΈΠ»ΠΈ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π°ΠΏΡΡΠΌΡΡ. Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ ΡΡΠΈΠ»Π΅:
ΠΠ΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS
ΡΠ΅Π³ΠΎΠ²
ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ ΡΠ΅Π³ΠΎΠ²
Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ — Π΅ΡΠ»ΠΈ URL ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ΅Π½, Π΄Π°Π²Π°ΠΉΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
, ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π² CSS.ΠΠ΄Π½Π°ΠΊΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΊ ΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ lazy
, Π² CSS ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image
ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none. # bg-image
Ρ .lazy
ΠΊΠ»Π°ΡΡ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΈΠΉ ΠΏΡΠΈΠΎΡΠΈΡΠ΅Ρ Π² CSS, ΡΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎ # bg-image
, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image: none
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ . ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌ Π²Π½ΠΈΠ·, Intersection Observer (ΠΈΠ»ΠΈ ΠΏΡΠΎΡΠ»ΡΡΠΈΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ) ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΈ ΡΠ΄Π°Π»ΡΠ΅Ρ ΠΊΠ»Π°ΡΡ lazy
.ΠΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌΡΠΉ CSS ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-image
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π·Π°ΠΏΡΡΠΊΠ°ΡΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΡΠ΅Π΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
1. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΡ
Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Π΅ΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
2.ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π±ΡΡΠ΅ΡΠ° Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π§Π°ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΡΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡΡΡ ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅. Π ΡΡΠΎΠΌ ΡΡΠ΅Π½Π°ΡΠΈΠΈ, Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΡΠ΅ΠΌ ΡΠ°ΠΊΡΠΎΠΌ, ΡΡΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΈΠ·-Π·Π° ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π²Ρ ΡΠ°ΡΡΠΎ ΡΡΠ°Π»ΠΊΠΈΠ²Π°Π΅ΡΠ΅ΡΡ ΡΠΎ ΡΡΠ΅Π½Π°ΡΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΠΈ ΠΏΠΎΠΏΠ°Π΄Π°ΡΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΆΠ΄Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄, ΠΏΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ.ΠΡΠ° Π·Π°Π΄Π΅ΡΠΆΠΊΠ° ΡΡ
ΡΠ΄ΡΠ°Π΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.
ΠΠΌΠ΅ΡΡΠΎ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΠΎΡΠ½ΠΎ Π²Ρ
ΠΎΠ΄ΡΡ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π·Π°Π³ΡΡΠΆΠ°ΠΉΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ, ΡΠΊΠ°ΠΆΠ΅ΠΌ, Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Ρ
ΠΎΠ΄Π° Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.ΠΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠ³Π³Π΅ΡΠΎΠΌ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΌ Π²Ρ
ΠΎΠ΄ΠΎΠΌ Π² ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. 3. ΠΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΡΠΈ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅
ΠΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ, Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π·Π½Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅. Π Π΅ΡΠ»ΠΈ ΠΌΡ Π½Π΅ ΡΠΊΠ°ΠΆΠ΅ΠΌ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΡΠΎ Π΅ΡΡΡ 0 x 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠ°ΠΊ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠ° Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ, ΠΈ ΡΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈΠ· ΠΆΡΡΠ½Π°Π»Π° Smashing Magazine, ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΠΏΡΠΈΡΡΠ½ΡΠΉ ΠΎΠΏΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ, ΡΠΊΠ°Π·Π°Π² Π²ΡΡΠΎΡΡ ΠΈ / ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΡΠΎΠ±Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΌΠΎΠ³ ΡΠ°ΡΠΊΡΠ°ΡΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ ΡΠΈΡΠΈΠ½ΠΎΠΉ.ΠΠΎΠ·ΠΆΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΆΠ΅ ΡΠΊΠ°Π·Π°Π½ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ Π²ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ Π² Π½Π΅Π³ΠΎ, ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΠΎΠΊΡΡΠ³ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅. 4. ΠΠ΅ Π»Π΅Π½ΠΈΡΠ΅ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Javascript-Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Javascript Π΄Π»Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅
ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π»ΠΈ Π»Π΅Π½ΠΈΠ²Π°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ°?
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π Π°Π·Π½ΠΈΡΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³ΠΎΠΌ HTML img ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ CSS
HTML / ΡΠ΅Π³ΠΈ ΡΠ°Π±Π»ΠΈΡ / ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ — ΠΈΠ½Π΄Π΅ΠΊΡ ΡΠ΅Π³Π°
: ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅
: ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΡΠ΅ΠΉΠΊΠ°ΠΌ ΠΏΠΎΠ΄ΡΡΠ΄
: ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠ΅
ΠΡΡΠΈΠ±ΡΡ ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ background = «» URL URL-Π°Π΄ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΡΠΈΠΌΠ΅Ρ
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Row3 - Col3
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠΎΠΊΠΈ Π ΡΠ΄ 1 — Π‘ΡΠΎΠ»Π±Π΅Ρ Π ΡΠ΄ 1 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 1 — Π‘ΡΠΎΠ»Π±Π΅Ρ 3 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π± 1 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π±Π΅Ρ 3 Π ΡΠ΄Ρ 3 — Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 3 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 3 — Π‘ΡΠΎΠ»Π± 3
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°1 - ΠΠΎΠ»ΠΎΠ½ΠΊΠ°3
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ2
Row3 - Col3
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΅Π΅ΠΊ Π ΡΠ΄1 — Π‘ΡΠΎΠ»Π±Π΅Ρ Π ΡΠ΄ 1 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 1 — Π‘ΡΠΎΠ»Π±Π΅Ρ 3 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π± 1 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π±Π΅Ρ 3 Π ΡΠ΄Ρ 3 — Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 3 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 3 — Π‘ΡΠΎΠ»Π± 3
Π‘ΡΡΠΎΠΊΠ°1 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Row1 - Col2
Π‘ΡΡΠΎΠΊΠ°1 - ΠΠΎΠ»ΠΎΠ½ΠΊΠ°3
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Row2 - Col2
Π‘ΡΡΠΎΠΊΠ°2 - Π‘ΡΠΎΠ»Π±Π΅Ρ3
Π‘ΡΡΠΎΠΊΠ°3 - Π‘ΡΠΎΠ»Π±Π΅Ρ1
Row3 - Col2
Row3 - Col3
Π’Π°Π±Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ Π ΡΠ΄1 — Π‘ΡΠΎΠ»Π±Π΅Ρ Π ΡΠ΄1 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 1 — Π‘ΡΠΎΠ»Π±Π΅Ρ 3 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π± 1 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 2 — Π‘ΡΠΎΠ»Π±Π΅Ρ 3 Π ΡΠ΄Ρ 3 — Π‘ΡΠΎΠ»Π±ΡΡ 1 Π ΡΠ΄ 3 — Π‘ΡΠΎΠ»Π±Π΅Ρ 2 Π ΡΠ΄ 3 — Π‘ΡΠΎΠ»Π± 3 ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ ΠΊΠ°ΡΡΠΎΡΠΊΠ°ΠΌ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ HTML Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ