10 најбољих алата за форматирање и оптимизацију ЦСС датотека

Форматирање и оптимизација ЦСС датотека више није главобоља за веб програмере уз помоћ ових ручно изабраних алата!


Од свог оснивања, каскадни листови стилова (ЦСС) нашироко се користе за оцртавање визуелних приказа веб страница. Они укључују дефиницију боја, изгледа, анимације и фонтова. Неовисно о ХТМЛ-у, ЦСС вам омогућава лако прилагођавање презентације веб страница различитим типовима уређаја различитих величина екрана без потребе да мало мењате садржај странице.

ЦСС се назива каскадни таблице стилова због начина на који се вриједности својстава примјењују на хијерархију садржаја. Дечији елементи могу или наследити или надјачати вредности својстава из својих надређених елемената. Ове могућности се пружају кроз модел заснован на хијерархијском обиму ефекта. Проблем овог модела је што, ако се не користи правилно, може озбиљно утицати на перформансе веб локације.

И нико не воли тромо веб страницу. Због тога је настала потреба за ЦСС оптимизацијом, заједно са новом врстом алата који су изричито дизајнирани како би ЦСС датотеке постале што уредније и брже.

ЦСС оптимизација се може обавити на више начина: ЦСС датотеке могу бити смањене у величини, могу се очистити, тестирати или потврдити за тачност, могу се уредити, форматирати тако да се разуме његов код и, уопштено, боље, могу бити подешен како би омогућио боље корисничко искуство. Направили смо избор најбољих алата за сваки од ових задатака.

# ЦСС алати за подешавање

ЦСС Минифи

ЦСС Минифи је једноставно средство за комбиновање ЦСС-а: поступак снимања улепшеног, читљивог, добро формираног ЦСС-а и уклањања свих његових размака, увлачења, нових линија и коментара. Резултирајући компресовани ЦСС може се успешно користити без тих елемената. Такође, минирање чини ЦСС тежим за читање, обесхрабрујући крадљивце кода који краду ваше тешко обрађене таблице стилова.

Када минификујете свој код, добар је савет да задржите уљепшану (не-минификовану) верзију, јер ћете у будућности морати да је прочитате, у случају да треба да извршите измене у њој.

Топ Цоат

Топ Цоат није алат за оптимизацију вашег ЦСС-а. Уместо тога, отворена изворна ЦСС библиотека дизајнирана је с брзином на уму. То је потомак Адобе дизајнерског језика развијеног за Брацкетс, Едге Рефлов.

Топцоат укључује ПСД и многе друге артефакте дизајна, заједно с колекцијом једноставних и чистих СВГ икона и водича за стил. Такође нуди алате за упоређивање и фантастичну породицу фонтова Адобе Соурце Санс Про.

Цоде Беаутифиер

Цоде Беаутифиер заснован је на ЦСС Тиди-у, популарном опен-соурце ЦСС анализатору и оптимизатору. Омогућава вам да залепите ЦСС код за обраду у текстуалну област или га добијете из УРЛ адресе. Након што обави свој посао, приказује оптимизовани код, заједно са списком извршених промена. Можете копирати модификовани код у међуспремник или га сачувати у датотеку за каснију употребу.

Алат нуди значајну и свеобухватну листу опција која вам омогућава да прилагодите његове резултате у складу са вашим жељама. На пример, пружа пет опција за компресију, у распону од ниске компресије до највише компресије. Друге опције вам омогућавају да одредите сортирање, друге облике сажимања, уклањање непотребних предмета између осталог.

ЦСС Нано

Још један ЦСС алатка минифиер је ЦСС Нано. Овај се заснива на алату креираном за трансформисање стилова помоћу ЈаваСцрипт-а, који се назива ПостЦСС. Захваљујући архитектури додатака овог алата, творци ЦСС Нано-а били су у могућности да га направе од малих модула са ограниченим функцијама.

Подразумевано, ЦСС Нано ће преузети ЦСС датотеку коју му дате на обраду и урадити само сигурне оптимизације на њој. Али алат такође нуди опције за потискивање компресије до крајњих граница. Рад ЦСС-а ће и даље бити исти, али његов непотребни бели простор биће уклоњен. Такође, његови идентификатори ће се компримовати, а непотребне дефиниције биће у потпуности очишћене.

# ЦСС Алати за чишћење

Прљава маркуп

Прљава маркуп чини управо супротно од минифиерса: узима који год код на који га храните и чисти га, олакшавајући читање – све док је валидан ЦСС код. Резултирајући код је савршено улепшан.

Креатори Дирти Маркуп-а кажу да је скоро милијарду линија кода (узимајући у обзир не само ЦСС већ и ХТМЛ и ЈаваСцрипт) уљепшано користећи њихов алат.

Дуст-Ме Селектори

Дуст-Ме Селектори створен је за скенирање веб локације и проналажење неискоришћених ЦСС селектора како би их уклонили и смањили величину кода. Делује као додатак за Фирефок и Опера.

Дуст-Ме Селектори могу радити на појединачној страници или претраживати читав ситемап, показујући вам детаље свих таблица стилова и одабраних селектора, организујући их у коришћене и некоришћене. Верзија Фирефока може аутоматски скенирати странице док прегледате. Требали бисте узети у обзир само то да догађаји мутације могу покренути додатно скенирање ако се страница промени.

ЦСС Линт

ЦСС Линт нуди минималистички интерфејс: само велики тектбок у који залепите ЦСС код да бисте га „повезали“. Не говори шта ће поступак повезивања учинити с вашим кодом, али порука упозорења на врху странице говори вам да ће резултати повриједити ваше осјећаје – а такође ће вам помоћи да боље кодујете.

ЦСС Линт потврђује синтаксу вашег кода према скупу унапред дефинисаних правила. Радећи то, открива потенцијалне неефикасности и грешке. Уз мало прилагођавања, ЦСС Линт вам омогућава да одаберете скуп правила која желите да примените.

# ЦСС Алати за тестирање / валидацију

ЦСС тест стреса

ЦСС тест стреса функционише као боокмарклет (мали део ЈаваСцрипт кода) који примењује тестирање отпорности на ЦСС било које дате веб странице. Алат индексира све елементе у ЦСС коду и њихове класе. Тада започиње тест стреса уклањањем часова једне по једне и одређивањем времена колико је потребно да се креће по страници.

Ако се време уклањања селектора знатно смањује, тада тај селектор представља проблематично подручје које треба уклонити или исправити. Овај алат посебно ради са фантастичним ЦСС3 кодом који омогућава заобљене углове, непрозирност, текстуалне сјене и сјене оквира. Сви ови ефекти се могу урадити у ЦСС3 без употребе сечења слика, специјалног скрипта или додавања додатних елемената.

Али ЦСС3 може да проузрокује проблеме: једна особина може резултирати видљивим цртањем и проблемима померања страница. То је оно где вам ЦСС стрес тест може добро доћи.

ЦСС Валидатион Сервице

ЦСС Валидатион Сервице потврђује каскадне таблице стилова и (Кс) ХТМЛ са таблицама стилова. Алат провјерава својства дефинирана у свим верзијама ЦСС-а. Да бисте проверили страницу или ЦСС датотеку, само је потребно да унесете њен УРИ (јединствени идентификатор ресурса) и подесите неке основне опције, као што су профил (врста ЦСС-а за проверу), циљни уређај, упозорења која ће се показати и шта треба урадити са проширењима добављача. проблеми у вези (приказ грешака или упозорења).

Једном када сте спремни, притиснете дугме Провери и сачекате резултате. Завршни извештај ће вам показати опсежну листу грешака и упозорења, где ћете наћи неважеће особине, синтаксе грешке, непозната проширења добављача између многих других проблема које бисте требали да исправите у свом ЦСС-у како бисте га прилагодили. Извештај ће такође приказати сав важећи ЦСС код на вашој страници.

БацкстопЈС 3

БацкстопЈС 3 аутоматизује тестирање визуелне регресије респонзивних веб корисничких интерфејса. То ради свој посао упоређујући низ ДОМ екрана. Нуди узбудљиву листу функција: постоји извештавање у прегледачу, такође подешавање изгледа за штампање и екран и неке друге специфичне функције, попут филтрирања екрана и референци / тест / визуелни инспектор.

Користећи скрипте Пуппетеер и ЦхромиЈС, БацкстопЈС 3 може да симулира интеракцију корисника и може да прави тестове са Цхроме Хеадлесс-ом. Да би се елиминисали проблеми са приказивањем више платформи, такође има интегрисано приказивање докера. Алат се може покренути глобално или локално као самостални пакет, а игра се добро са ЦИ и контролом извора. БацкстопЈС 3 је врло једноставан за употребу: са само три наредбе могли бисте прећи прилично дуг пут.

Закључак

Надам се да вам горњи ЦСС алати помажу да оптимизујете ЦСС датотеке ваше веб апликације за боље перформансе. Ако сте заинтересовани за учење напредног ЦСС-а, погледајте ово сјајан курс.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map