Форматирането и оптимизирането на 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.

Код разкрасител

Код разкрасител се базира на CSS Tidy, популярния CSS анализатор и оптимизатор с отворен код. Той ви позволява да поставите CSS кода за обработка в текстова област или да го получите от URL. След като свърши работата си, той показва оптимизирания код, заедно със списък на направените промени. Можете да копирате променения код в клипборда или да го запишете във файл за по-късна употреба.

Инструментът предлага значителен и изчерпателен списък от опции, който ви позволява да коригирате резултатите му, за да отговаряте на вашите предпочитания. Например, той предлага пет опции за компресия, вариращи от ниска компресия до най-висока компресия. Други опции ви позволяват да посочите сортиране, други форми на компресиране, премахване на ненужни елементи между другите.

CSS Nano

Друг инструмент за минифискатор CSS е CSS Nano. Този се основава на инструмент, създаден да трансформира стилове с JavaScript, наречен PostCSS. Благодарение на архитектурата на приставките на този инструмент, създателите на CSS Nano успяха да го построят от малки модули с ограничени функции.

По подразбиране CSS Nano ще вземе CSS файла, който му давате да обработва, и прави само безопасни оптимизации за него. Но инструментът също предлага опции за натискане на компресията до границите. Работата на CSS ще продължи да бъде същата, но ненужното й бяло пространство ще бъде премахнато. Също така, неговите идентификатори ще се компресират, а ненужните му дефиниции ще бъдат напълно изчистени.

# CSS инструменти за почистване

Мръсна маркировка

Мръсна маркировка прави точно обратното на minifiers: взема какъвто и код да го захранвате и го почиства, като го прави лесно за четене – доколкото е валиден CSS код. Полученият код е перфектно разкрасен.

Създателите на Dirty Markup казват, че близо милиард реда код (имайки предвид не само CSS, но и HTML и JavaScript) са били разкрасени с помощта на техния инструмент.

Прахозащитни селектори

Прахозащитни селектори е създаден за сканиране на уебсайт и намиране на неизползвани CSS селектори, за да ги премахнете и да намалите размера на кода си. Работи като добавка за Firefox и Opera.

Прахообразните селектори могат да работят на отделна страница или да обхождат цяла карта на сайта, като ви показват детайлите на всички намерени таблици стилове и селектори, организирайки ги в използвани и неизползвани. Версията на 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, проверете това блестящ курс.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me