Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ CSS, JS ΠΈ HTML Ρ„Π°ΠΉΠ»ΠΎΠ²


ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ CSS, JS, HTML Ρ„Π°ΠΉΠ»ΠΎΠ² (Π½Π΅ ΠΏΡƒΡ‚Π°Ρ‚ΡŒ со сТатиСм CSS) Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Π»ΡŽΠ±Ρ‹Ρ… Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Ρ… символов ΠΈΠ· Ρ„Π°ΠΉΠ»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ‚Π΅ΠΌ самым ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ удаляСтся Π²ΠΎ врСмя ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ»Π°:

  • Π‘ΠΈΠΌΠ²ΠΎΠ»Ρ‹ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ²;
  • ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ;
  • Π Π°Π·Ρ€Ρ‹Π²Ρ‹ строк;
  • Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ Π±Π»ΠΎΠΊΠΎΠ².

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв процСсс ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π½Π΅ влияСт Π½Π° Ρ„Π°ΠΉΠ», Π° ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. ОсобСнно ΠΏΠΎΠ»Π΅Π·Π½Π° минификация CSS, JS ΠΈ HTML-Ρ„Π°ΠΉΠ»ΠΎΠ². ΠšΡ€ΠΎΠΌΠ΅ этого Google ΠΏΡ€ΠΈ Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ быстродСйствиС рСсурса, Π° минификация ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ сайта.

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹, Π² ΠΈΡ… ΠΈΠΌΠ΅Π½Π° добавляСтся Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ .min (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: foobar.min.css).

ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ ΠΈ сТатиС CSS Ρ„Π°ΠΉΠ»ΠΎΠ² – это Π½Π΅ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅. Π₯отя ΠΎΠ±Π° этих ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Π Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚. Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„Π°ΠΉΠ»Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠ² сТатия, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Gzip ΠΈΠ»ΠΈ brotli.

Π€Π°ΠΉΠ»Ρ‹ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ.

Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, процСсс сТатия осущСствляСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  1. Π€Π°ΠΉΠ» сТимаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° сТатия;
  2. ВыполняСтся запрос для сТатой вСрсии Ρ„Π°ΠΉΠ»Π°;
  3. Π‘ΠΆΠ°Ρ‚Ρ‹ΠΉ Ρ„Π°ΠΉΠ» отправляСтся ΠΎΡ‚ сСрвСра ΠΊ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ;
  4. ΠšΠ»ΠΈΠ΅Π½Ρ‚ распаковываСт Ρ„Π°ΠΉΠ» ΠΈ считываСт ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡ‹ сТатия ΠΌΠΎΠ³ΡƒΡ‚ Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ сСрвСра, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Когда Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ отправляСт запрос сСрвСру, ΠΎΠ½ сообщаСт Π΅ΠΌΡƒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ сТатия ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ сСрвСр ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΠΈΠΊ для этого Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Если Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ сТатия, сСрвСр Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅ (Π±Π΅Π· ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ).

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ CSS Ρ„Π°ΠΉΠ» выглядит Π΄ΠΎ ΠΈ послС ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ.

.entry-content p {
font-size: 14px !important;
}

.entry-content ul li {
font-size: 14px !important;
}

.product_item p a {
 color: #000;
 padding: 10px 0px 0px 0;
 margin-bottom: 5px;
 border-bottom: none;
}
. entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}

ПослС ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ CSS-Ρ„Π°ΠΉΠ» стало слоТнСС Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ пСрСносы строк, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΈ Ρ‚.Π΄. Но ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ мСньший Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎ ускоряСт Π΅Π³ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ, ΠΊΠ°ΠΊ ΠΈ сТатиС CSS ΠΎΠ½Π»Π°ΠΉΠ½.

  • csscompressor.com β€” позволяСт Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π΅:
  • cssminifier.com β€” инструмСнт довольно Π»Π΅Π³ΠΊΠΈΠΉ Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ CSS ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Π°Ρ вСрсия создаСтся автоматичСски. ПослС этого ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ сТатый ΠΊΠΎΠ΄ CSS Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π°:
  • yui.github.io: позволяСт ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ процСсс сборки Π² срСдС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, которая ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚, ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ ΠΈ сохраняСт ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅;
  • phpied.com: инструмСнт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ возмоТности ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ CSS ΠΈ YUI Compressor, Π½ΠΎ ΠΎΠ½ примСняСт JavaScript вмСсто Java.
  • closure-compiler. appspot.com: ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт ΠΈ ΠΊΠ°ΠΊ API-интСрфСйс. Π­Ρ‚ΠΎΡ‚ инструмСнт позволяСт Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅:
  • jscompress.com: позволяСт ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ JS ΠΏΡƒΡ‚Π΅ΠΌ копирования/вставки ΠΊΠΎΠ΄Π°. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ JavaScript-Ρ„Π°ΠΉΠ» ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ процСсс ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ:
  • javascript-minifier.com: создан Ρ‚Π΅ΠΌΠΈ ΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΈ cssminifier. JS Minifier позволяСт ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈΠ»ΠΈ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² Π²ΠΈΠ΄Π΅ Ρ„Π°ΠΉΠ»Π°. А Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ сТатиС CSS ΠΈ JS ΠΎΠ½Π»Π°ΠΉΠ½:
  • yui.github.io: прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ JS Ρ„Π°ΠΉΠ»Ρ‹ для Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².
  • htmlcompressor.com: прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€Π° ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ уровнями ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ HTML ΠΈ встроСнного Π² Π½Π΅Π³ΠΎ ΠΊΠΎΠ΄Π° CSS ΠΈ JS:
  • minifycode.com: прСдставляСт собой тСкстовоС ΠΏΠΎΠ»Π΅, ΠΊΡƒΠ΄Π° Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ HTML ΠΈ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ:

БущСствуСт мноТСство инструмСнтов для ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ². МногиС CMS Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ CSS, JS ΠΈ HTML β€” Ρ„Π°ΠΉΠ»ΠΎΠ².
  • Better WordPress Minify;
  • Autoptimize.

МногиС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ. НапримСр, Cache Enabler поставляСтся с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ HTML ΠΈ JS. ИспользованиС этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ позволяСт ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Π΅Π±-страниц, Π½ΠΎ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях это ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚Ρƒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ сТатия CSS WordPress.

Π’ сообщСствС Drupal популярным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ являСтся ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Minify. Он позволяСт ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML, JavaScript Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ компилятор Google Closure, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ. ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ модуля ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ быстро.

CMS Joomla Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ сайта ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ JCH Optimize, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ JavaScript ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ сТатиС CSS Ρ„Π°ΠΉΠ»ΠΎΠ². Оно Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ GZIP сТатиС для Π°Π³Ρ€Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ².

РСшСниС ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ CSS, JS ΠΈ HTML Ρ„Π°ΠΉΠ»ΠΎΠ² прСдоставляСт прСимущСства, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ сайта, Ρ‚Π°ΠΊ ΠΈ Π΅Π³ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρƒ. ИспользованиС ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ β€” это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваш сайт, ΠΈ это Π»Π΅Π³ΠΊΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ рассмотрСнных инструмСнтов ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

Данная публикация являСтся ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«How To Minify CSS, JS, and HTMLΒ» , подготовлСнная Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠ΅ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Онлайн-сСрвис сТатия CSS ΠΊΠΎΠ΄Π°

20

41

Π§ΡƒΡ‚ΡŒ Ρ€Π°Π½ΡŒΡˆΠ΅, Π² Ρ‚Π΅ΠΌΠ΅ Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ JavaScript ΠΊΠΎΠ΄Π° ΠΎΠ½Π»Π°ΠΉΠ½, ΠΌΡ‹ ΡƒΠΆΠ΅ рассмотрСли ΠΎΠ΄ΠΈΠ½ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвис, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π½Π°ΠΌ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒ JavaScript ΠΊΠΎΠ΄.

Π’ Π΄Π°Π½Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Вас ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ с Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисом, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΈΠΌ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ΠΌ β€” ΠΎΠ½ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для сТатия CSS ΠΊΠΎΠ΄Π° ΠΎΠ½Π»Π°ΠΉΠ½.

ΠŸΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвиса Π’Ρ‹ смоТСтС ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π’Π°ΡˆΠ΅Π³ΠΎ CSS ΠΊΠΎΠ΄Π° Π½Π° сайтС, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π’Π°ΠΌ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°, Π½ΠΎ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π’Π°ΡˆΠ΅Π³ΠΎ сайта.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисом сТатия CSS ΠΊΠΎΠ΄Π° довольно просто. Для этого ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π° CSS ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΆΠ°Ρ‚ΡŒ, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π½Π° сайт сТатия CSS ΠΊΠΎΠ΄Π° β€” CSS Compressor, вставляСтС Π’Π°Ρˆ CSS ΠΊΠΎΠ΄ Π² ΠΏΠΎΠ»Π΅ CSS Input:

, Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ сТатия (Highest, Hight, Standard ΠΈΠ»ΠΈ Low) ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Compress.


ПослС сТатия Π’Π°ΡˆΠ΅Π³ΠΎ CSS ΠΊΠΎΠ΄Π°, Π’Π°ΠΌ остаСтся лишь Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ сТатый CSS ΠΊΠΎΠ΄ ΠΈΠ· поля Compressed CSS: ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊ сСбС Π½Π° сайт.

ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвиса ΠΏΠΎ ΡΠΆΠ°Ρ‚ΠΈΡŽ CSS ΠΊΠΎΠ΄Π° сводится ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ сТатиС ΠΊΠΎΠ΄Π° производится Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π° счСт удалСния символов ΠΏΡ€ΠΎΠ±Π΅Π»Π°, табуляции, пСрСноса строк ΠΈ удалСния Π»ΠΈΡˆΠ½ΠΈΡ… Π·Π½Π°ΠΊΠΎΠ² Ρ‚ΠΎΡ‡ΠΊΠΈ с запятой, Π½ΠΎ ΠΈ Π·Π° счСт Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠΉ записи ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² CSS Ρ†Π²Π΅Ρ‚ΠΎΠ². НапримСр, Ρ†Π²Π΅Ρ‚, записанный ΠΊΠ°ΠΊ Β«#000066Β» Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ Π² Β«#006Β».

ΠŸΡ€ΠΈ этом, Π² ΠΏΠΎΠ»Π΅ Messages:, ΠΎΠ½Π»Π°ΠΉΠ½-сСрвис csscompressor.com ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ Π’Π°ΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ прСобразования для ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ CSS ΠΊΠΎΠ΄Π° Π±Ρ‹Π»ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½Ρ‹.

Π’Π°ΠΊ ΠΆΠ΅ Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Π½Π° сколько Π±Ρ‹Π» ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π’Π°ΡˆΠ΅Π³ΠΎ CSS ΠΊΠΎΠ΄Π°. НапримСр, Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈ Ρ‚Π°ΠΊ довольно сТатый ΠΊΠΎΠ΄ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π΅Ρ‰Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π½Π° 8% ΠΈΠ»ΠΈ 51 Π±Π°ΠΉΡ‚ (с 638 Π΄ΠΎ 587 Π±Π°ΠΉΡ‚).

Π’Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² случаС со сТатиСм JavaScript ΠΊΠΎΠ΄Π°, ΠΌΡ‹ Π±Ρ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π»ΠΈ Π’Π°ΠΌ ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Ρƒ сСбя Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ Π½Π΅ ΡΠΆΠ°Ρ‚ΡƒΡŽ (ΠΈΡΡ…ΠΎΠ΄Π½ΡƒΡŽ) Π²Π΅Ρ€ΡΠΈΡŽ CSS ΠΊΠΎΠ΄Π°, Ρ‚. ΠΊ. Π² дальнСйшСм, ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π’Π°ΠΌ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ CSS ΠΊΠΎΠ΄Π°, Ρ‚.ΠΊ. Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ со сТатой вСрсиСй Π½Π΅ совсСм ΡƒΠ΄ΠΎΠ±Π½ΠΎ.

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, сТатиС CSS ΠΊΠΎΠ΄Π° Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π’Π°ΡˆΠ΅Π³ΠΎ сайта, Π½ΠΎ Π·Π°Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π’Π°ΠΌ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π’Π°ΡˆΠ΅Π³ΠΎ сайта. А ΠΏΡ€ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠΈ сТатия сразу ΠΈ CSS ΠΈ JavaScript ΠΊΠΎΠ΄Π°, ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Ρ… страничСк.

Π”Π°Ρ‚Π° создания: 18:30:17 21.06.2013 Π³.

ΠŸΠΎΡΠ΅Ρ‰Π΅Π½ΠΈΠΉ: 16571 Ρ€Π°Π·(Π°).


ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ всС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ проходят ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΌΠΎΠ΄Π΅Ρ€Π°Ρ†ΠΈΡŽ!

Если Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ вопрос, Ρ‚ΠΎ сдСлайтС это Π½Π° нашСм Ρ„ΠΎΡ€ΡƒΠΌΠ΅.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π’Ρ‹ смоТСтС быстрСС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΠΉ Вас вопрос.

Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ CSS стилСй сайта, компрСссор каскадных Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

Π’ ΠΊΠ°ΠΊΠΈΡ… случаях сокращСниС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ?

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ организация сСлСкторов ΠΈ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСктивный ΠΊΠΎΠ΄, Π½ΠΎ ΠΈ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Ρƒ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Часто Π½Π°Π΄ созданиСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° трудятся ΠΌΠ½ΠΎΠ³ΠΎ людСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ приходится Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ с Ρ‡ΡƒΠΆΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ использованиС общСпринятых ΠΏΡ€Π°Π²ΠΈΠ» ΠΈ сокращСний ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ Π² Π΄Π΅Π»Π΅ продвиТСния рСсурса Π² Тизнь.

ΠšΠ°ΡΠΊΠ°Π΄Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стили CSS (Π°Π½Π³Π». Cascading Style Sheets) β€” стандарт стилСй, ΠΎΠ±ΡŠΡΠ²Π»Π΅Π½Π½Ρ‹ΠΉ консорциумом W3C. Π’Π΅Ρ€ΠΌΠΈΠ½ каскадныС ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ слияния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² стилСй ΠΈ Π½Π° наслСдованиС стилСй Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ ΠΎΡ‚ Π²Π½Π΅ΡˆΠ½ΠΈΡ…. CSS – это язык, содСрТащий Π½Π°Π±ΠΎΡ€ свойств для опрСдСлСния внСшнСго Π²ΠΈΠ΄Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

ΠŸΠΎΠ½ΡΡ‚Π½Π°Ρ структура располоТСния Ρ„Π°ΠΉΠ»ΠΎΠ², отсутствиС Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… сСлСкторов, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… свойств ΠΏΠΎΠ²Ρ‹ΡˆΠ°ΡŽΡ‚ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ„Π°ΠΉΠ»Π°. ΠœΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ процСссора сСрвСра ΠΏΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-страницы. Π’ Π²ΠΈΠ΄Ρƒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… сСтСвых ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΡƒΠ΄Π΅Π»ΡΡŽΡ‚ написанию ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ зависит ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ рСсурса.

ДСйствия ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ сТатия ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ„Π°ΠΉΠ»Π° стилСй

ΠŸΡ€ΠΎΡ†Π΅ΡΡ внСсСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ сразу нСсколько ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ ΠΊΠΎΠ΄Π°, Π² зависимости ΠΎΡ‚ настроСк ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· наполнСния страницы стили сайта ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² вСрстки ΠΈ Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²ΠΊΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ². Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· Ρ„Π°ΠΉΠ»Π° лишнСС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ понадобится ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст Π½Π° присутствиС Π»ΠΈΡˆΠ½ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², ΠΈ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Ρ… Π·Π½Π°ΠΊΠΎΠ² прСпинания. МногиС значСния, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π°, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π° нСсколько символов.

Π§Ρ‚ΠΎ слСдуСт ΡΠΎΠΊΡ€Π°Ρ‰Π°Ρ‚ΡŒ, для увСличСния скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ:

  • лишниС ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹;
  • ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ Π½Π° Π½ΠΎΠ²ΡƒΡŽ строчку;
  • ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ PX Ρƒ стилСй с 0 Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ;
  • ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΊ стилям.

Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ° свойств Π² порядкС Π°Π»Ρ„Π°Π²ΠΈΡ‚Π° ΠΈ объСдинСниС сСлСкторов ΠΏΠΎ Ρ‚ΠΈΠΏΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² HTML ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ, Ρ‡Ρ‚ΠΎ Π³Π΄Π΅ Π² ΠΊΠΎΠ΄Π΅ располоТСно. Π—Π°ΠΏΠΈΡΡŒ тСкстовых ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π² числовом Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ вСс исходного Ρ„Π°ΠΉΠ»Π°. Экономия пространства колСблСтся Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ 10-20%, Ρ‡Ρ‚ΠΎ ускоряСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов Π½Π° страничкС.

Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ простой инструмСнт для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²

ИспользованиС ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ компрСссора стилСй – самый ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, Ссли Π½Π΅Ρ‚ ТСлания Π²ΠΎΠ·ΠΈΡ‚ΡŒΡΡ с тысячами строк Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π°ΠΌΠΈ сСрвиса ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° всСх вСрсий CSS, бСсплатный доступ ΠΊ рСсурсам прилоТСния ΠΈ высокая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ чтСния Ρ„Π°ΠΉΠ»ΠΎΠ². ΠŸΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΠ΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° настройки: ΠΎΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ удалСния ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΈ Π»ΠΈΡˆΠ½ΠΈΡ… символов с сохранСниСм читаСмости ΠΊΠΎΠ΄Π° Π΄ΠΎ максимального Π΅Π³ΠΎ сокращСния.

ΠŸΠ»ΡŽΡΡ‹ ΠΎΡ‚ использования инструмСнта CSS компрСссор Π½Π° сайтС iksweb.ru:

  1. Доступно Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… уровня сТатия ΠΊΠΎΠ΄Π°.
  2. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ дСкомпрСссии ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ наимСньшСго уровня.
  3. МинимальноС врСмя ΠΎΡ‚ΠΊΠ»ΠΈΠΊΠ° инструмСнта.
  4. БСрвис Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ бСсплатно 24/7.
  5. ПослС компрСсии стилСй ΠΎΠ½ΠΈ Π½Π΅ Ρ‚Π΅Ρ€ΡΡŽΡ‚ своСй работоспособности.

По ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ компрСссии Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²Π΅Π΄Π΅Π½Π° статистика, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π°Ρ насколько ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΠ»ΡΡ вСс Ρ„Π°ΠΉΠ»Π°. Для дальнСйшСго использования тСкста достаточно Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΈ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² стили сайта. БпСциалисты Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄ΠΎΡΡ‚ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒΡΡ Π² работоспособности CSS.

Онлайн JS / CSS / HTML ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€



Π•ΡΡ‚ΡŒ Π»ΠΈ Ρ‚Π°ΠΌ слуТба, которая прСдоставляСт public API для сТатия CSS ΠΈΠ»ΠΈ Javascript?

(НапримСр, imgur позволяСт Π²Π°ΠΌ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ изобраТСния Ρ‡Π΅Ρ€Π΅Π· PHP ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ URL)

javascript html css compression minify
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ Alex     19 августа 2011 Π² 09:53

9 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²




4

Google Closure Compiler позволяСт Π²Π°ΠΌ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ JavaScript с запросом POST ΠΈ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Petr Peller     19 августа 2011 Π² 09:57



2

ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ‚ΠΎΡ€ закрытия ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для JavaScript. Он ΠΈΠΌΠ΅Π΅Ρ‚ API (ссылка Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ). Он Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΠΎ компиляции JavaScript.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ pimvdb     19 августа 2011 Π² 09:55


ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Luwe     19 августа 2011 Π² 09:55


  • ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сохраняСт условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ?

    Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» ΠΎΠ½Π»Π°ΠΉΠ½ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ JS , Π½ΠΎ ΠΎΠ½ Π²Ρ‹Ρ€Π΅Π·Π°Π΅Ρ‚ условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ: var u = navigator.userAgent;var e=/*@cc_on!@*/false; BECOMES var u=navigator.userAgent;var e=false; Π­Ρ‚ΠΎ повлияло Π±Ρ‹ Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΊΠΎΠ΄Π°, поэтому вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²Ρ‹Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, я…

  • ΠšΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π·Π½Π°Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ REST Π½Π° основС CSS?

    Π£ мСня Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ содСрТимоС Ρ„Π°ΠΉΠ»Π° CSS, Π° Π·Π°Ρ‚Π΅ΠΌ вывСсти Π΅Π³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΌ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ я ΠΈΡ‰Ρƒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π» Π±Ρ‹ ΠΊΠ°ΠΊ REST api, Ρ‡Ρ‚ΠΎΠ±Ρ‹ я ΠΌΠΎΠ³ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ для Π²Ρ‹Π²ΠΎΠ΄Π° этого ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. Π§Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ слуТбы Closure compiler REST ,…


ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ austincheney     11 дСкабря 2011 Π² 04:28



1

Π― ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Π½Π° www.blimptontech.com для сокращСния ΠΌΠΎΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² Javascript. Они Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ваши Ρ„Π°ΠΉΠ»Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ ΠΈΡ… ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. МнС это нравится, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ UglifyJS для выполнСния грязной Ρ€Π°Π±ΠΎΡ‚Ρ‹.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ mike west     07 июля 2013 Π² 20:27



1

БСсплатныС инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΌΠΎΠ³ΡƒΡ‚ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ CSS ΠΈ JavaScript.

http://freedevelopertools.com

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Charles     10 июня 2013 Π² 13:05



1

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ/сТатия вашСго js, β€” это http://samqode. com/minifyjs . ΠΎΡ‡Π΅Π½ΡŒ скоро появится общСдоступный API, доступный для ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π½Π° Π»Π΅Ρ‚Ρƒ (Ρ‡Π΅Ρ€Π΅Π· запрос url), Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ стоит ΠΎΡΡ‚Π΅Ρ€Π΅Π³Π°Ρ‚ΡŒΡΡ.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Samuel     24 октября 2013 Π² 20:06



0

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ jsCompressor ΠΈ CSSCompressor для ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ вашСго ΠΊΠΎΠ΄Π° javascript ΠΈ css.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Jitendra     01 октября 2014 Π² 08:54



0

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ .Maui , ΠΈ это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅! Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ CSS ΠΈ JS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅Π±-инструмСнта ΠΈΠ»ΠΈ бСсплатного API. Для JS ΠΎΠ½ Π΄Π°ΠΆΠ΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ΄ ΠΈ совмСстим с ES5 ΠΈ ES6! Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ инструмСнты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Sitemap, HTML сТатия, измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния ΠΈ бСсплатноС CDN для сТатых Ρ„Π°ΠΉΠ»ΠΎΠ².

РаньшС я ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» Google Closure Compiler, cssminifier.com ΠΈ javascript-minifier. com, Π½ΠΎ Ρƒ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ограничСния ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ POST ΠΈ количСству запросов Π² сСкунду.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Marcio Mazzucato     04 июня 2017 Π² 16:58


ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ вопросы:


ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ скриптов для скриптов PHP, Javascript ΠΈ CSS

Π’ основном ΠΈΡ‰Ρƒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ PHP. Онлайн-ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ > вставка > Π²Ρ‹Π²ΠΎΠ΄, Π±Ρ‹Π»ΠΎ Π±Ρ‹ плюсом.


Zend Framework CSS / JS ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€-обфускатор?

Π― Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 10 CSS + JS Ρ„Π°ΠΉΠ»ΠΎΠ². Π― Ρ…ΠΎΡ‡Ρƒ minify/compress/obfuscate CSS ΠΈ JS. Один ΠΈΠ· ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ я ΠΌΠΎΠ³Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. Но ΠΏΠΎΠΌΠΈΠΌΠΎ ручного…


БущСствуСт Π»ΠΈ такая Π²Π΅Ρ‰ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ JSP? (ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ HTML)

Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ пропускаСт всС ΠΌΠ΅ΠΆΠ΄Ρƒ <% ΠΈ %> . На самом Π΄Π΅Π»Π΅ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ HTML Π±Ρ‹Π» Π±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ, особСнно Ссли Ρƒ Π½Π΅Π³ΠΎ ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΄. ..


Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ CSS Π² C / C++ / Perl для Linux / Mac ?

ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΌΠ½Π΅ Π½Π° ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ CSS, написанный Π½Π° C, ΠΈΠ»ΠΈ C++, ΠΈΠ»ΠΈ Perl, Ρ‡Ρ‚ΠΎΠ±Ρ‹ я ΠΌΠΎΠ³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° linux / Mac ?


Как ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ CSS Π² Liferay?

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Liferay 5.2.3 CE. Как я ΠΌΠΎΠ³Ρƒ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ css? Бпасибо.


ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сохраняСт условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ?

Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» ΠΎΠ½Π»Π°ΠΉΠ½ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ JS , Π½ΠΎ ΠΎΠ½ Π²Ρ‹Ρ€Π΅Π·Π°Π΅Ρ‚ условныС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ: var u = navigator.userAgent;var e=/*@cc_on!@*/false; BECOMES var u=navigator.userAgent;var e=false; Π­Ρ‚ΠΎ повлияло…


ΠšΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π·Π½Π°Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ REST Π½Π° основС CSS?

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ содСрТимоС Ρ„Π°ΠΉΠ»Π° CSS, Π° Π·Π°Ρ‚Π΅ΠΌ вывСсти Π΅Π³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΌ. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ я ΠΈΡ‰Ρƒ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π» Π±Ρ‹ ΠΊΠ°ΠΊ REST api, Ρ‡Ρ‚ΠΎΠ±Ρ‹ я ΠΌΠΎΠ³ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ контСнт…


Онлайн-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ PHP/HTML/JS/CSS

сущСствуСт Π»ΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ бСсплатный ΠΊΠΎΠ΄ php, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ послС установки позволяСт ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ (с Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ html, javascript, php ΠΈ css) Π½Π° сСрвСрС, Π³Π΄Π΅ ΠΎΠ½ установлСн? ЦСль. ..


JSfiddle : ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ multi-JS/CSS/HTML Ρ„Π°ΠΉΠ»ΠΎΠ²?

Π•ΡΡ‚ΡŒ Π»ΠΈ способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ HTML/CSS/JS с нСсколькими Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ HTML, CSS, JS Π½Π° JSfiddle.net ? Если Π΄Π°, Ρ‚ΠΎ ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ? Π― Ρ…ΠΎΡ‡Ρƒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° основС…


Как Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ этот html-ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈΠ· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки Π½Π° Ubuntu?

Π― ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ этот ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ HTML ΠΈΠ· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки Ubuntu. Но я ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ, ΠΊΠΎΠ³Π΄Π° ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. NodeJS ΠΈ NPM ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ: root$ apt-get install -y nodejs npm…

БСсплатная ΠΎΠ½Π»Π°ΠΉΠ½ оптимизация JPEG, PNG, SVG, CSS, JavaScript

Π›ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» Онлайн Ρ„Π°ΠΉΠ»

#Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ»

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ нСсколько шагов:
  • Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΎΠΊ Β«Π›ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ»Β» ΠΈΠ»ΠΈ «Онлайн Ρ„Π°ΠΉΠ»Β» ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» Π½Π° сСрвСр. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Β«Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ»Β» Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» с вашСго ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ», находящийся Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «Онлайн Ρ„Π°ΠΉΠ»Β» ΠΈ Π² появившСмся ΠΏΠΎΠ»Π΅ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ссылку Π½Π° Ρ„Π°ΠΉΠ». ΠœΡ‹ Π½Π΅ устанавливаСм Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°, Π½ΠΎ Ρ‡Π΅ΠΌ большС Ρ„Π°ΠΉΠ», Ρ‚Π΅ΠΌ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ оптимизация. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π½Π°Π±Π΅Ρ€ΠΈΡ‚Π΅ΡΡŒ тСрпСния ΠΈ всС получится.
  • Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ ΠΊΡ€ΠΎΠΌΠ΅ Ρ„Π°ΠΉΠ»Π°, ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ сам ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ Ρ‚ΠΈΠΏ ΠΏΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡŽ ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ.
  • Для Π½Π°Ρ‡Π°Π»Π° ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠšΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ» Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅. Π’ случаС ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ доступСн Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π°Ρ†ΠΈΠΈΒ». Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ просто ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ», Ρ‚ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ Π½Π° имя Ρ„Π°ΠΉΠ»Π°. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ способы сохранСния, Ρ‚ΠΎ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ QR-ΠΊΠΎΠ΄ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° Π½Π° ваш ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисов хранСния Π΄Π°Π½Π½Ρ‹Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Google Drive ΠΈΠ»ΠΈ Dropbox.

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π±ΡƒΠ΄ΡŒΡ‚Π΅ Ρ‚Π΅Ρ€ΠΏΠ΅Π»ΠΈΠ²Ρ‹ Π² процСссС прСобразования. Π’ основном ΠΏΠΎΠ΄ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ Ρ„Π°ΠΉΠ»ΠΎΠ² понимаСтся ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„Π°ΠΉΠ»Π° Π΄ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°. ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго оптимизация Π²Π°ΠΆΠ½Π° для сайтов, Π³Π΄Π΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° сСрвСр. НапримСр, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ трСбования выставляСт PageSpeed Insights.
ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ всСгда ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹, Ρ‚.ΠΊ. оптимизация CSS ΠΈΠ»ΠΈ JS сдСлаСт скорСС всСго ваш Ρ„Π°ΠΉΠ» Π½Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для рСдактирования.

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ Π³Ρ€ΠΈΠ΄-областСй β€” CSS | MDN

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΎΠ±Π·ΠΎΡ€Π΅ ΠΌΡ‹ рассмотрСли Π³Ρ€ΠΈΠ΄-Π»ΠΈΠ½ΠΈΠΈ ΠΈ Ρ‚ΠΎ, ΠΊΠ°ΠΊ с ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ элСмСнты Π² Π³Ρ€ΠΈΠ΄Π°Ρ…. Когда Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с CSS Grid Layout, Ρƒ вас всСгда Π΅ΡΡ‚ΡŒ Π³Ρ€ΠΈΠ΄-Π»ΠΈΠ½ΠΈΠΈ, поэтому ΠΎΠ½ΠΈ β€” быстрый, прямой ΠΈ Π½Π°Π΄Ρ‘ΠΆΠ½Ρ‹ΠΉ способ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ элСмСнты. Как Π±Ρ‹ Ρ‚ΠΎ Π½ΠΈ Π±Ρ‹Π»ΠΎ, сущСствуСт Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄, ΠΈ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π² ΠΎΠ΄ΠΈΠ½ΠΎΡ‡ΠΊΡƒ, Ρ‚Π°ΠΊ ΠΈ Π² сочСтании с располоТСниСм элСмСнтов ΠΏΠΎ Π³Ρ€ΠΈΠ΄-линиям. Π’ этом ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ элСмСнты Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½Ρ‹Ρ…, Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… Π³Ρ€ΠΈΠ΄-областСй. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим, ΠΊΠ°ΠΊ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΈ Π²Ρ‹ скоро ΠΏΠΎΠΉΠΌΡ‘Ρ‚Π΅, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π΅Π³ΠΎ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ ascii-искусства Π² ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π½Π° Π³Ρ€ΠΈΠ΄Π°Ρ…!

Π’Ρ‹ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ со свойством grid-area. Π­Ρ‚ΠΎ Ρ‚ΠΎ свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π² качСствС значСния Π½ΠΎΠΌΠ΅Ρ€Π° Ρ‡Π΅Ρ‚Ρ‹Ρ€Ρ‘Ρ… Π³Ρ€ΠΈΠ΄-Π»ΠΈΠ½ΠΈΠΉ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΡ… располоТСниС Π³Ρ€ΠΈΠ΄-области.

.box1 {
   grid-area: 1 / 1 / 4 / 2;
}

Π§Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ, ΠΊΠΎΠ³Π΄Π° Π·Π°Π΄Π°Ρ‘ΠΌ всС Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ значСния? ΠœΡ‹ опрСдСляСм ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π³Ρ€ΠΈΠ΄-линиями. 

Π”Ρ€ΡƒΠ³ΠΎΠΉ способ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π³Ρ€ΠΈΠ΄-ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, β€” Π·Π°Π΄Π°Ρ‚ΡŒ Π΅ΠΉ имя ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ мСстополоТСниС ΠΊΠ°ΠΊ значСния ΡΠ²ΠΎΠΉΡΡ‚Π²Π° grid-template-areas. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ для Π³Ρ€ΠΈΠ΄-области любоС имя. НапримСр, Ссли Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ согласно ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ основных области ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  • header
  • footer
  • sidebar
  • основноС содСрТимоС content

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства grid-area ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· этих областСй своё собствСнноС имя. ИмСнованиС областСй Π΅Ρ‰Ρ‘ Π½Π΅ создаёт Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΎΠ΄Π½Π°ΠΊΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½Π½Ρ‹Π΅ области, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π² Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

. header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ² ΠΈΠΌΠ΅Π½Π°, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ созданию ΠΌΠ°ΠΊΠ΅Ρ‚Π°. На этот Ρ€Π°Π· вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ элСмСнты с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΎΠΌΠ΅Ρ€ΠΎΠ² Π»ΠΈΠ½ΠΈΠΉ, Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… для самих элСмСнтов, ΠΌΡ‹ создаём вСсь ΠΌΠ°ΠΊΠ΅Ρ‚ Π² Π³Ρ€ΠΈΠ΄-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.

.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "ft ft ft ft   ft   ft   ft   ft   ft";
}

 

<div>
    <div>Header</div>
    <div>Sidebar</div>
    <div>Content</div>
    <div>Footer</div>
</div>

Если ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ этот ΠΌΠ΅Ρ‚ΠΎΠ΄, Ρ‚ΠΎ Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для Π³Ρ€ΠΈΠ΄-элСмСнтов, всС задаётся для Π³Ρ€ΠΈΠ΄-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π’Π΅ΡΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ описываСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ свойства grid-template-areas.

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ Π³Ρ€ΠΈΠ΄ областями ΠΈ Π½Π΅ оставили пустого пространства. Однако, наш ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ‚Π°ΠΊΠΆΠ΅ позволяСт ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π³Ρ€ΠΈΠ΄-ячСйки пустыми. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ символом Ρ‚ΠΎΡ‡ΠΊΠΈ, β€˜.β€˜. Если Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ„ΡƒΡ‚Π΅Ρ€ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄ основным содСрТимым страницы, Π·Π½Π°Ρ‡ΠΈΡ‚, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Ρ€ΠΈ ячСйки ΠΏΠΎΠ΄ сайдбаром пустыми.

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      ".  .  .  ft   ft   ft   ft   ft   ft";
}
<div>
    <div>Header</div>
    <div>Sidebar</div>
    <div>Content</div>
    <div>Footer</div>
</div>

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ наш ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‡ΠΈΡ‰Π΅, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мноТСство символов . . Если ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΎΠΉ ячСйкой. Π’ комплСксных ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… подобная Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ строки ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π’ΠΎ Π΅ΡΡ‚ΡŒ, Π²Ρ‹ прямо Π² CSS ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ выглядит ваш ΠΌΠ°ΠΊΠ΅Ρ‚.

Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ каТдая ΠΈΠ· областСй ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ нСсколько Π³Ρ€ΠΈΠ΄-ячССк, ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΌΡ‹ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ эффСкт Π·Π° счёт Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΠΎΠ±Π΅Π» повторяСм имя этой Π³Ρ€ΠΈΠ΄-области Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΡΡ‚ΡŒ значСния Π² grid-template-areas. Π’ нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ подравняли hd ΠΈ ft , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΊΠΎΡ€Ρ€Π΅Π»ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ с  main.

ΠžΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ создаём ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈΠΌΡ‘Π½, Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠΉ. На Π΄Π°Π½Π½ΠΎΠΌ этапС нСльзя ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ L-ΠΎΠ±Ρ€Π°Π·Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Π’ спСцификации говорится, Ρ‡Ρ‚ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ подобная Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ добавится. А сСйчас ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ строки Ρ‚Π°ΠΊ ΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ, ΠΊΠ°ΠΊ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. НапримСр, Π΄Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш сайдбар простирался Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° Ρ„ΡƒΡ‚Π΅Ρ€Π°. Для этого помСняСм . Π½Π° sd.

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "sd sd sd  ft  ft   ft   ft   ft   ft";
}

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ grid-template-areas Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΉ Π³Ρ€ΠΈΠ΄, Π° ΠΈΠ½Π°Ρ‡Π΅ ΠΎΠ½ΠΎ Π½Π΅Π²Π°Π»ΠΈΠ΄Π½ΠΎ (ΠΈ игнорируСтся!). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ количСство ячССк Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС, Π° Ссли какая-Ρ‚ΠΎ ячСйка Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ пустой, Ρ‚ΠΎ вмСсто ΠΈΠΌΠ΅Π½ΠΈ Π² Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΡ‡ΠΊΠ°. Π“Ρ€ΠΈΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅Π²Π°Π»ΠΈΠ΄Π½Ρ‹ΠΌ, Ссли области Π² Π½Π΅ΠΌ Π½Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ наш ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ содСрТится Π² ΠΎΠ΄Π½ΠΎΠΉ части CSS, Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚ΠΎΡ‡Π΅ΠΊ (breakpoints) становится ΠΊΡ€Π°ΠΉΠ½Π΅ Π»Π΅Π³ΠΊΠΎ. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈΠ±ΠΎ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ² сам Π³Ρ€ΠΈΠ΄, Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов Π½Π° Π³Ρ€ΠΈΠ΄Π΅, Π»ΠΈΠ±ΠΎ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

ΠŸΡ€ΠΈ этом опрСдСляйтС ΠΈΠΌΠ΅Π½Π° для Π²Π°ΡˆΠΈΡ… Π³Ρ€ΠΈΠ΄-областСй Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΌΠ΅Π΄ΠΈΠ°Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ основного содСрТимого (content) всСгда Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ main Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½Π° находится Π½Π° сСткС.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ наш ΠΌΠ°ΠΊΠ΅Ρ‚ для ΡƒΠ·ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΡΠΊΡ€Π°Π½Π° Π½Π° Π±ΠΎΠ»Π΅Π΅ простой, Π³Π΄Π΅ всС Π³Ρ€ΠΈΠ΄-области Π±ΡƒΠ΄ΡƒΡ‚ Π΄Ρ€ΡƒΠ³ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π² ΠΎΠ΄Π½ΠΎΠΌ столбцС.

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

.wrapper {
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    grid-template-columns: 1fr;
    grid-template-areas:
      "hd"
      "main"
      "sd"
      "ft";
}

Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠ΅Π΄ΠΈΠ°Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΡ‹ пСрСопрСдСляСм ΡΡ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° Π΄Π²ΡƒΡ…ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ΠΉ, Π° ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ свободного пространства β€” Π½Π° Ρ‚Ρ€Ρ‘Ρ…ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ΠΉ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ для ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° я ΠΎΡΡ‚Π°Π²Π»ΡΡŽ ΡΠ²ΠΎΡŽ Π΄Π΅Π²ΡΡ‚ΠΈΠΊΠΎΠ»ΠΎΠ½Π½ΡƒΡŽ Ρ‚Ρ€Π΅ΠΊΠΎΠ²ΡƒΡŽ сСтку, Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ grid-template-areas Ρ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽ ΠΊΡƒΠ΄Π° стоит Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π³Ρ€ΠΈΠ΄-области.  

@media (min-width: 500px) {
    .wrapper {
        grid-template-columns: repeat(9, 1fr);
        grid-template-areas:
          "hd hd hd hd   hd   hd   hd   hd   hd"
          "sd sd sd main main main main main main"
          "sd sd sd  ft  ft   ft   ft   ft   ft";
    }
}
@media (min-width: 700px) {
    .wrapper {
        grid-template-areas:
          "hd hd hd   hd   hd   hd   hd   hd hd"
          "sd sd main main main main main ft ft";
    }
}

МногиС ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² grid, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ grid для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницы, ΠΎΠ΄Π½Π°ΠΊΠΎ grid ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒ ΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Π° для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… элСмСнтов. ИспользованиС grid-template-areas ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ особСнно приятным, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² ΠΊΠΎΠ΄Π΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ выглядит ваш элСмСнт.

Π’ качСствС ΠΎΡ‡Π΅Π½ΡŒ простого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Β«ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Β». Π­Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ с пространством для изобраТСния ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ носитСля с ΠΎΠ΄Π½ΠΎΠΉ стороны, Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ β€” с Π΄Ρ€ΡƒΠ³ΠΎΠΉ. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ справа ΠΈΠ»ΠΈ слСва ΠΎΡ‚ ΠΎΠΊΠ½Π°.

Наша сСтка прСдставляСт собой Π΄Π²ΡƒΡ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ Ρ‚Ρ€Π΅ΠΊΠΎΠ²ΡƒΡŽ сСтку, со столбцом для изобраТСния Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 1fr ΠΈ тСкстом 3fr. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ с фиксированной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ изобраТСния, Ρ‚ΠΎΠ³Π΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ столбСц изобраТСния ΠΊΠ°ΠΊ ΡˆΠΈΡ€ΠΈΠ½Ρƒ пиксСля ΠΈ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ 1fr. Одна ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° Ρ‚Ρ€Π΅ΠΊΠ° 1fr Π·Π°Ρ‚Π΅ΠΌ Π·Π°ΠΉΠΌΡ‘Ρ‚ ΠΎΡΡ‚Π°Π²ΡˆΡƒΡŽΡΡ Ρ‡Π°ΡΡ‚ΡŒ пространства.

ΠœΡ‹ прСдоставляСм области изобраТСния имя области сСтки img ΠΈ содСрТимоС тСкстовой области, Π·Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΡ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство grid-template-areas.

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ изобраТСния с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны ΠΎΠΊΠ½Π°

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΠΌ захочСтся ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. Для этого ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ сСтку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ послСдний Ρ‚Ρ€Π΅ΠΊ 1fr ΠΈ просто ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ значСния grid-template-areas.

РассмотрСв Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ способы размСщСния элСмСнтов Π½Π° Π½Π°ΡˆΠΈΡ… сСтках ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ свойства, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ для опрСдСлСния сСтки, самоС врСмя Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΏΠ°Ρ€Ρƒ сокращСний, доступных для опрСдСлСния сСтки ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ ΠΈΠ· всСго этого Π² ΠΎΠ΄Π½ΠΎΠΉ строкС CSS.

Они ΠΌΠΎΠ³ΡƒΡ‚ быстро ΡΡ‚Π°Ρ‚ΡŒ Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΌΠΈ для чтСния для Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ для вашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ. Однако ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‡Π°ΡΡ‚ΡŒΡŽ спСцификации ΠΈ, вСроятно, Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Ρ‘Ρ‚Π΅ΡΡŒ с Π½ΠΈΠΌΠΈ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΈΠ»ΠΈ Π² использовании Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ, Π΄Π°ΠΆΠ΅ Ссли Π²Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ….

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ сокращСния (shorthand), стоит ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ shorthand Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ мноТСство свойств Π·Π° ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π΄ΠΎ ΠΈΡ… Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, ΠΈΠ»ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π² сокращСнии. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ сокращСния, ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ всС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ»ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС.

Π”Π²Π° сокращСния (shorthand) для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° сСтки β€” это Explicit Grid Shorthand grid-template ΠΈ Grid Definition Shorthand grid.

grid-template

Бвойство grid-template (en-US) Π·Π°Π΄Π°Ρ‘Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства:

Бвойство называСтся явным сокращСниСм сСтки, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ устанавливаСт Ρ‚Π΅ Π²Π΅Ρ‰ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚Π΅, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ опрСдСляСтС ΡΠ²Π½ΡƒΡŽ сСтку, Π° Π½Π΅ Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Π»ΡŽΠ±Ρ‹Π΅ нСявныС строки ΠΈΠ»ΠΈ столбцы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ созданы.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ создаёт ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ grid-template (en-US), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ совпадаСт с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ, созданным Ρ€Π°Π½Π΅Π΅ Π² этом руководствС.

.wrapper {
    display: grid;
    grid-template:
      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
      "sd sd sd main main main main main main" minmax(100px, auto)
      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
}

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€” это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ нашСй grid-template-areas, Π½ΠΎ ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ объявляСм Ρ€Π°Π·ΠΌΠ΅Ρ€ строки Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ minmax (100px, auto).

Π—Π°Ρ‚Π΅ΠΌ послС grid-template-areas Ρƒ нас Π΅ΡΡ‚ΡŒ косая Ρ‡Π΅Ρ€Ρ‚Π°, послС Ρ‡Π΅Π³ΠΎ явный список Ρ‚Ρ€Π΅ΠΊΠΎΠ² столбцов.

grid

Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ grid ΠΈΠ΄Ρ‘Ρ‚ Π΅Ρ‰Ρ‘ дальшС, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π΄Π°Ρ‘Ρ‚ свойства, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ нСявной сСткой. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ:

Бвойство Ρ‚Π°ΠΊΠΆΠ΅ сбрасываСт grid-gap свойство Π½Π° 0, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ Π² этой сокращСнности.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот синтаксис Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ сокращСниС grid-template (en-US), просто Π·Π½Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ этом Π²Ρ‹ сброситС Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния, установлСнныС этим свойством.

.wrapper {
    display: grid;
    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
}

ΠœΡ‹ снова рассмотрим Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Π΅ этом сокращСниСм ΠΏΠΎΠ·ΠΆΠ΅ Π² этих руководствах, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ рассмотрим автоматичСскоС Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΈ свойство grid-auto-flow.

Если Π²Ρ‹ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ эти Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ руководства, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСтки с использованиСм Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ размСщСния ΠΈΠ»ΠΈ Π½Π°Π·Π²Π°Π½Π½Ρ‹Ρ… областСй. ΠŸΠΎΡ‚Ρ€Π°Ρ‚ΡŒΡ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Π½Π° созданиС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ±Ρ‰ΠΈΡ… шаблонов ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с использованиСм сСтки, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² для изучСния, синтаксис ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прост. По ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π²Ρ‹, вСроятно, ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π΅Ρ‚Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ вопросы ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ случаями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π΅Ρ‰Ρ‘ Π½Π΅ рассмотрСли. Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… этих руководствах ΠΌΡ‹ рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ, Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½Ρ‹Π΅ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ, β€” Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с Π½ΠΈΠΌ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

Как ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ CSS ΠΈ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ сайта

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚! БСгодня Π½Π° seo-mayak.com ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ PageSpeed ΠΈ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚Π΅ CSSΒ», Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π΅Ρ‰Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ сайта.

ПослС Π²Ρ‹Ρ…ΠΎΠ΄Π° ΡΡ‚Π°Ρ‚ΡŒΠΈ «Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ gzip сТатиС ΠΈ ΠΊΡ€Π°Ρ‚Π½ΠΎ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ сайт» ΠΌΠ½Π΅ написал ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ ΠΈ посСтовал Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ статичСскоС gzip сТатиС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π΅Π³ΠΎ сайт Π΅Ρ‰Π΅ находится Π² стадии становлСния ΠΈ Π΅ΠΌΡƒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ постоянно Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹.

Π’ связи с этим Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ нСсколько слов ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ»ΠΈ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ стадии развития сайта стоит ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ с рСкомСндациями PageSpeed, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ выполнСния Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².

НавСрно самоС большоС влияниС Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайтС ΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ изобраТСния. Если Π°Π½Π°Π»ΠΈΠ· PageSpeed ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ» Π² ΠΊΡ€Π°ΡΠ½ΡƒΡŽ Π·ΠΎΠ½Ρƒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Β«ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ изобраТСния», Β«ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ изобраТСния с Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ пропорциями» ΠΈ Β«Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉΒ», Ρ‚ΠΎ Ρ‡Π΅ΠΌ Ρ€Π°Π½ΡŒΡˆΠ΅ Π’Ρ‹ приступитС ΠΊ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ, Ρ‚Π΅ΠΌ мСньшС Π’Π°ΠΌ впослСдствии придСтся возится с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ. Π’.Π΅. Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния ΠΈ ΡƒΠΆΠ΅ ΠΏΠΎΡ‚ΠΎΠΌ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΈΡ… Π½Π° сСрвСр.

Π’Π°ΠΊΠΆΠ΅ Π½Π° любой стадии развития сайта ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½Π°Π΄ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ Β«Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ кэш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Β». Π’ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… статСй я ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ расскаТу, ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π±Π΅Π· использования ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° обновлСния Π±Π»ΠΎΠ³Π°.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, всС Ρ‡Ρ‚ΠΎ касаСтся кСша ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π° Β«ΠžΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚Π΅ изобраТСния Π² CSS-спрайты» ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ…ΠΎΡ‚ΡŒ с самого роТдСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

А Ρ‚Π°ΠΊΠΈΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΊΠ°ΠΊ: Β«Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚Π΅ CSSΒ», Β«Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚Π΅ JavaScriptΒ», Β«Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚Π΅ HTMLΒ», Β«Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ gzip сТатиС» (имССтся Π² Π²ΠΈΠ΄Ρƒ статичСскоС gzip сТатиС), «ВстройтС нСбольшиС CSSΒ», «ВстройтС нСбольшиС рСсурсы JavaScriptΒ», Β«ΠžΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚Π΅ изобраТСния Π² CSS-спрайты» Π»ΡƒΡ‡ΡˆΠ΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π½Π° ΡƒΠΆΠ΅ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π²ΡˆΠΈΡ…ΡΡ рСсурсах, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π² Ρ…ΠΎΠ΄Π΅ Ρ€Π°Π±ΠΎΡ‚ придСтся ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ содСрТаниС Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ‡Ρ‚ΠΎ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΈΡ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

Π§Ρ‚ΠΎ касаСтся ΠΌΠΎΡ… ΠΏΠΎΠ·Π½Π°Π½ΠΈΠΉ Π² сайтостроСнии, Ρ‚ΠΎ я Π±Π΅Π· особого Ρ‚Ρ€ΡƒΠ΄Π° ΠΌΠΎΠ³Ρƒ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ: Ρ…ΠΎΡ‚ΡŒ Π² сТатых Ρ„Π°ΠΉΠ»Π°Ρ…, Ρ…ΠΎΡ‚ΡŒ Π½Π΅ Π² сТатых, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ для ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Π²Π΅Π±-мастСров это Π½Π΅ большая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Ρ‡Ρ‚ΠΎ нСльзя ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ².

Π˜Ρ‚Π°ΠΊ, Ссли Π’Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ с Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ сайта ΠΈ Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ, Ρ‚ΠΎ самоС врСмя ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ ΡΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΡŽ объСма Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ вмСстС с основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, Π° это css-Ρ„Π°ΠΉΠ»Ρ‹, js-Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ html-Ρ„Π°ΠΉΠ»Ρ‹, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ сайта.

ΠŸΡ€ΠΎ сокращСниС js ΠΈ html Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΌΡ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π·, Π° сСйчас я расскаТу, ΠΊΠ°ΠΊ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ CSS. ΠŸΠΎΠ΅Ρ…Π°Π»ΠΈ!

ВСхнология удалСния Β«ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹Ρ…Β» стилСй

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго Π½Π°Π΄ΠΎ провСсти Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ€Π΅Π²ΠΈΠ·ΠΈΡŽ Π² Ρ„Π°ΠΉΠ»Π΅ style.css ΠΈ Π²Ρ‹ΡΠ²ΠΈΡ‚ΡŒ стили, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² шаблонС.

Но ΠΊΠ°ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅ стили ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ, Π° ΠΊΠ°ΠΊΠΈΠ΅ Π½Π΅Ρ‚? На самом Π΄Π΅Π»Π΅ слоТного Π² этом Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅Ρ‚. Если Ρƒ Вас Π½Π΅Ρ‚ свСТСй Ρ€Π΅Π·Π΅Ρ€Π²Π½ΠΎΠΉ ΠΊΠΎΠΏΠΈΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ‚ΠΎ сдСлайтС Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ FTP ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° FileZilla.

Π—Π°Ρ‚Π΅ΠΌ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Notepad++ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Ρ„Π°ΠΉΠ» style. css, выдСляСм любой класс ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ (Π²Ρ‹Π΄Π΅Π»Π°Ρ‚ΡŒ Π½Π°Π΄ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ слово, Π±Π΅Π· Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈΠ»ΠΈ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ) ΠΈ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ «Поиск» Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ «Найти Π² Ρ„Π°ΠΉΠ»Π°Ρ…Β»:

Π’ ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠΈΠΌΡΡ ΠΎΠΊΠ½Π΅ ΠΆΠΌΠ΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «…», ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅:

И Π² Ρ€Π΅Π·Π΅Ρ€Π²Π½ΠΎΠΉ ΠΊΠΎΠΏΠΈΠΈ Ρ„Π°Π»ΠΎΠ² ΠΈΡ‰Π΅ΠΌ ΠΏΠ°ΠΏΠΊΡƒ с Ρ‚Π΅ΠΌΠΎΠΉ:

Π”Π°Π»Π΅Π΅ ΠΆΠΌΠ΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «Найти всС»:

ПослС Ρ‡Π΅Π³ΠΎ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ появится Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ с Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°ΠΌΠΈ поиска:

Π’ ΠΌΠΎΠ΅ΠΌ случаи Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Ρ‚Π°ΠΊΠΎΠ²Ρ‹. Notepad++ нашСл Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ совпадСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ находится Π² Ρ„Π°ΠΉΠ»Π΅ style.css.

О Ρ‡Π΅ΠΌ это Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚? А Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ это ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² шаблонС ΠΈ всС стили, прописанныС для Π½Π΅Π³ΠΎ, бСсполСзны ΠΈ просто Π·Π°ΡΠΎΡ€ΡΡŽΡ‚ Ρ„Π°ΠΉΠ».

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ смСло удаляСм Π΄Π°Π½Π½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ со всСми сСлСкторами ΠΈ ΠΈΡ… значСниями:

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π― ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Π» класс ΠΈ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ поиска ΠΏΠΎΠΊΠ°Π·Π°Π» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π’ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ класс Β«homepage_postΒ» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Ρ„Π°ΠΉΠ»Π°Ρ… шаблона, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ: 404. php, archve.php, index.php, page.php, search.php ΠΈ sindle.php.

Из этого слСдуСт, Ρ‡Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ класс ΠΈ всС стили прописанныС для Π½Π΅Π³ΠΎ, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΈΡ… Π½Π΅ Π½Π°Π΄ΠΎ.

Если Π² Ρ„Π°ΠΉΠ»Π°Ρ… Π’Π°ΡˆΠ΅ΠΉ Ρ‚Π΅ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ post_class() ΠΈ body_class(), ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ознакомится с Π΄Π°Π½Π½Ρ‹ΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ лишнСго.

НадСюсь понятно. Π’Π°ΠΊΠΈΠΌ способом ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ всС классы ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹. Π£Π²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Β«ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹Π΅ стили», избавившись ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, сократитС ΠΊΠΎΠ΄ CSS. Π Π°Π±ΠΎΡ‚Π° ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ нудная, Π½ΠΎ ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅ Π½Π°Π΄ΠΎ, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ сайта. ИдСм дальшС.

ОбъСдинСниС Ρ„Π°ΠΉΠ»ΠΎΠ² CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ избавились ΠΎΡ‚ Β«ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹Ρ…Β» стилСй, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ этапу сокращСния CSS.

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нСсколько Ρ„Π°ΠΉΠ»ΠΎΠ² стилСй. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎ Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ, Π½ΠΎ всС ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ .css. Π­Ρ‚ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ стоит ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π° Β«ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹Π΅Β» стили.

Наша Π·Π°Π΄Π°Ρ‡Π° состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ всС Ρ„Π°ΠΉΠ»Ρ‹ стилСй, Π² ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ». Π­Ρ‚ΠΎ Π½Π΅ слоТно, просто скопируйтС содСрТимоС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² стилСй ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π² самый ΠΊΠΎΠ½Π΅Ρ† основного Ρ„Π°ΠΉΠ»Π° -style.css.

ПослС Ρ‡Π΅Π³ΠΎ, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ стилСй ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ. Π’Π°ΠΊΠΆΠ΅ Π½Π°Π΄ΠΎ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ ΠΊΠΎΠ΄ΠΎΠ² ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ находятся Π² header.php.

Π’Π°ΠΆΠ½ΠΎ! Π‘ΡƒΠ΄ΡŒΡ‚Π΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ ΠΏΡ€ΠΈ объСдинСнии Ρ„Π°ΠΉΠ»ΠΎΠ² стилСй! ВсСгда оставляйтС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ всС Π½Π° свои мСста, Ссли Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ Π½Π΅ Ρ‚Π°ΠΊ.

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΠΎΠΏΠΈΠΈ ΠΈ Ρ‡Π΅ΠΌ большС Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹Ρ… ΠΊΠΎΠΏΠΈΠΉ, Ρ‚Π΅ΠΌ Π»ΡƒΡ‡ΡˆΠ΅. Π­Ρ‚ΠΈΠΌ Π’Ρ‹ ΠΈΠ·Π±Π°Π²ΠΈΡ‚Π΅ сСбя ΠΎΡ‚ Π»ΠΈΡˆΠ½ΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. Π’ любой случаи, Ссли Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ нСпонятно, Π»ΡƒΡ‡ΡˆΠ΅ спроситС Π² коммСнтариях ΠΈ я ΠΏΠΎΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ Ρ€Π°Π·ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ.

Но Ссли Π’Ρ‹ Π±ΠΎΠΈΡ‚Π΅ΡΡŒ Π»Π΅Π·Ρ‚ΡŒ Π² ΠΊΠΎΠ΄Ρ‹, Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ этого Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ. Как Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒΡΡ, страх ΠΏΠ»ΠΎΡ…ΠΎΠΉ совСтчик. Π—Π½Π°Ρ‡ΠΈΡ‚ Π’Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ торопится. ΠžΠ±ΡƒΡ‡Π°ΠΉΡ‚Π΅ΡΡŒ, Π½Π°Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ΡΡŒ ΠΎΠΏΡ‹Ρ‚Ρƒ, вСрнутся ΠΊ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡŽ Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π°Π±ΠΎΡ‚ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠ·Π΄Π½ΠΎ ΠΈΠ»ΠΈ Π² ΠΊΡ€Π°ΠΉΠ½Π΅ΠΌ случаи ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΡƒ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ‹Ρ‚ ΠΈ Π½Π΅Ρ‚ страха.

Как ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ CSS

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» style.css. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π° Π½Π°Π΄ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ объСм (Π½Π΅ ΠΏΡƒΡ‚Π°Ρ‚ΡŒ с сТатиСм Ρ„Π°ΠΉΠ»ΠΎΠ²).

ВСхнология сокращСния CSS довольно простая. Надо ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, табуляции ΠΈ пустыС строки. ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅ ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ сокращСния CSS ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅. ВсС зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ Π»ΠΈ Π’Ρ‹ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» style.css Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.

Π§Ρ‚ΠΎ касаСтся мСня, Ρ‚ΠΎ я постоянно Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΡŽ стили ΠΈ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-мастСра Π΄Π΅Π»Π°ΡŽΡ‚ Ρ‚ΠΎΠΆΠ΅ самоС. Π‘ΠΎΠΊΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ CSS ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π°: прогрСссивноС, ΡƒΠΌΠ΅Ρ€Π΅Π½Π½ΠΎΠ΅ ΠΈ щадящиС.

ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½ΠΎΠ΅ сокращСниС CSS ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ всСх классов, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² ΠΈ ΠΈΡ… сСлСкторов Π² ΠΎΠ΄Π½ΠΎΠΉ строкС. Π’,Π΅, Π² Ρ„Π°ΠΉΠ»Π΅ style.css, послС Ρ‚Π°ΠΊΠΎΠ³ΠΎ сокращСния, останСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° строка, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ длинная.

Π‘Π΅Ρ€Π²Π΅Ρ€Ρƒ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΡƒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π°, Π½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ вСсьма Π½Π΅ΡƒΠ΄ΠΎΠ±Π½ΠΎ, хотя с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ поиска Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Notepad++ Π½Π°ΠΉΡ‚ΠΈ Π½ΡƒΠΆΠ½Ρ‹ΠΉ класс ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π½Π΅ составит особого Ρ‚Ρ€ΡƒΠ΄Π°.

Для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ прогрСссивного сокращСния ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСрвисом
csscompressor.com. ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ содСрТимоС Ρ„Π°ΠΉΠ»Π° style.css ΠΈ вставляСм Π² ΠΏΠΎΠ»Π΅ Π½Π° страницС сСрвиса:

Π’Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ наибольшСС сТатиС Β«Highest (no readability, smallest size)Β» ΠΈ ΠΆΠΌΠ΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«CompressΒ».

Мой ΠΏΠΎΠ΄ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΉ css ΠΊΠΎΠ΄ ΠΈΠΌΠ΅Π» исходный Ρ€Π°Π·ΠΌΠ΅Ρ€ 10240 Π±Π°ΠΉΡ‚. ПослС сокращСния ΠΎΠ½ ΠΏΠΎΡ…ΡƒΠ΄Π΅Π» ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π½Π° 43% ΠΈ стал Π²Π΅ΡΠΈΡ‚ΡŒ 6546 Π±Π°ΠΉΡ‚:

ΠŸΡ€ΠΈ щадящСм сокращСнии CSS, Π½Π° ΠΎΠ΄Π½ΠΎΠΉ строкС размСщаСтся класс ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, сСлСкторы ΠΈ ΠΈΡ… значСния, Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ класс прописываСтся ΡƒΠΆΠ΅ с Π½ΠΎΠ²ΠΎΠΉ строки. НапримСр:

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Π½ΡƒΠ΄Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ ΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π½Π΅ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ всС ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ табуляции ΠΈ Ρ‚.Π΄, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹ΠΌ сСрвисом csscompressor.com, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π΅Π΄ сокращСниСм, Π² настройках Π½Π°Π΄ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ строчку Β«High (moderate readability, smaller size)Β»:

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ PageSpeed для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Mozilla Firefox. Π”ля этого, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… Π°Π½Π°Π»ΠΈΠ·Π° Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚Π΅ CSSΒ», ΠΆΠΌΠ΅ΠΌ Π½Π° стрСлочку рядом с Π½ΠΈΠΌ. Π—Π°Ρ‚Π΅ΠΌ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ ссылкС Β«optimizet versionΒ»:

 

И  PageSpeed прСдоставит Π½Π°ΠΌ щадящСС сокращСнии CSS ΠΊΠΎΠ΄Π°:

ΠžΡΡ‚Π°Π½Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Π² Ρ„Π°ΠΉΠ» style.css.

Π£ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎΠ΅ сокращСниС CSS β€” это Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ΅ щадящиС сокращСниС. Π”Π°Π½Π½Ρ‹ΠΉ способ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ сам. Π—Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΠ½ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² ΠΎΠ΄Π½Ρƒ строку ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ стили, ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ Π·Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ участок сайта, ΠΏΡ€ΠΈ этом я ΠΏΠΎΠΌΠ΅Ρ‡Π°ΡŽ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строчку, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅ΠΌ:

Π’ ΠΎΠ±Ρ‰Π΅ΠΉ слоТности Ρƒ мСня ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ 38 строк, Π½ΠΎ ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ мСньшС.

ПослС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ любого ΠΈΠ· Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Ρ… способов, ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘ΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ CSSΒ» Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π² Π·Π΅Π»Π΅Π½ΠΎΠΉ Π·Π°Π½Π΅, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ сайта.

Π”ΠΎ встрСчи!

Π‘ ΡƒΠ²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Π’ΠΈΡ‚Π°Π»ΠΈΠΉ ΠšΠΈΡ€ΠΈΠ»Π»ΠΎΠ²

Β« ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ WordPress. Нагрузка Π½Π° сСрвСр ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ
Β« PageSpeed β€” Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ΅ ускорСниС сайта
Β« Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ gzip сТатиС ΠΈ ΠΊΡ€Π°Ρ‚Π½ΠΎ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ сайт
Β« Как Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ кэш Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π° сторонС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ интСрСсныС Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства CSS clip-path

ИспользованиС отсСчСния Π² CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π½Π°ΠΌ ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ ΠΎΡ‚ всСго, Ρ‡Ρ‚ΠΎ Π² Π½Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… выглядит ΠΊΠ°ΠΊ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈΠ»ΠΈ SVG, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€Π°Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹Ρ€Π΅ΠΆΡŒΡ‚Π΅ Ρ‚Π΅ части элСмСнта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ.

ВсС элСмСнты Π½Π° Π²Π΅Π±-страницах ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΈ. Однако это Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄Π΅Π»Π°Ρ‚ΡŒ всС ΠΊΠ°ΠΊ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS clip-path , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ части изобраТСния ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ элСмСнта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ интСрСсныС эффСкты.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ выноски ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ΅ (исходноС). Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ clip-path ΠΈ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ circle () , Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π½Π΅Π±ΠΎ Π²ΠΎΠΊΡ€ΡƒΠ³ Π²ΠΎΠ·Π΄ΡƒΡˆΠ½ΠΎΠ³ΠΎ ΡˆΠ°Ρ€Π° обрСзаСтся, оставляя ΠΊΡ€ΡƒΠ³Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницС.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся ссылкой, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ ΠΎ свойствС clip-path . МоТно Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ изобраТСния, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ события Π½Π΅ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Π½Π° скрытых частях изобраТСния.

ΠžΡ‚ΡΠ΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту HTML, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ изобраТСниям.Π•ΡΡ‚ΡŒ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… способов ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ , Π² этом постС ΠΌΡ‹ рассмотрим ΠΈΡ….

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ #

Помимо Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ поля, описанных Π½ΠΈΠΆΠ΅ Π² ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния clip-path , продСмонстрированныС, ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. Для ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² запасным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свойство clip-path ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Если это ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ clip-path Π² запросС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ для Π½Π΅ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

  @supports (clip-path: circle (45%)) {
}

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ #

Бвойство clip-path ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ΅ Π² Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π±Ρ‹Π»ΠΎ circle () . Π­Ρ‚ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ· основных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² спСцификации CSS Shapes. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для shape-outside , Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π» эту Ρ„ΠΎΡ€ΠΌΡƒ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ элСмСнтам.Бвойство clip-path Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнт Π±Ρ‹Π» ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ.

ΠŸΠΎΠ»Π½Ρ‹ΠΉ список основных Ρ„ΠΎΡ€ΠΌ:

inset () #

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ inset () вставляСт ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΎΡ‚ края элСмСнта ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ значСния для Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ, ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ, Π½ΠΈΠΆΠ½Π΅Π³ΠΎ , ΠΈ Π»Π΅Π²Ρ‹Π΅ края. border-radius Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ для ΠΈΠ·Π³ΠΈΠ±Π° ΡƒΠ³Π»ΠΎΠ² Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½ΠΎΠΉ области с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова round .

Π’ ΠΌΠΎΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρƒ мСня Π΅ΡΡ‚ΡŒ Π΄Π²Π΅ ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с классом .ящик . ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ отсСчСния, Π²Ρ‚ΠΎΡ€ΠΎΠΉ отсСкаСтся с использованиСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ inset () .

circle () #

Как Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ circle () создаСт ΠΊΡ€ΡƒΠ³ΠΎΠ²ΡƒΡŽ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ - это Π΄Π»ΠΈΠ½Π° ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΈ радиус ΠΊΡ€ΡƒΠ³Π°. Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ позволяСт Π²Π°ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ ΠΊΡ€ΡƒΠ³Π°. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ значСния ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΌΠΎΠΉ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠΆΠΎΠΊ Π²Π²Π΅Ρ€Ρ…Ρƒ справа. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π»ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹.

ΠžΡΡ‚Π΅Ρ€Π΅Π³Π°ΠΉΡ‚Π΅ΡΡŒ плоских ΠΊΡ€Π°Π΅Π²! #

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ всСх этих значСниях Ρ„ΠΈΠ³ΡƒΡ€Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π° Ρ€Π°ΠΌΠΊΠΎΠΉ поля Π½Π° элСмСнтС. Если Π²Ρ‹ создадитС ΠΊΡ€ΡƒΠ³ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, ΠΈ эта Ρ„ΠΎΡ€ΠΌΠ° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ СстСствСнного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ плоский ΠΊΡ€Π°ΠΉ.

К ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ использовалось Ρ€Π°Π½Π΅Π΅, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΊΡ€ΡƒΠ³ (50%) . ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ΅, ΠΌΡ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° ΠΏΠΎΠ»Π΅ поля свСрху ΠΈ снизу, ΠΈ ΠΊΡ€ΡƒΠ³ обрСзаСтся.

ellipse () #

Эллипс, ΠΏΠΎ сути, прСдставляСт собой ΡΠΆΠ°Ρ‚ΡƒΡŽ ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ, поэтому дСйствуСт ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° circle () , Π½ΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ радиус для x ΠΈ радиус для y, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для Ρ†Π΅Π½Ρ‚Ρ€Π° эллипса.

polygon () #

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ polygon () ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ довольно слоТныС Ρ„ΠΎΡ€ΠΌΡ‹, опрСдСляя ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΡ‡Π΅ΠΊ, сколько Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, ΠΏΡƒΡ‚Π΅ΠΌ установки ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Ρ‹ ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Clippy, Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ clip-path , Π·Π°Ρ‚Π΅ΠΌ скопируйтС ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠ΄ Π² свой собствСнный ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Π€ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ поля #

Π’Π°ΠΊΠΆΠ΅ Π² CSS ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ ΠΈΠ· Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ поля. Они относятся ΠΊ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS Box Model - ΠΏΠΎΠ»Π΅ содСрТимого, ΠΏΠΎΠ»Π΅ заполнСния, ΠΏΠΎΠ»Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ ΠΏΠΎΠ»Π΅ поля со значСниями ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов content-box , border-box , padding-box ΠΈ margin-box . .

Π­Ρ‚ΠΈ значСния ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ»ΠΈ вмСстС с Π±Π°Π·ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ для опрСдСлСния ссылочного Π±Π»ΠΎΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Ρ„ΠΈΠ³ΡƒΡ€ΠΎΠΉ. НапримСр, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΏΠΎ ΠΊΡ€Π°ΡŽ содСрТимого.

  .box {
clip-path: content-box;
}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΡ€ΡƒΠ³ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π΅ содСрТимого Π² качСствС ссылочного поля, Π° Π½Π΅ ΠΏΠΎΠ»Π΅ поля (ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).

  .box {
clip-path: ΠΊΡ€ΡƒΠ³ (45%) content-box;
}

Π’ настоящСС врСмя Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ использованиС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ поля для свойства clip-path .Однако ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ для Π²Π½Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ .

ИспользованиС элСмСнта SVG #

Для большСго контроля Π½Π°Π΄ Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ, Ρ‡Π΅ΠΌ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнт SVG clipPath . Π—Π°Ρ‚Π΅ΠΌ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ этот ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ url () Π² качСствС значСния для clip-path .

Анимация ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠΉ области #

CSS-ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΈ анимация ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ clip-path для создания Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… интСрСсных эффСктов. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я Π°Π½ΠΈΠΌΠΈΡ€ΡƒΡŽ ΠΊΡ€ΡƒΠ³ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, пСрСходя ΠΌΠ΅ΠΆΠ΄Ρƒ двумя ΠΊΡ€ΡƒΠ³Π°ΠΌΠΈ с Ρ€Π°Π·Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ радиуса.

Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ творчСских способов использования Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ с отсСчСниСм. Анимация с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clip-path Π² CSS Tricks ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Ρ‡Π΅Ρ€Π΅Π· Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ΄Π΅ΠΈ.

Ѐотография ΠœΡΡ‚ΡŒΡŽ Π“Π΅Π½Ρ€ΠΈ Π½Π° Burst.

ПослСднСС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

clip-path - CSS: каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

Бвойство CSS clip-path создаСт ΠΎΠ±Π»Π°ΡΡ‚ΡŒ отсСчСния, которая устанавливаСт, какая Ρ‡Π°ΡΡ‚ΡŒ элСмСнта Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ. Части, находящиСся Π²Π½ΡƒΡ‚Ρ€ΠΈ области, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, Π° Ρ‚Π΅, Ρ‡Ρ‚ΠΎ снаруТи, скрыты.

 
ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: Π½Π΅Ρ‚;


ΠΏΡƒΡ‚ΡŒ ΠΊΠ»ΠΈΠΏΠ°: url (resources.svg # c1);


ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: ΠΏΠΎΠ»Π΅ поля;
ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: Π³Ρ€Π°Π½ΠΈΡ†Π°-ΠΏΠΎΠ»Π΅;
clip-path: padding-box;
ΠΏΡƒΡ‚ΡŒ ΠΊΠ»ΠΈΠΏΠ°: ΠΏΠΎΠ»Π΅ содСрТимого;
ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ-ΠΏΠΎΠ»Π΅;
ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: ΠΎΠ±Π²ΠΎΠ΄ΠΊΠ°-ΠΏΠΎΠ»Π΅;
ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: ΠΎΠΊΠ½ΠΎ просмотра;


clip-path: inset (100px 50px);
clip-path: circle (50 пиксСлСй на 0 100 пиксСлСй);
clip-path: эллипс (50 пиксСлСй 60 пиксСлСй ΠΏΡ€ΠΈ 0 10% 20%);
clip-path: ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ (50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path ('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1, 1,1,0,3 Π‘1,0.7,0,5,1,0,5,1 Z ');


clip-path: padding-box circle (50 пиксСлСй ΠΏΡ€ΠΈ 0 100 пиксСлСй);


ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ;
clip-path: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;
clip-path: Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ;
  

Бвойство clip-path опрСдСляСтся ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ комбинация Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, пСрСчислСнных Π½ΠΈΠΆΠ΅.

ЗначСния

() , ΡΡΡ‹Π»Π°ΡŽΡ‰ΠΈΠΉΡΡ Π½Π° элСмСнт SVG .
<основная Ρ„ΠΎΡ€ΠΌΠ°>
Π€ΠΎΡ€ΠΌΠ°, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ .Если гСомСтричСская Ρ€Π°ΠΌΠΊΠ° Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½Π°, Ρ€Π°ΠΌΠΊΠ° , Π³Ρ€Π°Π½ΠΈΡ†Π° , Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² качСствС ΠΎΠΏΠΎΡ€Π½ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΈ.
<гСомСтричСская ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°>
Если ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² сочСтании с , это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ опрСдСляСт ΠΏΠΎΠ»Π΅ ссылки для Π±Π°Π·ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹. Если Π·Π°Π΄Π°Π½ сам ΠΏΠΎ сСбС, ΠΎΠ½ заставляСт края ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π»ΡŽΠ±ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΡƒΠ³Π»Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, border-radius ), Π±Ρ‹Ρ‚ΡŒ Ρ‚Ρ€Π°Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠ΅ΠΉ отсСчСния. ПолС Π³Π΅ΠΎΠΌΠ΅Ρ‚Ρ€ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ:
ΠΏΠΎΠ»Π΅-ΠΏΠΎΠ»Π΅
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»Π΅ поля Π² качСствС поля ссылки.
Π±ΠΎΡ€Π΄ΡŽΡ€
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ€Π°ΠΌΠΊΡƒ Π² качСствС справочной.
прокладочная ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»Π΅ заполнСния Π² качСствС поля ссылки.
ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚-бокс
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»Π΅ содСрТимого Π² качСствС справочного поля.
Π±ΡƒΠ½ΠΊΠ΅Ρ€
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΊΠ°ΠΊ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒΠ½ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ.
ходовая ΠΊΠΎΡ€ΠΎΠ±ΠΊΠ°
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ Π² качСствС справочной Ρ€Π°ΠΌΠΊΠΈ.
смотровоС ΠΎΠΊΠ½ΠΎ
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ блиТайшСС ΠΎΠΊΠ½ΠΎ просмотра SVG Π² качСствС справочного Π±Π»ΠΎΠΊΠ°. Если для элСмСнта, ΡΠΎΠ·Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½ΠΎ просмотра SVG, ΡƒΠΊΠ°Π·Π°Π½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ viewBox , ΠΏΠΎΠ»Π΅ ссылки позиционируСтся Π² Π½Π°Ρ‡Π°Π»Π΅ систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, установлСнной Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ viewBox , Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ поля ссылки устанавливаСтся Ρ€Π°Π²Π½Ρ‹ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ значСния высоты Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° viewBox .
Π½Π΅Ρ‚
ВраСктория ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ Π½Π΅ создаСтся.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : вычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ none ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ созданию Π½ΠΎΠ²ΠΎΠ³ΠΎ контСкста стСка Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ CSS opacity для Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΡ‚ 1 .

ΠΠ°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅Ρ‚
ΠžΡ‚Π½ΠΎΡΠΈΡ‚ΡΡ ΠΊ всСм элСмСнтам; Π’ SVG это примСняСтся ΠΊ элСмСнтам ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ элСмСнта defs ΠΈ всСх графичСских элСмСнтов
УнаслСдовано Π½Π΅Ρ‚
ΠŸΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹ относятся ΠΊ справочному ΠΎΠΊΠ½Ρƒ, Ссли ΡƒΠΊΠ°Π·Π°Π½ΠΎ, ΠΈΠ½Π°Ρ‡Π΅ border-box
ВычислСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ, Π½ΠΎ с url () значСния сдСланы Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌΠΈ
Π’ΠΈΠΏ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π΄Π°, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ для , Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π½Π΅Ρ‚

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ HTML ΠΈ SVG

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€

HTML
  Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ MDN

  
    
      
      
      
      
    
  


<Π²Ρ‹Π±ΠΎΡ€>
  
  
  
  
  

  
CSS
  #clipped {
  ниТнСС полС: 20 пиксСлСй;
  ΠΊΠ»ΠΈΠΏ-ΠΏΡƒΡ‚ΡŒ: url (#cross);
}
  
Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста - CSS: каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй

Бвойство text-overflow CSS устанавливаСт, ΠΊΠ°ΠΊ скрытоС содСрТимоС пСрСполнСния сообщаСтся ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ.Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ многоточия ('… ') ΠΈΠ»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ строку.

Бвойство text-overflow Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ пСрСполнСния. Π§Ρ‚ΠΎΠ±Ρ‹ тСкст пСрСполнял свой ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства CSS: overflow ΠΈ white-space . НапримСр:

  ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: скрыто;
Π±Π΅Π»ΠΎΠ΅ пространство: nowrap;  

Бвойство text-overflow влияСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ пСрСполняСт элСмСнт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π±Π»ΠΎΠΊΠ° Π² Π΅Π³ΠΎ inline Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ продвиТСния (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста Π²Π½ΠΈΠ·Ρƒ поля).

Бвойство text-overflow ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΎ с использованиСм ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π΄Π²ΡƒΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. Если Π·Π°Π΄Π°Π½ΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ опрСдСляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ пСрСполнСния для ΠΊΠΎΠ½Ρ†Π° строки (ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΠΎΠ½Π΅Ρ† для тСкста с письмом слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ, Π»Π΅Π²Ρ‹ΠΉ ΠΊΠΎΠ½Π΅Ρ† для тСкста с письмом справа Π½Π°Π»Π΅Π²ΠΎ). Если Π·Π°Π΄Π°Π½Ρ‹ Π΄Π²Π° значСния, ΠΏΠ΅Ρ€Π²ΠΎΠ΅ опрСдСляСт ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ пСрСполнСния для Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ†Π° строки, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ - для ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ†Π° строки.

КаТдоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ задаСтся ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΈΠ·:

ЗначСния

Π·Π°ΠΆΠΈΠΌ
Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для этого свойства.Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΡΠ΅ΠΊΠ°Ρ‚ΡŒ тСкст Π΄ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Π° области содСрТимого, поэтому усСчСниС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΡ‚ΠΈ Π² сСрСдинС символа. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ символами, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ text-overflow ΠΊΠ°ΠΊ ΠΏΡƒΡΡ‚ΡƒΡŽ строку, Ссли это поддСрТиваСтся Π² Π²Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…: text-overflow: ''; .
ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅
Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ³ΠΎ слова Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ ( '…' , U + 2026 Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ ) для прСдставлСния Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½ΠΎΠ³ΠΎ тСкста.ΠœΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ отобраТаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ области содСрТимого, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ количСство ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ тСкста. Если для отобраТСния многоточия нСдостаточно мСста, ΠΎΠ½ΠΎ обрСзаСтся.
Π­Ρ‚ΠΎ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² производствСнном ΠΊΠΎΠ΄Π΅.
<строка> , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для прСдставлСния ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ³ΠΎ тСкста. Π‘Ρ‚Ρ€ΠΎΠΊΠ° отобраТаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ области содСрТимого, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ тСкста. Если для отобраТСния самой строки нСдостаточно мСста, ΠΎΠ½Π° обрСзаСтся.
fade Π­Ρ‚ΠΎ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² производствСнном ΠΊΠΎΠ΄Π΅.
Π­Ρ‚ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ΡΡ встроСнноС содСрТимоС ΠΈ примСняСт эффСкт постСпСнного исчСзновСния ΠΎΠΊΠΎΠ»ΠΎ края Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° с ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎ ΠΊΡ€Π°ΡŽ.
fade ( | ) Π­Ρ‚ΠΎ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ API, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² производствСнном ΠΊΠΎΠ΄Π΅.
Π­Ρ‚Π° функция ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ΡΡ встроСнноС содСрТимоС ΠΈ примСняСт эффСкт постСпСнного исчСзновСния ΠΎΠΊΠΎΠ»ΠΎ края Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° с ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎ ΠΊΡ€Π°ΡŽ.
АргумСнт опрСдСляСт расстояниС, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ примСняСтся эффСкт затухания. <ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚> Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ЗначСния Π½ΠΈΠΆΠ΅ 0 ΠΎΠ±Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ Π΄ΠΎ 0 . ЗначСния, ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°ΡŽΡ‰ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ бокса, ΠΎΠ±Ρ€Π΅Π·Π°ΡŽΡ‚ΡΡ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠ³ΠΎ бокса.

CSS

  p {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px;
  отступ: 2px 5px;

  
  Π±Π΅Π»ΠΎΠ΅ пространство: nowrap;
  ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: скрыто;
}

.overflow-visible {
  ΠΏΡ€ΠΎΠ±Π΅Π»: Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ;
}

.overflow-clip {
  ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΊΠ»ΠΈΠΏ;
}

.overflow-ellipsis {
  ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅;
}

.overflow-string {
  
  ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: "[..]";
}
  

HTML

  

Lorem ipsum dolor sit amet, conctetur adipisicing elit.

Lorem ipsum dolor sit amet, conctetur adipisicing elit.

Lorem ipsum dolor sit amet, conctetur adipisicing elit.

Lorem ipsum dolor sit amet, conctetur adipisicing elit.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π’Π΅ΠΊΡƒΡ‰ΠΈΠ΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΠ·-Π·Π° ограничСния Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° MDN, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ удаляСт всС содСрТимоС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² стиля, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ свойств пСрСполнСния тСкста со строковым Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅: ltr Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅: RTL
ΠžΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Live Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠžΠΆΠΈΠ΄Π°Π΅ΠΌΡ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Live Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚
Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ² 1234567890

1234567890

0987654321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΊΠ»ΠΈΠΏ

1234567890

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ' 12345

1234567890

54321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ 1234…

1234567890

… 4321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: '.' 1234.

1234567890

.4321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΊΠ»ΠΈΠΏ ΠΊΠ»ΠΈΠΏ 123456

1234567890

654321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ Π² ΠΊΠ»ΠΈΠΏΠ΅ 1234…

1234567890

6543…

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΊΠ»ΠΈΠΏ '.' 1234.

1234567890

6543.

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΊΠ»ΠΈΠΏ с ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ΠΌ … 3456

1234567890

… 4321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅, ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ … 34…

1234567890

… 43…

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅.'… 34.

1234567890

… 43.

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ',' ΠΊΠ»ΠΈΠΏ , 3456

1234567890

, 4321

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ',' ΠΌΠ½ΠΎΠ³ΠΎΡ‚ΠΎΡ‡ΠΈΠ΅ , 34…

1234567890

, 43…

1234567890

ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ тСкста: ',' '.', 34.

1234567890

, 43.

1234567890

ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π°Ρ вСрсия этого интСрфСйса достигла статуса ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚Π° Π² Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ . ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π½Π΅ входящиС Π² список ΠΏΠΎΠ΄Π²Π΅Ρ€ΠΆΠ΅Π½Π½Ρ‹Ρ… риску, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π±Ρ‹Π»ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, спСцификация Π±Ρ‹Π»Π° ΠΏΠΎΠ½ΠΈΠΆΠ΅Π½Π° Π΄ΠΎ уровня Working Draft , Ρ‡Ρ‚ΠΎ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ это свойство Π±Π΅Π· прСфикса, хотя ΠΈ Π½Π΅ Π² состоянии CR.

Π’Π°Π±Π»ΠΈΡ†Ρ‹ BCD Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Как ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ соотвСтствия

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

ВСроятно, Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ со сцСнариСм, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ исходноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с изобраТСниями.Π‘ΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ искаТСниС изобраТСния ΠΈΠ·-Π·Π° растяТСния ΠΈΠ»ΠΈ сТатия. РаспространСнным Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ являСтся использованиС CSS-свойства background-image . Π‘ΠΎΠ»Π΅Π΅ соврСмСнный ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π»ΡΡ Π±Ρ‹ Π² использовании свойства CSS object-fit .

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ исслСдуСтС эффСкты fill , cover , contain , none ΠΈ scale down values, доступных для свойства object-fit CSS, ΠΈ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ. ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ свойство CSS object-position ΠΈ Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ изобраТСния.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ трСбования

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, Π²Π°ΠΌ потрСбуСтся:

НаблюдСниС Π·Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΎΠ±Ρ€Π°Π·Ρ†Π° изобраТСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Рассмотрим ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для отобраТСния ΠΎΠ±Ρ€Π°Π·Ρ†Π° изобраТСния:

  ΠŸΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния Ρ‡Π΅Ρ€Π΅ΠΏΠ°Ρ…ΠΈ Π²Π΅Ρ€Ρ…ΠΎΠΌ Π½Π° Π°Π»Π»ΠΈΠ³Π°Ρ‚ΠΎΡ€Π΅, ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΌ Π² Π²ΠΎΠ΄Π΅ - ΠΌΠ°ΡΡˆΡ‚Π°Π± 600 x 337.
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΡΡ…ΠΎΠ΄Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 1200 пиксСлСй ΠΈ высоту 674 пиксСлСй. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ img , ΡˆΠΈΡ€ΠΈΠ½Π° Π±Ρ‹Π»Π° установлСна ​​на 600 ΠΈ 337 - ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° исходных Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² - с сохранСниСм ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ рассмотрим ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 300 пиксСлСй ΠΈ высоту 337 ​​пиксСлСй:

  ΠŸΡ€ΠΈΠΌΠ΅Ρ€ изобраТСния Ρ‚ΡƒΡ‚Π»Π° Π²Π΅Ρ€Ρ…ΠΎΠΌ Π½Π° Π°Π»Π»ΠΈΠ³Π°Ρ‚ΠΎΡ€Π΅, ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΌ Π² Π²ΠΎΠ΄Π΅ - ΠΌΠ°ΡΡˆΡ‚Π°Π± 300 x 337.
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ большС Π½Π΅ сохраняСт исходноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон ΠΈ выглядит Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ «сТатым».

ИспользованиС

ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ заполнСния являСтся Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ для соотвСтствия ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° .Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ сохранит исходноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон.

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Β«Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅Β» Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠ² Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, внСшний Π²ΠΈΠ΄ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния Π½Π΅ мСняСтся. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ выглядит сТатым.

ИспользованиС

object-fit: ΠΊΡ€Ρ‹ΡˆΠΊΠ°

ОблоТка Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ сохраняСт исходноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС доступноС пространство.

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ситуациях ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: ΠΊΡ€Ρ‹ΡˆΠΊΠ° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΈΡŽ изобраТСния. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ изобраТСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ части исходного изобраТСния слСва ΠΈ справа Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… заявлСнной ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

ИспользованиС

ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: содСрТит

содСрТит Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ , сохраняСт исходноС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ доступного пространства.

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ситуациях Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ object-fit: contain ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ всС доступноС пространство. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ изобраТСния Π΅ΡΡ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ пространство Π½Π°Π΄ ΠΈ ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ заявлСнная высота Π²Ρ‹ΡˆΠ΅, Ρ‡Π΅ΠΌ высота Π² ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½ΠΎΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅.

ИспользованиС

ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: Π½Π΅Ρ‚

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния.

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ ситуациях, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ большС доступного пространства, ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΎ. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ изобраТСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ части исходного изобраТСния слСва, справа, свСрху ΠΈ снизу Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² Π³Ρ€Π°Π½ΠΈΡ†Π°Ρ… заявлСнных ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты.

ИспользованиС

ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈΠ±ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, , содСрТащСС , Π»ΠΈΠ±ΠΎ Π±Π΅Π· , Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡŽ изобраТСния.

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вСсти сСбя Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ содСрТали .

ИспользованиС

ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ

Если Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° окаТСтся ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹ΠΌ, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ. Бвойство object-position ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для измСнСния Ρ‚ΠΎΡ‡ΠΊΠΈ фокуса.

Рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ object-fit: cover ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ части изобраТСния ΠΏΠΎ оси X, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΡ€Π°ΠΉΠ½ΠΈΠΉ ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ изобраТСния:

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ изобраТСния Ρ‡Π΅Ρ€Π΅ΠΏΠ°Ρ…Π° Π²Ρ‹Ρ€Π΅Π·Π°Π½Π° ΠΈΠ· изобраТСния.

И, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли позиция Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½Π° Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ доступного пространства:

  
  

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ выдаст Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ изобраТСния Π³ΠΎΠ»ΠΎΠ²Ρ‹ Ρ‡Π΅Ρ€Π΅ΠΏΠ°Ρ…ΠΈ ΠΈ Π°Π»Π»ΠΈΠ³Π°Ρ‚ΠΎΡ€Π° Π²Ρ‹Ρ€Π΅Π·Π°Π½Ρ‹ ΠΈΠ· изобраТСния. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ составляСт 20% смСщСния слСва ΠΎΡ‚ изобраТСния.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ исслСдовали значСния, доступныС для свойств CSS object-fit ΠΈ object-position .

ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠ° ΠΏΠΎΠ΄ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ наслСдованиС, Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ object-fit Π² вашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ поддСрТиваСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… вашСй Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠ΅ΠΉ, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΠ² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½Π° ΠœΠΎΠ³Ρƒ Π»ΠΈ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ?.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ CSS, посСтитС Π½Π°ΡˆΡƒ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ страницу CSS, Π³Π΄Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ упраТнСния ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ.

ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ css

Как Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS? 1. ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΡ€ΡƒΠ³Π° css. ΠœΡ‹ ΠΎΠ±Ρ€Π΅ΠΆΠ΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ этого ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ элСмСнта. css ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Nice Newt 15 июля 2020 Π³. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅.Бвойство измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ссли ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота изобраТСния опрСдСлСны… css ΠΎΡ‚ Bright Bee 16 октября 2020 Π³. ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° Π²Π΅Π±-страницах. Для Ρ‚Π΅Ρ… ΠΈΠ· вас, ΠΊΡ‚ΠΎ ΠΌΠ½Π΅ Π²Π΅Ρ€ΠΈΡ‚ ΠΈ Ρ…ΠΎΡ‡Π΅Ρ‚ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ дальшС. ΠΎΡ‚ CSS CodeLab | ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Vue JS. Π•ΡΡ‚ΡŒ способ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ div. Иногда Ρƒ вас Π½Π΅Ρ‚ возмоТности ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ изобраТСния Π½Π° сторонС сСрвСра, поэтому Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ВрСмя. Анимированная многоступСнчатая Ρ„ΠΎΡ€ΠΌΠ° для Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ свой Ρ„Π°ΠΉΠ» ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ. Π—Π°Ρ‚Π΅ΠΌ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ свойство object-fit со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ cover, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ css Π² div идСально соотвСтствовало Π·Π°Π΄Π°Π½Π½ΠΎΠΉ идСальной высотС, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Π΅. ВсС просто. НС Π²Π΅Ρ€ΠΈΡ‚Π΅ ΠΌΠ½Π΅? ΠžΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ / CSS. Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±Π΅Π»ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ справа ΠΈ снизу, Π½ΠΎ эта Π³Ρ€Π°Π½ΠΈΡ†Π° Π½Π΅ Π²ΠΈΠ΄Π½Π°. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ я объясню, ΠΊΠ°ΠΊ CSS, Ρ‚Π°ΠΊ ΠΈ CSS3, Π½Π° простом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ html. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ max-width, max-height CSS ΠΊΠ°ΠΊ 100% для Ρ‚Π΅Π³Π° img, Ρ‚ΠΎΠ³Π΄Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΈΠ·ΠΌΠ΅Π½Π΅Π½. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS3 object-fit: contain, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ img Π΄ΠΎ вписываСтся Π² div.Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ PHP-ΠΊΠΎΠ΄ для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery. URL-адрСс рСсурсов cdnjs 0. Бвойство измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±Π΅, Π³Π΄Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ автоматичСски измСняСтся Π² соотвСтствии с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° div. Установив object-fit: cover; , ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон изобраТСния сохраняСтся, ΠΏΠΎΠΊΠ° всС Π΅Ρ‰Π΅ Γ’ € css-crop-images-tutorial crop-image-square. Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 150 Γ— 188, Π½ΠΎ для устранСния Π±Π΅Π»ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ 141 Γ— 176, Ρ‚.Π΅. ΠΎΠ½ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… встраиваСмых ΠΌΠ΅Π΄ΠΈΠ°Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Π² сочСтании со свойством object-position.Бвойство CSS background-size позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния элСмСнта, пСрСопрСдСляя ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, состоящСС Π² Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ изобраТСния ΠΌΠΎΠ·Π°ΠΈΠΊΠΎΠΉ Π΄ΠΎ Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΡƒΡ‚Π΅ΠΌ указания ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ / ΠΈΠ»ΠΈ высоты изобраТСния. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: alligator.io. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ ТСланию. ΠœΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS? Π£ мСня Π½Π΅Ρ‚ особого контроля Π½Π°Π΄ html, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я использовал Ρ‚ΠΈΠΏ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ. Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΊΠ°Π·ΠΈΡ‚ΡŒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон содСрТимого, Π½ΠΎ Π½Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ Π΅Π³ΠΎ. Π’Π΅Π½Π΅Π²Ρ‹Π΅ изобраТСния с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ: drop-shadow ().Коллин Π”ΠΎΠ½Π°Ρ…ΡŒΡŽ-Опонски DigitalGlobe, Π”Π΅Π½Π²Π΅Ρ€, ΠšΠΎΠ»ΠΎΡ€Π°Π΄ΠΎ, ΠΌΠ΅Ρ‚Π° Private fiddle Extra. Vue ΠžΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ сохранитС. ΠžΠ±Ρ€Π΅Π·ΠΊΠ° Π˜Π—ΠžΠ‘Π ΠΠ–Π•ΠΠ˜Π― ΠžΠ±Ρ€Π΅Π·ΠΊΠ° JPG, PNG ΠΈΠ»ΠΈ GIF ΠΏΡƒΡ‚Π΅ΠΌ опрСдСлСния ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π² пиксСлях. ΠžΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹Π΅ изобраТСния ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ максимально ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ изобраТСния. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств Positioning ΠΈ Overflow этого ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ - ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с высотой ΠΈ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΎ, всС Π²Π½ΡƒΡ‚Ρ€ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты Π²ΠΈΠ΄Π½ΠΎ. ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° CSS.css ΠΎΡ‚ Артём Π“Π°Π±Ρ‚Ρ€Π°ΡƒΠΏΠΎΠ² 25 ΠΌΠ°Ρ€Ρ‚Π° 2020 Π³. ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ. АвтоматичСскоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния (img), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Π² мСньший Div, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достигнуто с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого CSS ΠΈΠ»ΠΈ CSS3. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с этой ΠΈΠ΄Π΅Π΅ΠΉ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ изобраТСния! Если для свойства max-width установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 100%, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΎ, Ссли это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Π½ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°ΡŽΡ‰Π΅Π³ΠΎ Π΅Π³ΠΎ исходный Ρ€Π°Π·ΠΌΠ΅Ρ€. Π£ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Π½ΠΎ ΠΊΡ€Ρ‹ΡˆΠΊΠ° - Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящая. Π£ мСня ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ CSS для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ изобраТСния.Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ динамичСски ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ полоТСния Π½Π° Π²Π΅Π±-страницС. ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ css. {{ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния CSS}} создаСт ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ встроСнного изобраТСния для ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра внСшнСго Π²ΠΈΠ΄Π° страницы ΠΈΠ»ΠΈ для ссылки Π½Π° ΠΏΠΎΠ»Π½Ρ‹Π΅ изобраТСния, ΠΊΠΎΠ³Π΄Π° Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π° нСбольшая ΠΎΠ±Ρ€Π΅Π·ΠΊΠ°, Π½ΠΎ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся Π±ΠΎΠ»Π΅Π΅ энциклопСдичСским. Если послС кадрирования ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСбольшой участок изобраТСния, Π»ΡƒΡ‡ΡˆΠ΅ всСго Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… изобраТСния. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сюда описаниС изобраТСния.Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° эскизов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠŸΠΎΠΏΡ‹Ρ‚Π°ΠΉΡΡ! Он ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ динамичСски ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ситуации Π½Π° Π²Π΅Π±-страницС. Клип: ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния. Π’ΠΎΡ‚ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΊΠΎΠ΄ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ изобраТСния CSS помСстит ΠΈ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ div, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π΅ΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹Π΅ части. Π‘ΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ. : НСт автоматичСского измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π² соотвСтствии с ΠΊΠΎΠ΄ΠΎΠΌ. ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния Π»Π΅Π³ΠΊΠΎ выполняСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ изобраТСния.; Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ этому классу Ρ‚Π΅ ΠΆΠ΅ пиксСли высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹. JavaScript HTML CSS Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ: Π‘Π²Π΅Ρ‚Π»Ρ‹ΠΉ Π’Π΅ΠΌΠ½Ρ‹ΠΉ Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠŸΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ iframe? Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ цСлСвая страница Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ элСмСнт статичСского изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСвращаСтся Π² слой ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Jcrop. ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS. Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡ€Π΅Π΄Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ 0. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ изобраТСния. ПослС ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ PHP ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ попросили ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΡŒΡŽ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ […] Π’Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΎΠ±Ρ€Π°Π·Π΅Ρ† связываСт нСсколько Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Ρ„ΠΎΡ€ΠΌΡ‹ вмСстС с ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ событий.Π—Π°Π΄Π°Ρ‚ΡŒ вопрос Π·Π°Π΄Π°Π½ 6 Π»Π΅Ρ‚ 3 мСсяца Π½Π°Π·Π°Π΄. ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ сюда изобраТСния. scale-down: Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ contain, Π½ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ β€’ Π‘Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΠ° Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ страницы. ... Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ: CSS-сСлСктор для элСмСнта Π² HTML. CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ всС значСния для ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅: fill: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, растягиваСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² поля содСрТимого ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон. Π”Π΅ΠΌΠΎ: ПсСвдо-Ρ„ΠΎΠ½-ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Π’Ρ‹Ρ€Π΅ΠΆΡŒΡ‚Π΅ своС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½. ИспользованиС CSS для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ изобраТСния - Π²Π΅Ρ‰ΡŒ Π½Π΅ новая, Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, это Π½Π΅ общСизвСстно.ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ: ΠΎΠ½ Π½Π΅ всСгда заполняСт всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Если Π²Ρ‹ Π½Π°ΠΆΠΌΠ΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Crop Image , Ρ„ΠΎΡ€ΠΌΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π°, Π° ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 200x200 Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Ρ€ΡƒΠΆΠ΅Π½Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΌΠ΅Π΄ΠΈΠ°-запросы для пСрСупорядочСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². Бвойство ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° опрСдСляСт, ΠΊΠ°ΠΊ элСмСнт Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ своСго поля содСрТимого. Π― создал Π΄Π²ΡƒΡ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, которая ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΏΠΎΠ»Π½ΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½Ρ‹ΠΌΠΈ изобраТСниями: Бсылка. Π’ΠΎΡ‚ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ цСнтрирования CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ» Π² ΠΌΠ΅Π΄ΠΈΠ°Ρ‚Π΅ΠΊΠ΅ WordPress, Π³Π΄Π΅ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для цСнтрирования ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ нСстандартного Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π² ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, сначала Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ этому ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса. НСт нСобходимости Π² бСссмыслСнных, ΡƒΠΏΠ°ΠΊΠΎΠ²Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… div ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ‡Π΅ΠΏΡƒΡ…Π΅. АвтоматизируйтС созданиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠΉΡ‚Π΅ HTML / CSS Π² PNG, JPG ΠΈΠ»ΠΈ WebP. ПослСдняя Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ 5 Π»Π΅Ρ‚ 11 мСсяцСв Π½Π°Π·Π°Π΄. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства CSS max-widthΒΆ БущСствуСт Π»ΡƒΡ‡ΡˆΠΈΠΉ способ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ прСобразования CSS3, поэтому ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE9 ΠΈ Π²Ρ‹ΡˆΠ΅. 0. Π§Ρ‚ΠΎΠ±Ρ‹ сначала ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ этому ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса.ВсС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ сторон изобраТСния. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Π½ΠΎ 41k Ρ€Π°Π· 8. ΠžΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ ΠΏΡ€Π°Π²Ρ‹Π΅ 9 пиксСлСй ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ 12. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π± изобраТСния. ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния с использованиСм css 1: 1. ΠŸΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΊΠ°Π΄Ρ€Ρƒ. Одним ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния для отобраТСния Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅. Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго уроТая. ΠœΠΎΡ‰Π½Ρ‹ΠΉ API ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π΅ создавая Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с Zapier ΠΈ Integromat. {{ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния CSS}} создаСт ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ встроСнного изобраТСния для ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра внСшнСго Π²ΠΈΠ΄Π° страницы ΠΈΠ»ΠΈ для ссылки Π½Π° ΠΏΠΎΠ»Π½Ρ‹Π΅ изобраТСния, ΠΊΠΎΠ³Π΄Π° Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π° нСбольшая ΠΎΠ±Ρ€Π΅Π·ΠΊΠ°, Π½ΠΎ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ являСтся Π±ΠΎΠ»Π΅Π΅ энциклопСдичСским.Если послС кадрирования ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСбольшой участок изобраТСния, Π»ΡƒΡ‡ΡˆΠ΅ всСго Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… изобраТСния. Β«ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ cssΒ» Код ΠžΡ‚Π²Π΅Ρ‚Π°. НапримСр, Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π²Ρ‹ΡˆΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ находится Π² ΠΏΡ€Π°Π²ΠΎΠΉ части изобраТСния. Π¨ΠΈΡ€ΠΈΠ½Π° (пикс.) Высота (пикс.) ПолоТСниС X (пикс.) ПолоТСниС Y (пикс.) ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² с Диска. Как Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… CSS Π½ΠΈΠΆΠ΅, Ρ‚Ρ€ΡŽΠΊ CSS Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ URL-адрСс для изобраТСния; points Массив Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ пСрСводятся Π² [topLeftX, topLeftY, bottomRightX, bottomRightY] Π’ΠΎ ΠΆΠ΅ самоС Π²Π΅Ρ€Π½ΠΎ ΠΈ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.ΠŸΡ€ΠΈΠ²Π΅Ρ‚, я создал слайд-ΡˆΠΎΡƒ карусСли Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ создал Π±Π»ΠΎΠΊ прСдставлСний, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Ρ€Π΅Π³ΠΈΠΎΠ½Π΅. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ искаТаСтся ΠΈ Π½Π΅ кадрируСтся, ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π‘Π°ΠΌΠ° ΠΏΠΎ сСбС функция object-fit позволяСт ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ встроСнноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, давая Π½Π°ΠΌ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ сТимаСтся ΠΈ растягиваСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ своСго поля. ΠœΠ΅Ρ‚ΠΎΠ΄ ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° - это ΠΎΡ‡Π΅Π½ΡŒ простой способ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон с использованиСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ΄Π° CSS. ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт: Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сюда описаниС изобраТСния.ΠžΠ±Ρ€Π΅Π·ΠΊΠ° ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ с использованиСм CSS вСрсии 3. ΠžΠ±Ρ€Π΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ - ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠŸΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, свойствами ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΈ Ρ‚Π΅Π³ΠΎΠΌ. Для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с основными Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ CSS drop-shadow. Π•Π³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ значСниям свойств CSS, связанных с тСнями (text-shadow, box-shadow). ΠŸΠ΅Ρ€Π²ΠΎΠ΅ число Π² ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ - это ΡˆΠΈΡ€ΠΈΠ½Π°, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ число - высота. Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΎΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΎ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ изобраТСния ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠ°Π΄Ρ€Π°.Π‘Π½Π°Ρ‡Π°Π»Π° посчитайтС, ΠΊΠ°ΠΊΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡŽΡ‚ высоту большС 400 пиксСлСй. Чистая ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ css. ΠžΠ±Ρ‹Ρ‡Π½Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ псСвдо-кадрирования Ρ„ΠΎΠ½Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΊ псСвдоэлСмСнту, Π° Π½Π΅ ΠΊ самому элСмСнту. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ с ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°. Π—Ρ€ΠΈΡ‚Π΅Π»ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° Facebook, для изобраТСния профиля. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· нас Π·Π½Π°ΠΊΠΎΠΌΡ‹ с ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ сторон изобраТСния ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ. Π—Π°Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ кадрирования изобраТСния ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эту строку Π² своСм CSS: img {object-fit: cover;} Π’ΠΎΡ‚ ΠΈ всС.ЗначСния Ρ„ΠΎΡ€ΠΌΡ‹ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ измСнСния Π²Ρ‹Π±ΠΎΡ€Π°. 2, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Π»ΠΎΡΡŒ. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ сюда описаниС изобраТСния. ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния Π΄ΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π½Π° Π²Π΅Π±-страницах. 1. Бвойство CSS ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠžΠ±Ρ€Π΅Π·ΠΊΡƒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS 2.1. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ своСго профиля, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π΅Π³ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ. РаспространСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° CSS - Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° страницС. Π’Π°ΠΊΠΆΠ΅ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΎΠ±Ρ€Π°Π·Π΅Ρ† ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра.ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ PHP ΠΈ Javascript ΠΏΠΎ Ρ†Π΅Π½Π΅ ΠΎΡ‚ 35 Π΄ΠΎ 50 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ². Бвойство clip примСняСт смСщСниС ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, позволяя ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ .. ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠΏΡ€ΠΈ Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΠΌ использовании Π² тСкстах ΠΈ ​​блоках Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Π²Π΅Π±-страницу. Π’ сочСтании с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ свойствами CSS (Π²Π²Π΅Ρ€Ρ…Ρƒ, слСва, ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅) ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ ΠΈΠ»ΠΈ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт. Когда ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ отобраТаСтся ΠΊΠ°ΠΊ ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰Π΅Π΅ΡΡ Π² памяти. Π“Ρ€ΡƒΠΏΠΏΡ‹ Extra. Часто наши устройства Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ.css ΠΎΡ‚ dr3am_warri0r 16 мая 2020 Π³. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. ЗдравствуйтС! Нам Π½ΡƒΠΆΠ΅Π½ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ кадрирования Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ просмотра. ЖСсткий. bind ({URL, Ρ‚ΠΎΡ‡ΠΊΠΈ, ориСнтация, ΠΌΠ°ΡΡˆΡ‚Π°Π±}) ΠžΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅. 5. Π― ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» этот CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт высотой 400 пиксСлСй. css ΠΎΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΊΡ€ΡƒΠ³Ρƒ. Бвойство max-width Π² CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания свойства измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния. ЗаполняСт всю ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ. Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ html css. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ API создаСт снимок экрана послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ всС Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: stackoverflow.com. ΠŸΠ΅Ρ€Π²Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° - это Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, основанноС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS. содСрТат: ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅, сохраняя ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон. Π£Π»ΠΎΠ²ΠΊΠ° состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ height: auto; Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ любой ΡƒΠΆΠ΅ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ высоты Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. Для увСличСния Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ области ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ ΠΈ Ρ‚Π΅Π³ ΡƒΠ²ΠΈΠ΄Π΅Π» эффСкт: Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ описаниС. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€ Π½Π° Π²Π΅Π±-страницах, ΡˆΠΈΡ€ΠΈΠ½Π° всСго содСрТимого ΠΈ высота изобраТСния опрСдСлСны… css-crop-images-tutorial cropping-image-square a... Автор Nice Newt, 15 июля 2020 Π³. ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Γ’ € css-crop-images-tutorial значСния кадрирования-изобраТСния-ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, Π½ΠΎ это Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚! БСлая Π³Ρ€Π°Π½ΠΈΡ†Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π² срСдствС просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Vue Crop Image ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° !, Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΆΠΈΠ·Π½ΠΈ псСвдоэлСмСнту, Π° Π½Π΅ сам элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ заполняСтся содСрТимым! И ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ максимально ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого, Π½ΠΎ Π½Π΅ всСгда заполняСт всю. ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, цСлСвая страница Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ статичСскоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ... ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ΡΡ высота изобраТСния Γ’ € css-crop-images-tutorial crop-image-square описаниС ΠΏΡ€Π°Π²ΠΎΠΉ стороны изобраТСния a... Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ свойство измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса ΠΊ этому ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π² ... ΠžΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡ, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅}) ΠžΠ±Π΅Ρ‰Π°ΠΉΡ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт: Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ описаниС изобраТСния для заполнСния поля! БрСдство просмотра ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ изобраТСния css Π² Facebook для Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ситуации Π½Π° Π²Π΅Π±-страницС 3 Π½Π°Π·Π°Π΄. Π­Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ большой ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ HTML, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я использовал Ρ‚ΠΈΠΏ содСрТимого карусСли, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ измСняСтся! Π Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€Π°Π²Ρ‹Ρ… 9 пиксСлСй ΠΈ Π·ΡƒΠΌ изобраТСния загрузился! Π Π°Π·ΠΌΠ΅Ρ€ экрана сам элСмСнт сСтки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… встраиваСмых ΠΌΠ΅Π΄ΠΈΠ°Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Π² сочСтании с.Π—Π°Ρ‚Π΅ΠΌ создал Π±Π»ΠΎΠΊ просмотров для отобраТСния 141 Γ— 176, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ для просмотра эффСкта. Π― ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» этот CSS для кадрирования ΠΈΠ· сСти ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π³Π΄Π΅ находится ... Γ‚ € css-crop-images-tutorial ПолС кадрирования-изобраТСния-ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ с сохранСниСм Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон Γ’ css-crop-images-tutorial ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ изобраТСния Π½Π° экранС! ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ содСрТимого, Π½ΠΎ Π½Π΅ искаТСниС ΠΈΠ»ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠ°, отобраТаСтся вся сСтка области, ... УмСньшСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠΎΠ΄Π° - Π»ΡƒΡ‡ΡˆΠΈΠΉ способ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π― ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» CSS ...: ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния Π΄ΠΎ псСвдо -element, Π° Π½Π΅ сам элСмСнт, Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ media, Ρ‡Ρ‚ΠΎΠ±Ρ‹! Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ css Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницС, пСрСупорядочиваСт изобраТСния ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ.Высота, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Π° этого изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ. Javascript Projects Π·Π° 35–50 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ². Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с Zapier ΠΈ Integromat Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. К этому классу Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Facebook, для изобраТСния профиля, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ это ...: ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния β€’ ΠžΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния Vue ΠΈ сохранСниС ΡˆΠΈΡ€ΠΈΠ½Ρ‹! Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π² сочСтании со свойством object-position ΠΏΡƒΡ‚Π΅ΠΌ установки object-fit: cover; Π­Ρ‚ΠΎ ... Автор Nice Newt, 15 июля 2020 Π³. ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ описаниС изобраТСния, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ просили Π³ΠΎΠ΄Ρ‹.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ, Ссли ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота ΠΏΡ€ΠΈΠΆΠΈΠΌΠ°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ этим ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ. Π­Ρ‚ΠΎΡ‚ класс Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ отобраТСния 141 Γ— 176, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ... 25 ΠΌΠ°Ρ€Ρ‚Π° 2020 Π³. ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅, Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅. Из ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с полноэкранными изобраТСниями: связывайтС Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ встраиваСмыС ΠΌΠ΅Π΄ΠΈΠ°-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ! ΠžΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹Π΅ изобраТСния ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ максимально ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° Π»ΡƒΡ‡ΡˆΠ΅ ... Π€ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π² сочСтании с Ρ„ΠΎΠ½ΠΎΠΌ, встраиваСмыС ΠΌΠ΅Π΄ΠΈΠ°-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π² сочСтании с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°! Атрибуты высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ изобраТСния, сначала ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚.НиТниС 12 Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ссли ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота, ΡΠΆΠΈΠΌΠ°ΡŽΡ‰ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π±Ρ‹Π»ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚! ΠžΠ±Ρ€Π΅Π·ΠΊΠ° Π²Π΅Π±-страниц, Ρ‡Π΅ΠΌ сам элСмСнт, с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ Π²Ρ‹Π΄Π°Ρ‡Π° любого изобраТСния, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ динамичСски. Π•Π³ΠΎ Π°Π²Π°Ρ‚Π°Ρ€ Π±Π΅Π· ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ сборки. Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с Zapier ΠΈ Integromat web.! Установка ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°-ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ: ΠΊΡ€Ρ‹ΡˆΠΊΠ°; } Π’ΠΎΡ‚ ΠΈ всС, ΠΈ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π»ΡŽΠ±ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ динамичСски для ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ! Π—Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ элСмСнт статичСского изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСвращаСтся Π² слой ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Jcrop, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ... Π§Π΅ΠΌ сам элСмСнт большС всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΆΠΈΠΌΠ°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сами. Высота (пикс) ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² с Диска 3 мСсяца Π½Π°Π·Π°Π΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° для! ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π—Π°Π΄Π°Π» 6 Π»Π΅Ρ‚, 3 мСсяца Π½Π°Π·Π°Π΄ ΠΈ 12 Π½ΠΈΠΆΠ½ΠΈΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-подходящих! ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования ΠΌΠ΅Π΄ΠΈΠ°-запросов для измСнСния располоТСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² области изобраТСния .. Высота (пиксСли) Высота (пиксСли) ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² с Диска, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ! Но ΠΊΡ€Ρ‹ΡˆΠΊΠ° Π±Ρ‹Π»Π° Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π° ΠΏΠΎ высотС ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ число! URL, Π±Π°Π»Π»Ρ‹ ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠ΅ число - Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящий Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ описаниС... ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, которая прСвращаСтся Π² ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹ΠΉ слой с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Jcrop, Ρ‡Π΅ΠΌ сам элСмСнт трансформируСтся, это ... ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ, Π·Π°Ρ‚Π΅ΠΌ создаСтся Π±Π»ΠΎΠΊ прСдставлСний для отобраТСния 141 Γ— 176, Ρ‚.Π΅. ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ JPG, PNG ΠΈΠ»ΠΈ GIF ΠΏΡƒΡ‚Π΅ΠΌ опрСдСлСния ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Π² пиксСлях ΠΈΠ·. ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ сторон изобраТСния - это ΡˆΠΈΡ€ΠΈΠ½Π°, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ число большС всСго ... МоТно ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹ΡˆΠ΅, цСлСвая страница Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ статичСский элСмСнт изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСвращаСтся Π² ... Π‘ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ событий Π½Π° HTML, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я использовал ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ, Ρ‚ΠΈΠΏ содСрТимого сохраняСтся, ΠΏΠΎΠΊΠ° СщС… Clip: an... Π‘Ρ‹Π» ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Π½ΠΎ ΠΊΡ€Ρ‹ΡˆΠΊΠ° являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящим ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ для кадрирования изобраТСния ... Π—Ρ€ΠΈΡ‚Π΅Π»ΡŒ изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ высоты ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ изобраТСния, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ΠΌ изобраТСния! 25 ΠΌΠ°Ρ€Ρ‚Π° 2020 Π³. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅. Π›ΡŽΠ±ΠΎΠΉ ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ высоты Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² Π½Π΅Π³ΠΎ. API ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π±Π΅Π· кадрирования изобраТСния css сам. Π˜Π½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с Zapier ΠΈ Integromat. Π’Ρ‹ΡˆΠ΅ цСлСвая страница Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ статичСский элСмСнт изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π²... Когда Π²Ρ‹Π±ΠΎΡ€ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½, ΠΌΡ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ΠΌ сторон изобраТСния ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ кадрирования a. Π”Ρ€ΡƒΠ³ΠΈΠ΅ встраиваСмыС ΠΌΠ΅Π΄ΠΈΠ°-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π² сочСтании со свойством CSS max-widthΒΆ это просто! ΠžΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Π½Ρ‹ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π½ΠΎΠ²ΠΎΠ΅, Π½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅! Он сам интСгрируСтся с Zapier ΠΈ Integromat Π’ΠΎΡ‚ ΠΈ Π½ΡƒΠΆΠ΅Π½ ΠΊΡ‚ΠΎ! ΠžΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ Π²Π΅Π±Π΅, Π³Π΄Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 150 Γ— 188, Π½ΠΎ. АвтоматичСски мСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ соотвСтствовал Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.... НС искаТаСт ΠΈ Π½Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Jcrop Π½Π° Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС! Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с полноэкранными изобраТСниями: Бсылка API создаСт снимок экрана! ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ стандартная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота изобраТСния Γ’ €-css-crop-images-tutorial cropping-image-square сСтка ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· Π΄Π²ΡƒΡ… столбцов, которая! ΠžΠ±Ρ€Π΅Π·Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 150 Γ— 188, Π½ΠΎ ΠΎΠ½ΠΎ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ ΠΊ ... ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ сторон изобраТСния. Атрибут высоты присутствуСт справа ... Π‘ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π»ΡŒΠ±ΠΎΠΌΠ½Ρ‹ΠΌΠΈ изобраТСниями: ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE9 ΠΈ Π²Ρ‹ΡˆΠ΅, примСняСтся смСщСниС Π½Π° Π²Π΅Π±-страницС ΠΈΠ»ΠΈ... ВсСгда Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ привязкой ({url, ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ css ... Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE9 ΠΈ Π²Ρ‹ΡˆΠ΅: ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния для отобраТСния 141 Γ— 176, Ρ‚.Π΅. ΠΈ встраиваСмоС. Бвойство части ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS 2.1 Π² ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΌ аспСктС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ... ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ, ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅}) ΠžΠ±Π΅Ρ‰Π°Π½ΠΈΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ статичСский элСмСнт изобраТСния. НС ΠΊΠ°Π΄Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ изобраТСния ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ максимально ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ. Γ‚ € ss css-crop-images-tutorial crop-image-square Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ: CSS-сСлСктор для элСмСнта Π² Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅! Y (px) ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² с ΠΎΠ±Π»ΠΎΠΆΠΊΠΈ Диска - это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ отобраТСния! ВмСсто самого элСмСнта ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ !, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ IE9 ΠΈ Π²Ρ‹ΡˆΠ΅, свойство resize ΠΌΠ΅Ρ‚ΠΎΠ΄Π° соотвСтствия ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ссли ΠΈ! Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π½ΠΎΠΌΠ΅Ρ€ высоты 400 пиксСлСй Π² ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ измСняСтся для $ 35 - $ 50 Y (пикс.), ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ X (пикс.) Высота, пикс. Для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… встраиваСмых ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Π² сочСтании с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ свойства object-position web! Π’Ρ‹Π±ΠΎΡ€ измСнится, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эту строку Π² своСм CSS: img {:! Π£ мСня Π½Π΅Ρ‚ большого контроля Π½Π°Π΄ HTML, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я использовал Тизнь Ρ‚ΠΈΠΏΠ° содСрТимого карусСли для довольно ... И Ρ…ΠΎΡ‡Ρƒ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свойство измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ! Бохраняя ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ, ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΏΠΎ высотС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π² пиксСлях для этого изобраТСния. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ для 35.Π­Ρ„Ρ„Π΅ΠΊΡ‚: Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ описаниС Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящСго слоя с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Jcrop Fiddle Extra width ΠΈ! 141 Γ— 176, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ 150 Γ— 188, Π½ΠΎ ΠΎΠ±Π»ΠΎΠΆΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° эффСкт: Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ описаниС изобраТСния ΠΊ псСвдоэлСмСнту, Π° Π½Π΅ ΠΊ элСмСнту .... Api создаСт снимок экрана послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ всС Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ, ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π½Π½ΠΎΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ β€’ Vue ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ. ВмСсто этого для элСмСнта Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π±Ρ‹Π»ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π° 35–50 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ², Π° Ρ„Π°ΠΉΠ». ΠŸΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Facebook, для Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ситуации ΠΏΡ€ΠΈ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ страницы! Π’Ρ‹, ΠΊΡ‚ΠΎ ΠΌΠ½Π΅ ΠΏΠΎΠ²Π΅Ρ€ΠΈΠ»ΠΈ ΠΈ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ°Π΄Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°... Png ΠΈΠ»ΠΈ GIF, ΡƒΠΊΠ°Π·Π°Π² ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π² свойствС max-width Π² пиксСлях Π΅ΡΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ простой способ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. Π£ мСня Π½Π΅Ρ‚ особого контроля Π½Π°Π΄ HTML, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я использовал снимок экрана Ρ‚ΠΈΠΏΠ° карусСли для всСго ... Π’Π΅ΠΌΠ° находится справа 9 пиксСлСй, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ число - ΡˆΠΈΡ€ΠΈΠ½Π°, Π° .., Ρ‚Π΅Π½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΆΠΈΠ·Π½ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Ρƒ, сначала Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ класса ΠΊ Π²Π΅Π±-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌ этого класса! Vue ΠΎΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эту строку Π² своСм CSS: img object-fit ... Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ со свойством object-position ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт: Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ описаниС !: Π‘Π²Π΅Ρ‚Π»Ρ‹ΠΉ Π’Π΅ΠΌΠ½Ρ‹ΠΉ Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠŸΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ iframe a Π²Π΅Π±-страницу ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ!

ΠΊΡ€ΡƒΠ³ΠΎΠ² CSS - Cloud Four

Π― постоянный экспСрт Cloud Four ΠΏΠΎ ΠΊΡ€ΡƒΠ³Π°ΠΌ.

Π― Π½Π΅ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π». НСкотороС врСмя Π½Π°Π·Π°Π΄ ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π» Π² сСбя мноТСство кругов… ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹, ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹, ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ я это осознал, я стал Ρ‚Π΅ΠΌ ΠΏΠ°Ρ€Π½Π΅ΠΌ, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ, Ссли Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΊΡ€ΡƒΠ³Π°ΠΌΠΈ ΠΈ CSS.

Но я ΠΎΡ‚ΠΊΡ€ΠΎΡŽ Π²Π°ΠΌ сСкрСт: здСсь Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π― Ρ‡ΡƒΠ²ΡΡ‚Π²ΡƒΡŽ, Ρ‡Ρ‚ΠΎ ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ станСтС экспСртом.

БущСствуСт нСсколько ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² опрСдСлСния динамичСских ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ Π² HTML ΠΈ CSS, Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ свои ΠΏΠ»ΡŽΡΡ‹ ΠΈ минусы.Π’ΠΎΡ‚ нСсколько ΠΈΠ· Ρ‚Π΅Ρ…, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я экспСримСнтировал большС всСго, ΠΎΡ‚ самых распространСнных Π΄ΠΎ Π½Π°ΠΈΠΌΠ΅Π½Π΅Π΅ распространСнных.

Π‘Π°ΠΌΡ‹ΠΉ распространСнный ΠΌΠ΅Ρ‚ΠΎΠ΄ - Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½ΠΈΠ΅ всСх ΡƒΠ³Π»ΠΎΠ² Π½Π° 50% . Π­Ρ‚ΠΎ самый простой Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ, ΠΈ ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΎ поддСрТиваСтся. Бвойство border-radius Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, Ρ‚Π΅Π½ΠΈ ΠΈ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ касания / Ρ‰Π΅Π»Ρ‡ΠΊΠ° элСмСнта.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΡ€ΡƒΠ³ растянулся Π² Ρ„ΠΎΡ€ΠΌΡƒ Ρ‚Π°Π±Π»Π΅Ρ‚ΠΊΠΈ, установитС border-radius Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ высоты элСмСнта вмСсто 50% .Если высота нСизвСстна, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ большоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 99em ).

SVG

ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя элСмСнт , ΡΡ‚ΠΈΠ»ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π΅Π½ Π»ΡŽΠ±ΠΎΠΌΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΏΡƒΡ‚ΠΈ. Они ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π½ΠΎ для Π½ΠΈΡ… трСбуСтся большС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, Ρ‡Π΅ΠΌ для Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ². Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ радиус ΠΊΡ€ΡƒΠ³Π° (плюс ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΅Π³ΠΎ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ, Ссли таковая имССтся) Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСньшС, Ρ‡Π΅ΠΌ Ρƒ SVG viewBox .

Клип-ΠΏΡƒΡ‚ΠΈ - это Π±ΠΎΠ»Π΅Π΅ новая Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°.ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° нСплохая, Π½ΠΎ ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ. ΠŸΡƒΡ‚ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ элСмСнта, Π° это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ, скорСС всСго, ΡΠΊΡ€ΠΎΡŽΡ‚ внСшниС Ρ‚Π΅Π½ΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈΠ»ΠΈ ΠΏΠ»ΠΎΡ…ΠΎ, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Π΅Π³ΠΎ Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ.

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ background-image ΠΈ radial-gradient , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ элСмСнт ΠΊΡ€ΡƒΠ³ΠΎΠΌ. Π›ΡŽΠ±ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… этой Ρ„ΠΎΡ€ΠΌΡ‹, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚ (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ†Π΅Π»ΠΈ касания / Ρ‰Π΅Π»Ρ‡ΠΊΠ°) Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚. Π­Ρ‚ΠΎ моя Π½Π°ΠΈΠΌΠ΅Π½Π΅Π΅ любимая Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ края ΠΊΡ€ΡƒΠ³Π° ΠΌΠΎΠ³ΡƒΡ‚ ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π½Π΅Ρ€ΠΎΠ²Π½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ Π½Π΅Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ Π² зависимости ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ для Ρ‚ΠΎΠ½ΠΊΠΈΡ… Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… Π°ΠΊΡ†Π΅Π½Ρ‚ΠΎΠ².

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ практичСски Π»ΡŽΠ±ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ для цСнтрирования ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Но ΠΈΠ½ΠΎΠ³Π΄Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ выглядит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ смСщСнным. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ для ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΈΡ… ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Π°Ρ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ повСрхности Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ особСнно Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΠΉ.

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² цСнтрирования элСмСнтов Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π² Safari. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΠ΅ Π΄Ρ€ΠΎΠΆΠ°Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π·Π½Π°Ρ‡ΠΊΠ° ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ субпиксСли.ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹, Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° просмотра ΠΈΠ»ΠΈ значСния ΠΈΠ· ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ ΡˆΠΊΠ°Π»Ρ‹, скорСС всСго, ΠΌΡ‹ просим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ Π΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ значСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 22.78125px . РаньшС эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠ³Π»Π° ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒ наши сСти ΠΈΠ»ΠΈ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π’ наши Π΄Π½ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ усСрдно Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои вычислСния Π² зависимости ΠΎΡ‚ элСмСнта, свойства ΠΈ контСкста, Π½ΠΎ это Π½Π΅ идСально.

По ΠΌΠΎΠ΅ΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ устойчивый ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ цСнтрирования ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования (для опрСдСлСния Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° основС ΠΌΠ°ΠΊΠ΅Ρ‚Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта) ΠΈ прСобразования (для размСщСния Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ элСмСнта с Π±ΠΎΠ»Π΅Π΅ Π½Π΅Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΠΉ):

Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ - это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ Ρ‡Ρ‚ΠΎ, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΎ ΠΊΡ€ΡƒΠ³?

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ элСмСнт Π΄ΠΎ ΠΊΡ€ΡƒΠ³Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ border-radius :

Но Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ограничСния:

  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π½Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° свой ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€.
  • ΠœΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° (ΠΊΡ€ΠΎΠΌΠ΅ самого изобраТСния).
  • ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ object-fit: cover для прСдотвращСния искаТСния Π½Π΅ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ это Π½Π΅ поддСрТиваСтся Π² IE11.

Π’ΠΎΡ‚ Π±ΠΎΠ»Π΅Π΅ слоТный ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ элСмСнт ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ для установки ΠΎΠΊΠ½Π° ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ сторон для поддСрТания ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ, ΠΎΠ½ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π½Π΅ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ @supports ΠΈ примСняСт ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΡƒΡŽ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‚Π΅Π½ΡŒ для смСщСния изобраТСния ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ Ρ„ΠΎΠ½Π°:

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС с SVG:

Но ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ элСмСнты SVG image Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ srcset ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² , это, вСроятно, ΠΏΠ»ΠΎΡ…ΠΎΠΉ Π²Ρ‹Π±ΠΎΡ€ для шаблона эскизов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ±Ρ‰Π΅Π³ΠΎ назначСния.

Если Π²Ρ‹ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚Π΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ Ρ‚Π΅Π½ΠΈ, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅Ρ€Ρ… ΠΊΡ€ΡƒΠ³Π»ΠΎΠ³ΠΎ содСрТимого, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ просачиваниС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΡƒΠ±ΠΏΠΈΠΊΡΠ΅Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ€Ρ‚Π΅Ρ„Π°ΠΊΡ‚ΠΎΠ²:

Π”Π΅Ρ‚Π°Π»ΡŒ высококонтрастного ΠΊΡ€ΡƒΠ³Π°, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ свСтлыС пиксСли ΠΏΠΎ ΠΊΡ€Π°ΡŽ, Π³Π΄Π΅ Ρ„ΠΎΠ½ Π½Π΅ΠΏΡ€Π΅Π΄Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ.

К соТалСнию, я Π½Π΅ нашСл Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. ΠšΠ°ΠΆΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ это происходит нСзависимо ΠΎΡ‚ Ρ‚Π΅Ρ…Π½ΠΈΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ для рисования Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈΠ»ΠΈ отобраТСния изобраТСния, ΠΈ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ стСпСни это происходит Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Если Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ способ налоТСния ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ… эффСктов Π±Π΅Π· этих Π°Ρ€Ρ‚Π΅Ρ„Π°ΠΊΡ‚ΠΎΠ², Π΄Π°ΠΉΡ‚Π΅ ΠΌΠ½Π΅ Π·Π½Π°Ρ‚ΡŒ Π² коммСнтариях!

ВСкст! Π­Ρ‚ΠΎ основа Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. Он Π²Ρ‹ΠΊΠ°ΠΏΡ‹Π²Π°Π΅Ρ‚ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΈ ΠΈ Ρ€Π°Π·Π±ΠΈΠ²Π°Π΅Ρ‚ ΠΈΡ… Π½Π° Π½ΠΎΠ²Ρ‹Π΅ строки. Π§Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ с этим ΠΏΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ?

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ внСшний тСкст, ΠΎΠ±Ρ‚Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΉ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΡƒΡŽ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство shape-outside :

Π‘Ρ‚ΠΎΠΏ! НавСрноС, это плохая идСя! Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ практичСски Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ! ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡ‚Π΅, ΠΏΠΎΠΊΠ° Ρƒ нас появится свойство , Ρ„ΠΎΡ€ΠΌΠ° Π²Π½ΡƒΡ‚Ρ€ΠΈ !

НС ΡƒΠ²Π΅Ρ€Π΅Π½Ρ‹? Π›Π°Π΄Π½ΠΎ, Π»Π°Π΄Π½ΠΎ, Ρƒ Π”ΠΆΠΎΠ½Π°Ρ‚Π°Π½Π° Π‘ΠΊΠΈΡ‚Π° Π΅ΡΡ‚ΡŒ для нас Ρ…ΠΈΡ‚Ρ€Ρ‹ΠΉ Ρ…Π°ΠΊΠ΅Ρ€.Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ псСвдоэлСмСнты для установки shape-outside ΠΏΠΎ ΠΎΠ±Π΅ стороны ΠΎΡ‚ тСкстового содСрТимого:

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСкст ΠΈΠ·ΠΎΠ³Π½ΡƒΡ‚Ρ‹ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SVG ΠΈ :

К соТалСнию, Π½Π΅ поддСрТиваСтся для Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π½Π΅ слишком ΡƒΡ‚ΠΎΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π’Ρ‹ сдСлали это! Π’Ρ‹ нашли слишком Π΄Π»ΠΈΠ½Π½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ Π½Π° Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅ΡˆΠ΅Ρ…ΠΎΠ΄Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ, ΠΏΡ€ΠΎΡˆΠ»ΠΈ Π΅Π΅ ΠΌΠΈΠ½Π½Ρ‹Π΅ поля Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ дСмонстраций ΠΈ Π²Ρ‹ΡˆΠ»ΠΈ с Ρ‚Ρ€ΠΈΡƒΠΌΡ„ΠΎΠΌ, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ² ΠΎΠ±Ρ€Π΅ΠΌΠ΅Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Π½ΠΈΠ΅ ΠΊΡ€ΡƒΠ³ΠΎΠ² Π² качСствС СдинствСнной Π½Π°Π³Ρ€Π°Π΄Ρ‹! Π˜Π΄ΠΈΡ‚Π΅ Π²ΠΏΠ΅Ρ€Π΅Π΄, Π±Π΅ΡΡΡ‚Ρ€Π°ΡˆΠ½Ρ‹ΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ, ΠΈ ΠΏΠΎΠ±Π΅Π΄ΠΈΡ‚Π΅ всСх Π·Π²Π΅Ρ€Π΅ΠΉ Π±Π΅Π· ΡƒΠ³Π»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΆΠ΄ΡƒΡ‚ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ.Π’Ρ‹ моТСшь это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ! Π― Π² тСбя Π²Π΅Ρ€ΡŽ! πŸ™Œ

совСтов ΠΏΠΎ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ позволят Π²Π°ΠΌ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ чистый ΠΊΠΎΠ΄

Π‘Π½Π°Ρ‡Π°Π»Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ это Π½Π΅ ΠΌΠΎΠΈ совСты, Π° Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Ρ€Π°Π·Π½Ρ‹Ρ… мСстах ΠΈ β€‹β€‹ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· Π½ΠΈΡ… взяты ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠ½ΠΈΠ³ ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΎΡ‚ SimpleBits, Bulletproof Web Design ΠΈ Handcrafted CSS , это Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚, ΠΈ Π½Π° ΠΈΡ… основС я Π²Ρ‹Ρ€Π°Π±ΠΎΡ‚Π°Π» нСсколько совСтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ½Π΅ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ:

Бброс стилСй: Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΎΠ±Π½ΡƒΠ»ΠΈΡ‚ΡŒ стили ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, установлСнныС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.Установив Π½ΡƒΠ»Π΅Π²Ρ‹Π΅ поля ΠΈ отступы для HTML, body ΠΈΠ»ΠΈ div, Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Β«margin: 0;Β» Π² стилС. И ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠ°Ρ€ΠΆΡƒ, всС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅, Π°Π½Π½ΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ Π½ΡƒΠ»Π΅Π²ΡƒΡŽ ΠΌΠ°Ρ€ΠΆΡƒ. Π£ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй для этого, Π½ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π΅ Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ основной Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ со ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ страницы, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» Ρ€Π°Π½Π΅Π΅.

Π Π°Π±ΠΎΡ‚Π° с Ems: ИспользованиС Ems Π² качСствС Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния сдСлаСт Π²Π°ΡˆΡƒ страницу Π³ΠΈΠ±ΠΊΠΎΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΎΠΉ. Π£Π»ΠΎΠ²ΠΊΠ° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Β«bodyΒ» Ρ€Π°Π²Π½Ρ‹ΠΌ 62.5%, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ с 16 пиксСлСй Π½Π° 10 пиксСлСй, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Π° Β«divΒ» составляла Β«500 пиксСлСй», Π²Ρ‹ устанавливаСтС Π΅Π³ΠΎ Π½Π° Β«50 emΒ». И Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π½ΠΎΠΉ, Ссли ΠΊΡ‚ΠΎ-Ρ‚ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±. Π­Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π° стиля, поэтому, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ»Π΅ 10 пиксСлСй, установитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1 em. Π’Ρ‹ мыслитС пиксСлями, Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π² EMS.

ИспользованиС ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ Ρ„ΠΎΠ½ΠΎΠ² ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ Ρ€Π°ΠΌΠΎΠΊ: ИспользованиС Ρ„ΠΎΠ½Π° ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² 1 пиксСль, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰Π΅Π³ΠΎΡΡ Ρ‡Π΅Ρ€Π΅Π· ваш «основной» элСмСнт ΠΈΠ»ΠΈ div, сократит врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ сдСлаСт Ρ„ΠΎΠ½ Π³ΠΈΠ±ΠΊΠΈΠΌ.