рд╡реЗрдм рдбреЗрд╡рд▓рдкрд░ рдХреЗ рд▓рд┐рдП рдХреБрдЫ рд░реЛрдЪрдХ рдФрд░ рдЙрдкрдпреЛрдЧреА рдмрд╛рддреЗрдВ (рд░рд┐рд▓реАрдЬрд╝ 7)

рд╢реБрдн рджрд┐рди, рдкреНрд░рд┐рдп Kravravchiansред рд╣рд╛рд▓ рд╣реА рдореЗрдВ, рдореИрдВрдиреЗ рдХрдИ рджрд┐рд▓рдЪрд╕реНрдк рдФрд░ рдЙрдкрдпреЛрдЧреА рдЙрдкрдХрд░рдг / рдкреБрд╕реНрддрдХрд╛рд▓рдп / рдХрд╛рд░реНрдпрдХреНрд░рдо рджреЗрдЦреЗ рдЬреЛ рдореИрдВ рд╣реНрд░рдм рдХреЗ рд╕рд╛рде рд╕рд╛рдЭрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред

Browserhacks



рдирд╛рдо рдЕрдкрдиреЗ рд▓рд┐рдП рдмреЛрд▓рддрд╛ рд╣реИред рдпрд╣ рд╕рдВрд╕рд╛рдзрди рдореМрдЬреВрджрд╛ рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдХреЗ рд▓рд┐рдП рд╕рднреА рдкреНрд░рдХрд╛рд░ рдХреЗ рд╣реИрдХ рдХрд╛ рднрдВрдбрд╛рд░ рд╣реИред рдЗрд╕ рд╕рд╛рдЗрдЯ рдХреЛ рджреЗрдЦрдиреЗ рдХреЗ рдмрд╛рдж, рдкреЙрд▓ рдЖрдпрд░рд┐рд╢ рдиреЗ рдЦреБрдж рд╕рдордЭрджрд╛рд░реА рд╕реЗ рдХрд╣рд╛: " рдкрд╡рд┐рддреНрд░ рдмрдХрд╡рд╛рд╕ рдЕрджреНрднреБрдд ред"

рдбреЗрд╡рд┐рдб рдбреАрд╕рдВрджреНрд░реЛ (рдЯреНрд╡рд┐рдЯрд░, H5BP) рд╕реЗ 5 рдорд╣рд╛рди рдЖрд╡рд┐рд╖реНрдХрд╛рд░


рдЪрд┐рдирд╛рдИ - "рдЪрд┐рдирд╛рдИ" рдХреЗ рд░реВрдк рдореЗрдВ рдЕрдиреБрд╡рд╛рджрд┐рдд - рдПрдХ рдЧреНрд░рд┐рдб рд▓реЗрдЖрдЙрдЯ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрджрд░реНрд╢ рд╕рдорд╛рдзрд╛рдиред рдЕрдкреНрд░рдХрд╛рд╢рд┐рдд Flexbox рд╡рд┐рдирд┐рд░реНрджреЗрд╢рди рдХреЗ рд▓рд┐рдП рдЧреБрдгрд╡рддреНрддрд╛ рдкреНрд░рддрд┐рд╕реНрдерд╛рдкрдиред рд╕рд░рд▓ рд╡рд╛рдХреНрдпрд╡рд┐рдиреНрдпрд╛рд╕ Pinterest / Surfingbird рдЬреИрд╕реЗ рд▓реЗрдЖрдЙрдЯ рдмрдирд╛рдирд╛ рдЖрд╕рд╛рди рдмрдирд╛рддрд╛ рд╣реИред рджреЗрд╢реА JavaSciprt рдкрд░ рдФрд░ jQuery рдкреНрд▓рдЧрдЗрди рдХреЗ рд░реВрдк рдореЗрдВ рдореМрдЬреВрдж рд╣реИред

рдЖрдЗрд╕реЛрдЯреЛрдк - "рдЬрд╛рджреВ рд▓реЗрдЖрдЙрдЯ рдХреЗ рд▓рд┐рдП рдПрдХ рдЙрддреНрддрдо jQuery рдкреНрд▓рдЧрдЗрдиред рдпрд╣ рдЖрдкрдХреЛ рд▓реЗрдЖрдЙрдЯ рдХреЛ рдЖрд╕рд╛рдиреА рд╕реЗ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░рдиреЗ, рд╕реЙрд░реНрдЯ рдХрд░рдиреЗ рдФрд░ рдЧрддрд┐рд╢реАрд▓ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред тАЭ

imagesLoaded.js - рдпрд╣ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдЪрд┐рддреНрд░ рдХрдм рдЕрдкрд▓реЛрдб рдХрд┐рдП рдЧрдП рдереЗред 4 рдШрдЯрдирд╛рдУрдВ рдХреЛ рд╢рд╛рдорд┐рд▓ рдХрд░рддрд╛ рд╣реИ: рд╣рдореЗрд╢рд╛, рдХрд┐рдпрд╛, рд╡рд┐рдлрд▓, рдкреНрд░рдЧрддрд┐ред рдЙрдкрдпреЛрдЧ рдореЗрдВ рдЖрд╕рд╛рдиред

рдбреНрд░реИрдЧрдмрд┐рд▓реА рдХреЛрдб рдХреЗ рд▓реЗрдЦрдХ рдХреА рд╕рдмрд╕реЗ рдЕрдЪреНрдЫреА рдкрд░рдВрдкрд░рд╛ рдореЗрдВ рджреЗрд╢реА рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдореЗрдВ jQuery рдпреВрдЖрдИ рдбреНрд░реИрдЧреЗрдмрд▓ рдХрд╛ рдПрдХ рдПрдирд╛рд▓реЙрдЧ рд╣реИред рд╕реНрдкрд░реНрд╢ рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред
рдирдЬрд╝рджреАрдХреА рдкрд┐рдХреНрд╕рд▓реЗрдЯ - рдХреИрдирд╡рд╕ рдЕрд▓рд╛ рдореЗрдВ рдЫрд┐рдкреА рдЫрд╡рд┐рдпреЛрдВ рдХреЗ "рдкрд┐рдХреНрд╕реЗрд▓реЗрд╢рди" рдирдЧреНрди рд╢реИрд▓реА рдХреЗ рдХреБрдЫ рдХрд╛рд░реНрдпреЛрдВ рдореЗрдВ рдЫрд┐рдкреА рд╣реБрдИ рд╣реИрдВ ред


рд╕рд┐рдиреЗрдорд╛ рдЯрд┐рдХрдЯ рдЙрдкрдпреЛрдЧрд┐рддрд╛



рд╣рд╛рд▓ рдХреЗ рдПрдХ рдкреЛрд╕реНрдЯ рдХреЛ рдкрдврд╝рдиреЗ рдХреЗ рдмрд╛рдж, " рдПрдХ рдмреЛрд░реНрдбрд┐рдВрдЧ рдкрд╛рд╕ рдХреА рдЙрдкрдпреЛрдЧрд┐рддрд╛: рдПрдХ рд╡рд░реНрд╖ рдореЗрдВ рджреЛ рдорд╛рдирд╡ рдЬреАрд╡рди рдХреИрд╕реЗ рдмрдЪрд╛рдПрдВ, " рдореИрдВ рдХреЛрдбрдкреИрди рдкрд░ рдПрдХ рдкреИрди рд╕рд╛рдЭрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ред

Ionicons - рдЪрд┐рд╣реНрди рдлрд╝реЙрдиреНрдЯ




рдХреНрд░реИрдХреЗрди рдФрд░ рдЬреЗрдкреАрдЬреАрдорд┐рдирд┐



JPEGmini рд╡рд┐рдВрдбреЛрдЬ рдФрд░ рдореИрдХ рдХреЗ рд▓рд┐рдП рдПрдХ рдмрдврд╝рд┐рдпрд╛ рдРрдк рд╣реИ рдЬреЛ рдмрд┐рдирд╛ рдХрд┐рд╕реА рджреГрд╢реНрдп рдкреНрд░рднрд╛рд╡ рдХреЗ рд╕реНрдорд╛рд░реНрдЯ рдХрдВрдкреНрд░реЗрд╢рди рдПрд▓реНрдЧреЛрд░рд┐рджрдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИред рдЖрд╡реЗрджрди рдХрд╛ рдореБрдлреНрдд рд╕рдВрд╕реНрдХрд░рдг рдЖрдкрдХреЛ рдкреНрд░рддрд┐ рджрд┐рди 20mb рд╕реЗ рдЕрдзрд┐рдХ рдХрд╛ рдЕрдиреБрдХреВрд▓рди рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ, рдЬреЛ рдмреНрд▓реЙрдЧрд░реНрд╕ рдХреЗ рд▓рд┐рдП рдХрд╛рдлреА рдкрд░реНрдпрд╛рдкреНрдд рд╣реИред рд▓реЗрдХрд┐рди рдЕрдЧрд░ рд╣рдо рдкрд░рд┐рдпреЛрдЬрдирд╛ рдореЗрдВ " рд╡рд╛рд╕реНрддрд╡рд┐рдХ " рдЫрд╡рд┐ рдЕрдиреБрдХреВрд▓рди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рдХреНрд░реИрдХрди рдЪреБрдирдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдЬрд┐рд╕рдореЗрдВ рдПрдХ рдПрдкреАрдЖрдИ рд╣реИ рдФрд░ рдЬреЗрдкреАрдЬреА, рдкреАрдПрдирдЬреА, рдЬреАрдЖрдИрдПрдл рдФрд░ рдПрд╕рд╡реАрдЬреА рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рдпрд╣ рднреА рдЙрд▓реНрд▓реЗрдЦрдиреАрдп рд╣реИ рдХрд┐ рдХреНрд░реИрдХрди рдореЙрд░реНрдбрди.рдЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ рдорд╛рдЗрдХреНрд░реЛрд╕реЙрдлреНрдЯ рдХреЗ рд╕рд╛рде рд╕рд╣рдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИред

PSD рдлрд╝реЙрдиреНрдЯреНрд╕




рдпрд╣ рд╕реЗрд╡рд╛ рдЖрдкрдХреЗ рдбреНрд░реЙрдкрдмреЙрдХреНрд╕ рдЦрд╛рддреЗ рдХреЗ рд╕рд╛рде рд╕рд┐рдВрдХреНрд░реЛрдирд╛рдЗрдЬрд╝ рдХреА рдЬрд╛рддреА рд╣реИ, рдЬрд┐рд╕рдХреЗ рдмрд╛рдж рдпрд╣ рдЪрдпрдирд┐рдд .PSD рдореЗрдВ рд╕рднреА рдореМрдЬреВрджрд╛ рдлреЛрдВрдЯ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рддрд╛ рд╣реИ рдФрд░ рджрд┐рдЦрд╛рддрд╛ рд╣реИ рдХрд┐ рдЙрдиреНрд╣реЗрдВ рдХрд╣рд╛рдВ рдкрд░ рдЦрд░реАрджрдирд╛ рд╣реИред GitHub рдкрд░ рдкрд░рд┐рдпреЛрдЬрдирд╛ , рд╕рдм рдХреБрдЫ рдЕрджреНрднреБрдд PSD.rb рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ

рдПрдХ рд╕реБрдВрджрд░ рд╕реАрдПрд╕рдПрд╕ рд░рд┐рдмрди рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ? "рдЗрдВрдЯрд░рдиреЗрдЯ" рдореЗрдВ рдЗрд╕ рдорд╛рдорд▓реЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдЬрдирд░реЗрдЯрд░ рднреА рд╣реИ:


рдпреВрд╕реАрдПрд╕рдПрд╕ рдФрд░ рд╣реАрд▓рд┐рдпрдо


рджреЛрдиреЛрдВ рдЙрдкрдХрд░рдг рд╕рд╛рдЗрдЯ рдХрд╛ рд╡рд┐рд╢реНрд▓реЗрд╖рдг рдХрд░рддреЗ рд╣реИрдВ рдФрд░ рдЕрдкреНрд░рдпреБрдХреНрдд рд╕реАрдПрд╕рдПрд╕ рдХрдХреНрд╖рд╛рдУрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реВрдЪрд┐рдд рдХрд░рддреЗ рд╣реИрдВред рдЕрдВрддрд░ рдпрд╣ рд╣реИ рдХрд┐ UCSS Node.js рдХреЗ рд▓рд┐рдП рд╣реИ, рдФрд░ рд╣реАрд▓рд┐рдпрдо рдХреНрд▓рд╛рдЗрдВрдЯ-рд╕рд╛рдЗрдб рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рд╣реИ, рдФрд░ рдкреБрд░рд╛рдиреЗ рд▓реЛрдЧреЛрдВ рдХреА рд╕рдВрдЦреНрдпрд╛ рдХреЛ рджреЗрдЦрддреЗ рд╣реБрдП, рдпрд╣ рдУрдкреЗрд░рд╛ рд╕реЙрдлреНрдЯрд╡реЗрдпрд░ рд╕реЗ рдЕрдкрдиреЗ рд╕рдордХрдХреНрд╖реЛрдВ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдЕрдзрд┐рдХ рд▓реЛрдХрдкреНрд░рд┐рдп рд╣реИред CSS рд╕рддреНрдпрд╛рдкрди рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмреЛрд▓рддреЗ рд╣реБрдП, рдореИрдВ CSS Trashman ( CSS Ratiocinator GitHub ) рдХрд╛ рд▓рд┐рдВрдХ рдЫреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ

Devtools рдЯрд░реНрдорд┐рдирд▓


рдЫрд╡рд┐

рдФрд░ рдЖрдк рдХрдВрд╕реЛрд▓ рдореЗрдВ рдЕрдкрдиреЗ рд╕рдВрдкрд░реНрдХреЛрдВ рдХреЛ рдЦреВрдмрд╕реВрд░рддреА рд╕реЗ рд╡реНрдпрд╡рд╕реНрдерд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:


рдЕрдВрдд рдореЗрдВ:




рдкрд┐рдЫрд▓рд╛ рд╕рдВрдЧреНрд░рд╣ (рдЕрдВрдХ 6)

Source: https://habr.com/ru/post/In199210/


All Articles