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

Web-инструмСнты для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS.

Π‘Ρ‚ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ большими, ΠΊΠ°ΠΊ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π΄Π»ΠΈΠ½Ρ‹, Ρ‚Π°ΠΊ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„Π°ΠΉΠ»Π°. Π§Ρ‚ΠΎΠ±Ρ‹ Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваши Π²Π΅Π±-страницы Π½Π΅ содСрТат ошибок ΠΈ быстро Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ Π’Π°ΠΌ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ извСстных online CSS ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€ΠΎΠ² / компрСссоров, инструмСнтов для форматирования ΠΊΠΎΠ΄Π° ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π½Π° ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΈΡ… ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ интСрСсны для вас.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈ ΠΈ сТатиС.

CSS Optimizer

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


Clean CSS

Clean CSS базируСтся Π½Π° CSSTidy. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ сТатия ΠΈ настройки сТатия. Он создаСт ΠΎΡ‚Ρ‡Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π’Π°ΠΌ Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ измСнилось. Π’Π°ΠΊΠΆΠ΅ провСряСт CSS Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² послСднСй вСрсии CSSTidy (1.3dev).

CSS Drive gallery-компрСссор CSS

CSS Drive gallery-компрСссор CSS ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° Ρ€Π΅ΠΆΠΈΠΌΠ°, Regular ΠΈ Advanced (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ). Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΈΠ»ΠΈ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°ΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, сохраняя, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ. Regular Ρ€Π΅ΠΆΠΈΠΌ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ слишком Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚Π΅Π»Π΅Π½ — просто Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ ΠΌΠ΅ΠΆΠ΄Ρƒ Light, Normal ΠΈ Super Compact сТатиСм ΠΈ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ.

Online CSS Optimizer

Online CSS Optimizer — это Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ простой инструмСнт ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS, Π½Π° основС CSS-ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€Π° для OS X ΠΈ Linux. Π£ вас Π΅ΡΡ‚ΡŒ Π΄Π²Π° способа Π²Π²ΠΎΠ΄Π° вашСго CSS: Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ€Π΅Π· тСкстовоС ΠΏΠΎΠ»Π΅, прСдусмотрСнноС Π½Π° страницС, Π»ΠΈΠ±ΠΎ ΡƒΠΊΠ°Π·Π°Π² ссылку ΠΊ Π’Π°ΡˆΠΈΠΌ стилям. Если Π’Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΊΠ°Ρ‚ΠΈΡ‚ΡŒ Π½Π°Π·Π°Π΄ сТатиС CSS — это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Uncompress CSS application Π½Π° сайтС.

CSS Compressor

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ популярный CSS-инструмСнт для сТатия — CSS Compressor, (исходный PHP-ΠΊΠΎΠ΄ CSS Compressor-Π°). Π’Π°ΠΌ Π΅ΡΡ‚ΡŒ мноТСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² сТатия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ. Π­Ρ‚ΠΎ касаСтся Ρ†Π²Π΅Ρ‚Π°, ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠΉ, ΠΏΡ€Π°Π²ΠΈΠ» ΠΈ CSS-свойств. CSS компрСссор Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ Combine ΡƒΡ‚ΠΈΠ»ΠΈΡ‚Ρƒ для ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ комбинирования ΠΈ сТатия Π΄ΠΎ Ρ‚Ρ€Π΅Ρ… ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… CSS-Ρ„Π°ΠΉΠ»ΠΎΠ².

flumpCakes Style Sheet Optimizer

flumpCakes Style Sheet Optimizer — Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ инструмСнт для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ форматирования. Он позволяСт Π’Π°ΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ сочСтания Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ„ΠΎΠ½Π°, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², списков, Π³Ρ€Π°Π½ΠΈΡ†, ΠΈ Pretty Print ΠΎΠΏΡ†ΠΈΡŽ, которая стандартизируСт Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΊΠΎΠ΄Π°. Одной ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ являСтся Backlink-функция. Она прСдоставляСт Π²Π°ΠΌ URL, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π² любоС врСмя Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π’Π°ΡˆΠΈ стили Π² сТатом состоянии.


Если Ρƒ Вас Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ вопросы, Ρ‚ΠΎ для ΡΠΊΠΎΡ€Π΅ΠΉΡˆΠ΅Π³ΠΎ получСния ΠΎΡ‚Π²Π΅Ρ‚Π° Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ нашим Ρ„ΠΎΡ€ΡƒΠΌΠΎΠΌ

You have no rights to post comments

Ammina Optimizer.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ сайта (CSS, JS, HTML, изобраТСния). Π’Π΅Π±-студия Ammina: Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΈ сопровоТдСниС сайтов.

О Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ

ΠœΠΎΠ΄ΡƒΠ»ΡŒ Β«Ammina Optimizer: ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ сайта (CSS, JS, HTML, изобраТСния)Β» позволяСт Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ ваш сайт для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½ΠΎΡΡ‚ΡŒ сайта для поисковых систСм, провСсти Π°ΡƒΠ΄ΠΈΡ‚ сайта Π² Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ… для дСсктопа ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΏΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ

ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, SEO, доступности, Best Practices ΠΈ Progressive Web Application.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ модуля Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ количСство ΠΈ объСм Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² (запросов ΠΊ сСрвСру) стилСй (CSS), Java Script (скриптов), ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π½Π° вашСм сайтС, ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π° HTML.

ВсС это ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈ отрисовку страницы Π½Π° сторонС посСтитСля, ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ поисковыми систСмами ΠΈ Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ

Π½Π° вашСм сайтС.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° модуля
  • Π‘ΠΎΠ»Π΅Π΅ 100 ΠΎΠΏΡ†ΠΈΠΉ
  • ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π° настройки. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв достаточно Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ нСсколько Π³Π°Π»ΠΎΡ‡Π΅ΠΊ (Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ с настройками ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ «Π½Π° Π»Π΅Ρ‚Ρƒ»
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с Google PageSpeed Insights ΠΈ Π°ΡƒΠ΄ΠΈΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΉ страниц сайта
  • УскорСниС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта Π½Π° 50 ΠΈ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ²
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° WebP Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ CSS, JS Ρ„Π°ΠΉΠ»ΠΎΠ²
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ JPG Ρ„Π°ΠΉΠ»ΠΎΠ² (сТатиС ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΡΡ‚ΠΈΠ³Π°Ρ‚ΡŒ 2-3 Ρ€Π°Π·)
  • НС измСняСт ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ CSS ΠΈ JS Ρ„Π°ΠΉΠ»Ρ‹
  • 3 ΠΌΠΎΠ΄Π΅Π»ΠΈ поиска ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ΄Π΅ страницы сайта
  • НС измСняСт ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS Ρ„Π°ΠΉΠ»Π°Ρ…
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ (ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ ΠΈ сТимаСт) ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ»Ρ‹ шаблона сайта, Ρ‚Π°ΠΊ ΠΈ систСмныС Ρ„Π°ΠΉΠ»Ρ‹ битрикс
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΊΠ°ΠΊ Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ‚Π°ΠΊ ΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² со сторонних сСрвСров
  • ВсС ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ происходят Π½Π° сСрвСрС сайта Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° модуля
  • Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ Π² CSS Ρ„Π°ΠΉΠ»Π°Ρ… Π² качСствС inline ΠΊΠΎΠ΄Π° Π² Ρ„Π°ΠΉΠ»Π°Ρ…
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Inline CSS (Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ CSS Ρ„Π°ΠΉΠ»ΠΎΠ² Π² ΠΊΠΎΠ΄ HTML страницы)
  • Π—Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ сокращСниС количСства запросов ΠΊ сСрвСру ΠΈ ΠΏΡ€Π΅Π΄Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ρ„Π°ΠΉΠ»ΠΎΠ²
  • БСсплатная установка ΠΈ настройка Π½Π° вашСм сайтС
  • ВСхничСская ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° модуля
Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ особСнности
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ CSS Ρ„Π°ΠΉΠ»ΠΎΠ²
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ JS Ρ„Π°ΠΉΠ»ΠΎΠ²
  • НСсколько Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ CSS
  • НСсколько Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ JS Ρ„Π°ΠΉΠ»ΠΎΠ²
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования Inline CSS
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° локального ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ JS Ρ„Π°ΠΉΠ»ΠΎΠ² со сторонних сайтов
  • Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… CSS, Π² Π²ΠΈΠ΄Π΅ Inline ΠΊΠΎΠ΄Π° Π² CSS Ρ„Π°ΠΉΠ»Ρ‹
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΉ JS Ρ„Π°ΠΉΠ»ΠΎΠ² Π½Π° сайтС
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈ локальноС ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ CSS с ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… сайтов
  • ΠŸΡ€Π΅Π΄Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° JS Ρ„Π°ΠΉΠ»ΠΎΠ² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π΄ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ этапа парсинга HTML ΠΊΠΎΠ΄Π° сайта
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ отобраТСния Π²Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Google Fonts
  • ΠŸΡ€Π΅Π΄Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° CSS Ρ„Π°ΠΉΠ»ΠΎΠ² Π΄ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ этапа парсинга HTML ΠΊΠΎΠ΄Π° страницы
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ HTML ΠΊΠΎΠ΄Π° страницы
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° WebP
  • НСсколько Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ HTML
  • ИспользованиС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ GD ΠΈ IMagick
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ inline JS
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Ρ‚Π΅Π³Π°Ρ… IMG
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ inline CSS
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS ΠΏΡ€Π°Π²ΠΈΠ»Π°Ρ… background[-image]
  • Поиск ΠΈ оптимизация ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Π² HTML ΠΊΠΎΠ΄Π΅ Π² ΠΏΠ°ΠΏΠΊΠ΅ /upload/ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ°ΠΏΠΊΠ°Ρ…
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ со сторонних сайтов
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ для ΠΏΡ€Π΅Π΄Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ
  • Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS, JS, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹Ρ… AJAX запросами (Π² Ρ‚. Ρ‡. JSON Π΄Π°Π½Π½Ρ‹Π΅)
  • Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с Google PageSpeed Insights
  • Аудит страниц сайта (с сохранСниСм истории) нСпосрСдствСнно ΠΈΠ· административной части сайта
Π”Π΅ΠΌΠΎ-Ρ€Π΅ΠΆΠΈΠΌ

Π Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ бСсплатно. Π’ Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ 21 дня ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π² Π΄Π΅ΠΌΠΎ-Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π² ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅.

БСсплатная тСхничСская ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

ΠœΡ‹ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Ρ‚Π΅Ρ…Π½ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΊΠ°ΠΊ Π”Πž Ρ‚Π°ΠΊ ΠΈ ΠŸΠžΠ‘Π›Π• приобрСтСния модуля.

ΠžΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ ΠΊ Π½Π°ΠΌ ΠΈ ΠΌΡ‹ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΏΡ€ΠΎΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π½ΠΈΠΌ ΠΈ, Ссли Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ, Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π».

Онлайн-Ρ‡Π°Ρ‚

Онлайн-Ρ‡Π°Ρ‚ доступСн Π²ΠΎ всСх Π½Π°ΡˆΠΈΡ… модулях прямо ΠΈΠ· административной части вашСго сайта

ΠŸΠΎΡ‡Ρ‚Π°

ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ Π½Π°ΠΌ Π² слуТбу тСхничСской ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, ΠΈ ΠΌΡ‹ ΠΏΠΎΠΌΠΎΠΆΠ΅ΠΌ Π²Π°ΠΌ с установкой ΠΈ настройкой модуля.

ДокумСнтация

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ Π½Π° наши ΠΌΠΎΠ΄ΡƒΠ»ΠΈ.

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ сайт сСйчас

ΠœΡ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ сСрвис симуляции ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ сайта позволяСт ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ модуля Π½Π° вашСм сайтС Π΄ΠΎ установки модуля.
ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ сайт сСйчас.

Π‘Π»Π°Π³ΠΎΠ΄Π°Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΡ‡ΠΈΡ‚Π°Π»ΠΈ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π°

ΠœΡ‹ всСгда Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ!

10 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов для форматирования ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² CSS

РСдакция Geekflare Π² Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° | ПослСднСС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 29 дСкабря 2019 Π³.

ПодСлись на:

Π‘ΠΊΠ°Π½Π΅Ρ€ бСзопасности Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Invicti β€” СдинствСнноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π΅ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ уязвимостСй с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Proof-Based Scanningβ„’.

Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ оптимизация Ρ„Π°ΠΉΠ»ΠΎΠ² CSS большС Π½Π΅ являСтся Π³ΠΎΠ»ΠΎΠ²Π½ΠΎΠΉ болью для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… инструмСнтов!

Π‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° своСго появлСния каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй (CSS) ΡˆΠΈΡ€ΠΎΠΊΠΎ использовались для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ оформлСния Π²Π΅Π±-страниц. Они Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ², ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π‘ΡƒΠ΄ΡƒΡ‡ΠΈ нСзависимым ΠΎΡ‚ HTML, CSS позволяСт Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ прСдставлСниС Π²Π΅Π±-страницы ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ‚ΠΈΠΏΠ°ΠΌ устройств с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ экрана Π±Π΅Π· нСобходимости Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ содСрТимоС страницы.

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

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

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

# Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ настройки CSS

CSS Minify

CSS Minify β€” это простой инструмСнт для ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS: процСсс извлСчСния ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ, ΡƒΠ΄ΠΎΠ±ΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΠ³ΠΎ, ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ сформированного CSS ΠΈ удалСния всСх ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², отступов, Π½ΠΎΠ²Ρ‹Ρ… строк ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π². ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ CSS ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π΅Π· этих элСмСнтов. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, минимизация Π΄Π΅Π»Π°Π΅Ρ‚ CSS Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΌ для чтСния, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΠΏΡƒΠ³ΠΈΠ²Π°Π΅Ρ‚ Π²ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΎΡ‚ ΠΊΡ€Π°ΠΆΠΈ Π²Π°ΡˆΠΈΡ… Ρ‚Ρ€ΡƒΠ΄ΠΎΠ΅ΠΌΠΊΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ† стилСй.

Когда Π²Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ свой ΠΊΠΎΠ΄, рСкомСндуСтся ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½ΡƒΡŽ (Π½Π΅ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ) Π²Π΅Ρ€ΡΠΈΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΅Π΅ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ внСсти измСнСния Π² это.

Π’Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅

Π’Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ Π½Π΅ являСтся инструмСнтом для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS. ВмСсто этого это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° CSS с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, разработанная с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ скорости. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΎΠΊ языка Π΄ΠΈΠ·Π°ΠΉΠ½Π° Adobe, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ³ΠΎ для Brackets, Edge Reflow.

Topcoat Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя PSD ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ€Ρ‚Π΅Ρ„Π°ΠΊΡ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ простых ΠΈ понятных ΠΈΠΊΠΎΠ½ΠΎΠΊ SVG ΠΈ руководств ΠΏΠΎ ΡΡ‚ΠΈΠ»ΡŽ. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ инструмСнты для ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½Π°Π»ΠΈΠ·Π° ΠΈ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΠΎΠ΅ сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Adobe Source Sans Pro.

Π£Π»ΡƒΡ‡ΡˆΠΈΡ‚Π΅Π»ΡŒ ΠΊΠΎΠ΄Π°

Code Beautifier основан Π½Π° CSS Tidy, популярном парсСрС ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€Π΅ CSS с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Он позволяСт Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠ΄ CSS для ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π² Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ URL-адрСсу. Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² свою Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΎΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ вмСстС со списком внСсСнных ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π° ΠΈΠ»ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Ρ„Π°ΠΉΠ» для ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ использования.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΈΡΡ‡Π΅Ρ€ΠΏΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ список ΠΎΠΏΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π² соотвСтствии с вашими прСдпочтСниями. НапримСр, ΠΎΠ½ прСдоставляСт ΠΏΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² сТатия, ΠΎΡ‚ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ Π΄ΠΎ самого высокого сТатия. Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ сортировку, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΡ‹ сТатия, ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Ρ… элСмСнтов ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡ€ΠΎΡ‡ΠΈΠΌ.

CSS Nano

Π”Ρ€ΡƒΠ³ΠΈΠΌ инструмСнтом ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS являСтся CSS Nano. Π­Ρ‚ΠΎΡ‚ основан Π½Π° инструмСнтС, созданном для прСобразования стилСй с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ называСтся PostCSS. Благодаря ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²ΠΎΠΉ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π΅ этого инструмСнта создатСли CSS Nano смогли ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ· Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ функциями.

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

# Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ очистки CSS

Грязная Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

Грязная Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π΄Π΅Π»Π°Π΅Ρ‚ прямо ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌ: ΠΎΠ½Π° Π±Π΅Ρ€Π΅Ρ‚ любой ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π΅ΠΌΡƒ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅, ΠΈ ΠΎΡ‡ΠΈΡ‰Π°Π΅Ρ‚ Π΅Π³ΠΎ, облСгчая Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ β€” Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° это допустимый ΠΊΠΎΠ΄ CSS. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ идСально ΡƒΠΊΡ€Π°ΡˆΠ΅Π½.

Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΠΈ Dirty Markup говорят, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΌΠΈΠ»Π»ΠΈΠ°Ρ€Π΄ строк ΠΊΠΎΠ΄Π° (учитывая Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ HTML ΠΈ JavaScript) Π±Ρ‹Π» ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΡ… инструмСнта.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Dust-Me

Dust-Me SelectorsΒ Π±Ρ‹Π» создан для сканирования Π²Π΅Π±-сайта ΠΈ поиска Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… сСлСкторов CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ вашСго ΠΊΠΎΠ΄Π°. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ надстройка для Firefox ΠΈ Opera.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Dust-Me ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ страницС ΠΈΠ»ΠΈ ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всю ΠΊΠ°Ρ€Ρ‚Ρƒ сайта, показывая Π²Π°ΠΌ Π΄Π΅Ρ‚Π°Π»ΠΈ всСх Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† стилСй ΠΈ сСлСкторов, распрСдСляя ΠΈΡ… ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ ΠΈ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ. ВСрсия для Firefox способна автоматичСски ΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ страницы Π²ΠΎ врСмя просмотра. Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ этом события ΠΌΡƒΡ‚Π°Ρ†ΠΈΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π² случаС измСнСния страницы.

CSS Lint

CSS Lint ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ минималистичный интСрфСйс: просто большоС тСкстовоС ΠΏΠΎΠ»Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ вставляСтС свой CSS-ΠΊΠΎΠ΄, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ Β«Π»ΠΈΠ½Ρ‚ΠΎΠ²Π°Ρ‚ΡŒΒ». Π’ Π½Π΅ΠΌ Π½Π΅ говорится, Ρ‡Ρ‚ΠΎ процСсс Π»ΠΈΠ½Ρ‚ΠΈΠ½Π³Π° сдСлаСт с вашим ΠΊΠΎΠ΄ΠΎΠΌ, Π½ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π°ΡŽΡ‰Π΅Π΅ сообщСниС Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы сообщаСт Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π·Π°Π΄Π΅Π½ΡƒΡ‚ ваши чувства, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π»ΡƒΡ‡ΡˆΠ΅.

CSS Lint провСряСт синтаксис вашСго ΠΊΠΎΠ΄Π° Π½Π° соотвСтствиС Π½Π°Π±ΠΎΡ€Ρƒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€Π°Π²ΠΈΠ». ДСлая это, ΠΎΠ½ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ Π½Π΅ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ ошибки. ПослС нСбольшой настройки CSS Lint Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ ΠΏΡ€Π°Π²ΠΈΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ.

# Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для тСстирования/ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ CSS

БтрСсс-тСст CSS

БтрСсс-тСст CSS Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ Π±ΡƒΠΊΠΌΠ°Ρ€ΠΊΠ»Π΅Ρ‚ (нСбольшой Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° JavaScript), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ примСняСт стрСсс-тСстированиС ΠΊ CSS любой Π²Π΅Π±-страницы. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ индСксируСт всС элСмСнты Π² ΠΊΠΎΠ΄Π΅ CSS ΠΈ ΠΈΡ… классы. Π—Π°Ρ‚Π΅ΠΌ ΠΎΠ½ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ стрСсс-тСст, удаляя классы ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΈ измСряя врСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы.

Если врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ сокращаСтся ΠΏΡ€ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ сСлСктора, Ρ‚ΠΎ этот сСлСктор прСдставляСт собой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ слСдуСт ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ. Π­Ρ‚ΠΎΡ‚ инструмСнт Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ особСнно с ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ CSS3, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π·Π°ΠΊΡ€ΡƒΠ³Π»ΡΡ‚ΡŒ ΡƒΠ³Π»Ρ‹, Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‚Π΅Π½ΠΈ тСкста ΠΈ Ρ‚Π΅Π½ΠΈ Π±Π»ΠΎΠΊΠΎΠ². ВсС эти эффСкты ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² CSS3 Π±Π΅Π· использования Π½Π°Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… скриптов ΠΈΠ»ΠΈ добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов.

Но CSS3 ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: ΠΎΠ΄Π½ΠΎ свойство ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ пСрСрисовкам ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌ с ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ страницы. Π’ΠΎΡ‚ Π³Π΄Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ стрСсс-тСст CSS.

Π‘Π»ΡƒΠΆΠ±Π° ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ CSS

Π‘Π»ΡƒΠΆΠ±Π° ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ CSS провСряСт каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΈ (X)HTML с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ стилСй. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ провСряСт свойства, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π²ΠΎ всСх вСрсиях CSS. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ страницу ΠΈΠ»ΠΈ Ρ„Π°ΠΉΠ» CSS, Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ввСсти Π΅Π³ΠΎ URI (ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ рСсурса) ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ основныС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ (Ρ‚ΠΈΠΏ CSS для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ), Ρ†Π΅Π»Π΅Π²ΠΎΠ΅ устройство, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ прСдупрСТдСния ΠΈ Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡΠΌΠΈ поставщика. -ΡΠΎΠΏΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ вопросы (ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ошибки ΠΈΠ»ΠΈ прСдупрСТдСния).

Когда всС настроСно, Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒΒ» ΠΈ ΠΆΠ΄Π΅Ρ‚Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ². ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Ρ‡Π΅Ρ‚ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список ошибок ΠΈ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ, Π³Π΄Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ нСдопустимыС свойства, синтаксичСскиС ошибки, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ нСизвСстного поставщика, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π² своСм CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ. ΠžΡ‚Ρ‡Π΅Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ Π²Π°ΠΌ вСсь Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ CSS Π½Π° вашСй страницС.

BackstopJS 3

BackstopJS 3Β Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ рСгрСссионноС тСстированиС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π²Π΅Π±-интСрфСйсов. Он выполняСт свою Ρ€Π°Π±ΠΎΡ‚Ρƒ, сравнивая ΡΠ΅Ρ€ΠΈΡŽ снимков экрана DOM. Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π·Π°Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ список Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ: Π΅ΡΡ‚ΡŒ ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ настройка ΠΌΠ°ΠΊΠ΅Ρ‚Π° для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ ΠΈ экрана ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ отобраТСния ΠΈ инспСктор ссылок / тСстов / Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сцСнарии Puppeteer ΠΈ ChromyJS, BackstopJS 3 ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ тСсты с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Chrome Headless. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ кроссплатформСнного Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ встроСнный Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π΄ΠΎΠΊΠ΅Ρ€ΠΎΠ². Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ глобально ΠΈΠ»ΠΈ локально ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚, ΠΈ ΠΎΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с CI ΠΈ систСмой управлСния вСрсиями. BackstopJS 3 ΠΎΡ‡Π΅Π½ΡŒ прост Π² использовании: всСго с трСмя ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ довольно Π΄ΠΎΠ»Π³ΠΈΠΉ ΠΏΡƒΡ‚ΡŒ.

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

Π― надСюсь, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ инструмСнты CSS ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ CSS вашСго Π²Π΅Π±-прилоТСния для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Если Π²Ρ‹ заинтСрСсованы Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ CSS, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с этим Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ курсом.

Бпасибо нашим спонсорам

Как ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CSS для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅

Π§Π°ΡΡ‚ΡŒ 2 ΠΈΠ· Β  БСрия аксСлСраторов Blue Triangle: ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅

Когда Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ рСсурсы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° ваш сайт , CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ, ΠΎ Ρ‡Π΅ΠΌ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, Π½ΠΎ CSS влияСт Π½Π° всС, Ρ‡Ρ‚ΠΎ отобраТаСтся.

CSS β€” Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ «каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй» β€” Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ страницу, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΎΡ‚ полоТСния элСмСнтов Π΄ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, CSS ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Как CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ вашСго сайта?

Как ΠΈ Π½Π΅ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ изобраТСния, Π½Π΅ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ CSS ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ замСдлСнию Ρ€Π°Π±ΠΎΡ‚Ρ‹ страниц ΠΈ сниТСнию ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»Π΅ΠΉ конвСрсии. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ сниТаСтся коэффициСнт конвСрсии ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ страница загруТаСтся дольшС:

ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, поэтому Π½Π΅ позволяйтС Π½Π΅ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ CSS Π·Π°ΠΌΠ΅Π΄Π»ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ вашСго сайта. Π’ΠΎΡ‚ ΠΊΠ°ΠΊΒ CSS ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ:

  • CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ синтаксичСский Π°Π½Π°Π»ΠΈΠ· HTML Β β€” Π²ΠΎ врСмя синтаксичСского Π°Π½Π°Π»ΠΈΠ·Π° CSS ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ JS. ЀактичСски, Π²Ρ‹, вСроятно, Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ смоТСтС Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ со страницСй.
  • CSS ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π±Π»ΠΎΠΊ β€” ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ пиксСль страницы Π½Π΅ появится, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ вСсь CSS.

CSS ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° страницы ΠΈ, ΠΊΠ°ΠΊ слСдствиС, являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ критичСского ΠΏΡƒΡ‚ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° β€” минимального объСма ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π²Π΅Π±-страницС для отобраТСния ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ пиксСля страницы.

HTML ΠΈ CSS β€” это Π΄Π²Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… трСбования для критичСского ΠΏΡƒΡ‚ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°. HTML β€” это Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСт страницу, Π° Π΅Π³ΠΎ Π°Π½Π°Π»ΠΈΠ· создаСт ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΡƒΡŽ модСль Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (DOM). CSS стилизуСт DOM с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS (CSSOM). Π§Ρ‚ΠΎΠ±Ρ‹ страница использовала CSS, ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ , Π° Π·Π°Ρ‚Π΅ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ .

БСгодня я ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΡƒΡΡŒ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ… Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ (Π° Π½Π΅ Π°Π½Π°Π»ΠΈΠ·Π°) CSS, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ самыС большиС ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π΅Π±-ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π·Π° счСт ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ CSS Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² Π΅Π³ΠΎ эффСктивной доставкС.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ доставку CSS ΠΈ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ вашСго сайта, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ:

  • Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° CSS ΠΈ
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сСтСвыС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ CSS быстрСС ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

Π£ΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° CSS

ЭффСктивная доставка Ρ„Π°ΠΉΠ»ΠΎΠ² CSS ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ объСма Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ, ΠΈ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ срСдствам доставки.

БущСствуСт Ρ‚Ρ€ΠΈ основных ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ объСм Π΄Π°Π½Π½Ρ‹Ρ…, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… Π² процСссС доставки:

  • ΠœΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ CSS ,
  • УмСньшСниС Π΄Π»ΠΈΠ½Ρ‹ Ρ„Π°ΠΉΠ»Π° CSS Π·Π° счСт сокращСния Π½Π΅Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΈ
  • Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ CSS для создания Ρ„Π°ΠΉΠ»Π° мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ всС Π΅Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ CSS

ΠœΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡ удаляСт всС ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΈ посторонниС символы Π² CSS. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡΡ это (48 символов) :

 h2 { 
Β  color: black;
Β Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚: синий;
}

Π² этот (38 символов) :

 h2{color:black;background-color:blue;} 

Π’ΠΎΡ‚ нСсколько инструмСнтов для ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ вашСго CSS:

  • Для Ρ€ΡƒΡ‡Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSSNano ΠΈΠ»ΠΈ кссо.
  • Π‘ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ сайты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΠ΅ процСссы, ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Gulp ΠΈΠ»ΠΈ Webpack.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, минимизация ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚ΡŒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π°, поэтому, Ссли Π²Ρ‹ застряли с ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚Π»Π°Π΄ΠΈΡ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Unminify.

И Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ CSS, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Bootstrap, Foundation ΠΈΠ»ΠΈ Susy, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ компиляторы ΠΈ ΠΌΠΈΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π½Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ стили CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·Π΄ΡƒΠ²Π°ΡŽΡ‚ ΠΊΠΎΠ΄.

УмСньшСниС Π΄Π»ΠΈΠ½Ρ‹ Ρ„Π°ΠΉΠ»Π° CSS

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

 p { 
Β Ρ†Π²Π΅Ρ‚: #00000;
}

НСкоторыС инструмСнты ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ это Π² сокращСнноС ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½ΠΎΠ΅ число:

 p { 
Β  color: #000;
}

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ сокращСнныС свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для сокращСния объСма Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. А ΠΊΠΎΠ³Π΄Π° стили ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² CSS, Π½Π΅Ρ‚ нСобходимости ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ стили. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ синтаксиса:

 h2, h3 { 
Β  color: blue;
}

НС это:

 h2 { 
Β  Ρ†Π²Π΅Ρ‚: синий;
}
h3 {
Β  Ρ†Π²Π΅Ρ‚: синий;
}

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ стилСй Ρ‚Π°ΠΊΠΆΠ΅ примСняСтся ΠΊ наслСдованию β€” Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ свойства Π² CSS Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ΡΡ Π² HTML Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ элСмСнтами (Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΌΠΈ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°ΠΌΠΈ). Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ„ΠΎΡ€ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ наслСдованиС Π² опрСдСлСниях свойств, Ссли наслСдованиС Π½Π΅ установлСно ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. НаслСдованиС ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ это:

 

Β Β Β 

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ


Β Β Β 

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
Β Β Β 

Абзац


НаслСдованиС примСняСтся ΠΊ CSS нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½ появляСтся β€” встроСнный, встроСнный ΠΈΠ»ΠΈ Π²ΠΎ внСшнСй Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ синтаксис CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ количСство ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ стилСй Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ CSS. Бонус Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π΅Π³ΠΎ Π»Π΅Π³Ρ‡Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

И послСднСС Π·Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Ρƒ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π±Π°Π·Π° ΠΊΠΎΠ΄Π° CSS, которая устарСла ΠΈ Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠ°. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ стили Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² вашСм CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ инструмСнт, ΠΊΠ°ΠΊ unCSS. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ смоТСтС Π΅Ρ‰Π΅ большС ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π΄Π»ΠΈΠ½Ρƒ Ρ„Π°ΠΉΠ»Π°.

Β 

Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ CSS

Π‘ΠΆΠ°Ρ‚ΠΈΠ΅ выполняСтся Π½Π° сторонС сСрвСра ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ количСство Π±Π°ΠΉΡ‚ΠΎΠ² Π² Ρ„Π°ΠΉΠ»Π΅ CSS Π±Π΅Π· измСнСния содСрТимого.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ сТатыС Ρ„Π°ΠΉΠ»Ρ‹, поэтому, ΠΊΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ рСсурс с сСрвСра, ΠΎΠ½ сообщаСт сСрвСру, ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈ ΠΎΠ½ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ сТатый Ρ„Π°ΠΉΠ». Если доступно, сТатый Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ доставлСн Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС сСрвСр доставляСт ΠΏΠΎΠ»Π½Ρ‹ΠΉ (нСсТатый) Ρ„Π°ΠΉΠ».

НСсТатыС Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС, Ρ‡Π΅ΠΌ сТатыС Ρ„Π°ΠΉΠ»Ρ‹, поэтому такая оптимизация Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π½ΠΈΠΉ. Если Π²Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ сТатиС, скорСС всСго, ваш сайт Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅, Ρ‡Π΅ΠΌ Ρƒ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ².

Π—Π°Π³Ρ€ΡƒΠΆΠ°ΠΉΡ‚Π΅ CSS быстрСС ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅

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

  • HTTP preload ΠΈ push , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ CSS Ρ€Π°Π½ΡŒΡˆΠ΅, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, ΠΈ
  • лСнивая Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π² сочСтании с встраиваниСм CSS Π² HTML .

Оба этих ΠΌΠ΅Ρ‚ΠΎΠ΄Π° доставки ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML Π²ΠΎ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ CSS.

Доставка CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTTP/2 push ΠΈΠ»ΠΈ HTTP preload

HTTP/2 push ΠΈ HTTP preload β€” это Π΄Π²Π° ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ сСти.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° HTTP
ИспользованиС ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π² HTTP, позволяСт Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ стили Ρ€Π°Π½ΡŒΡˆΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ ΠΈΡ… Ρ€Π°Π½ΡŒΡˆΠ΅, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ начинаСтся синтаксичСский Π°Π½Π°Π»ΠΈΠ· HTML. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π° Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ ΠΈΠ»ΠΈ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ HTTP.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ HTML:

  

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΎΡ‚Π²Π΅Ρ‚Π° HTML:

 Бсылка: ; ΠΎΡ‚Π½=ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°; as=style 

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

HTTP/2 push
HTTP/2 push Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ отличаСтся. По сути, ΠΎΠ½ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Ρ‚Π΅Ρ… ΠΆΠ΅ Ρ†Π΅Π»Π΅ΠΉ, Π° ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° фактичСски ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ push-API, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ доступСн ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ это, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Β«nopushΒ» Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΡ‚Π²Π΅Ρ‚Π° HTTP, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

 Бсылка: ; ΠΎΡ‚Π½=ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°; ΠΊΠ°ΠΊ=ΡΡ‚ΠΈΠ»ΡŒ; nopush 

ΠŸΡ€ΠΈ использовании HTTP/2 push сСрвСр выполняСт ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΡƒ, Π° Π½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ„Π°ΠΉΠ» CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½, сразу ΠΆΠ΅ пСрСносится вмСстС с HTML ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ push. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ push ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ рСсурсы Π΄Π°ΠΆΠ΅ быстрСС, Ρ‡Π΅ΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°. Однако, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ push, Π²Ρ‹ рискуСтС ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ использованиС ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… рСсурсов ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ объСм отправляСмых Π΄Π°Π½Π½Ρ‹Ρ…, поэтому Π±ΡƒΠ΄ΡŒΡ‚Π΅ остороТны с Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ.

Π”Ρ€ΡƒΠ³ΠΈΠΌ Π²Π°ΠΆΠ½Ρ‹ΠΌ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ΠΌ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ push ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для соСдинСний HTTP/2. Если Π½Π° вашСм сайтС Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ HTTP/2, ΠΎΠ½ Π½Π΅ смоТСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ push. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ способ инициирования ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ зависит ΠΎΡ‚ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ вашСго сСрвСра.

ΠžΡΠΎΠ±Ρ‹Π΅ указания
Ни ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°, Π½ΠΈ ΠΏΡ€ΠΎΡ‚Π°Π»ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ повсСмСстно. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… β€” Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ идСя, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈΠ»ΠΈ push-ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅, Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ страницы Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° поддСрТиваСтся Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎΠΌ основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π½ΠΎ Π±Π΅Π· ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π² Firefox, Opera ΠΈ IE ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ частичной ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Π² Edge. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, Firefox ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ push, Π° Safari ΠΈ IE β€” Π½Π΅Ρ‚.

Π’Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ ΠΈ отлоТСнная Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° CSS

Если ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠ° Π½Π° сСрвСр нСдоступны, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ CSS Π² Ρ‚Π΅Π³