A CSS-fájlok formázása és optimalizálása ezeknek a kézzel választott eszközöknek köszönhetően már nem okoz fejfájást a webes fejlesztők számára!


Lépése óta a lépcsőzetes stíluslapokat (CSS) széles körben használják a weboldalak látványának körvonalazására. Tartalmazzák a színek meghatározását, az elrendezéseket, az animációt és a betűkészleteket. A HTML-től függetlenül a CSS lehetővé teszi a weboldal bemutatásának egyszerű adaptálását különféle típusú eszközökre, eltérő képernyőmérettel, anélkül, hogy az oldal tartalmát kissé meg kellene változtatni..

A CSS-t lépcsőzetes stíluslapnak nevezzük, mert a tulajdonságértékek a tartalomhierarchiába kerülnek. A gyerek elemek örökölhetik vagy felülbírálhatják a szülő elemek tulajdonságait. Ezeket a képességeket egy hierarchikus hatókörön alapuló modell biztosítja. Ennek a modellnek az a problémája, hogy ha nem megfelelően használják, akkor súlyosan befolyásolhatja a webhely teljesítményét.

És senki sem szereti a lassú weboldalt. Éppen ezért merültek fel a CSS optimalizáláshoz szükséges eszközök, valamint egy új fajta eszköz, amelyet kifejezetten arra terveztek, hogy a CSS fájlokat a lehető legtisztább és gyorsabbá tegyék..

A CSS optimalizálása sokféle módon elvégezhető: a CSS fájlok méretét csökkenthetik, megtisztíthatók, a valódiságra tesztelhetők vagy érvényesíthetők, megtisztíthatók, formázhatók, hogy megértsék a kódot, és általában jobb, úgy hangolva, hogy lehetővé tegye a jobb felhasználói élményt. E feladatok mindegyikéhez kiválasztottuk a legjobb eszközöket.

# CSS hangoló eszközök

CSS Minify

CSS Minify egy egyszerű eszköz a CSS tömörítéséhez: a szépített, olvasható, jól kialakított CSS felvétele és az összes távolság, behúzás, új vonal és megjegyzés eltávolítása. A kapott tömörített CSS ezen elemek nélkül is sikeresen használható. A tömörítés emellett megnehezíti a CSS olvashatóságát, és elriasztja a kód tolvajokat a szorgalmasan kidolgozott stíluslapok ellopásától..

A kód finomításakor tanácsos a szépített (nem aprított) verziót tartani, mert a jövőben képesnek kell lennie arra, hogy elolvassa, ha arra van szüksége, hogy módosítsa azt..

Felöltő

Felöltő nem egy eszköz a CSS optimalizálásához. Ehelyett egy nyílt forráskódú CSS könyvtár, amelyet a sebességet szem előtt tartva terveztek. A konzolokhoz kifejlesztett Adobe tervezési nyelv, az Edge Reflow leszármazottja.

A Topcoat tartalmaz PSD-t és sok más tervezési tárgyat, valamint az egyszerű és tiszta SVG ikonok és stílus útmutatókat. Emellett benchmarking eszközöket és a képzeletbeli Adobe Source Sans Pro betűtípuscsaládot is kínál.

Kód szépítő

Kód szépítő alapja a CSS Tidy, a népszerű nyílt forrású CSS elemző és optimalizáló. Ez lehetővé teszi a CSS-kód beillesztését a szövegterületre történő feldolgozáshoz, vagy az URL-ből való beolvasáshoz. A munka elvégzése után megmutatja az optimalizált kódot, valamint a végrehajtott változtatások listáját. A módosított kódot átmásolhatja a vágólapra, vagy mentheti egy fájlba későbbi felhasználás céljából.

Az eszköz jelentős és átfogó lehetőségek listáját kínálja, amely lehetővé teszi az eredmények beállítását az Ön preferenciáinak megfelelően. Például ötféle lehetőséget kínál a tömörítésre, kezdve az alacsony tömörítéstől a legnagyobb tömörítésig. Más lehetőségek lehetővé teszik a válogatás, a tömörítés más formáinak, a felesleges elemek eltávolításának megadását mások között.

CSS Nano

Egy másik CSS aprító eszköz CSS Nano. Ez egy olyan eszközön alapul, amelyet a stílusok átalakításához hoztak létre a JavaScript segítségével, a PostCSS nevű eszközzel. Ennek az eszköznek a plugin-architektúrájának köszönhetően a CSS Nano alkotói képesek voltak arra, hogy kis modulokból építsék ki, korlátozott funkciókkal.

Alapértelmezés szerint a CSS Nano feldolgozásra veszi a megadott CSS fájlt, és csak biztonságos optimalizálást végez rajta. De az eszköz lehetőséget kínál a tömörítés korlátozására is. A CSS működése továbbra is ugyanaz lesz, de felesleges szóközét eltávolítják. Ezenkívül az azonosítói tömörítésre kerülnek, és a felesleges definíciók teljesen kitisztulnak.

# CSS tisztító eszközök

Piszkos jelölés

Piszkos jelölés pontosan ellentétesen működik a kicsinyítőkkel: elveszi azt a kódot, amelyet betáplál, és megtisztítja, így könnyen olvasható – mindaddig, amíg érvényes CSS-kód van. A kapott kód tökéletesen szép.

A Dirty Markup alkotói azt mondják, hogy közel egymilliárd sornyi kódot (nemcsak a CSS-t, hanem a HTML-t és a JavaScript-t is figyelembe véve) szépítették ki eszközükkel.

Por-Me választók

Por-Me választók jött létre egy weboldal szkennelésére és a nem használt CSS választók megtalálására annak eltávolítása és a kód méretének csökkentése érdekében. Kiegészítőként működik a Firefox és az Opera számára.

A Dust-Me szelektorok az egyes oldalakon dolgozhatnak, vagy bejárhatják a teljes webhelytérképet, megjelenítve az összes megtalált stíluslap és szelektor részleteit, megszervezve azokat használt és nem használt kategóriákba. A Firefox verziója képes az oldalak automatikus szkennelésére böngészés közben. Csak azt kell figyelembe vennie, hogy ennek során a mutáció eseményei további vizsgálatokat indíthatnak, ha az oldal megváltozik.

CSS Lint

CSS Lint minimalista felületet kínál: csak egy nagy szövegdobozt, amelybe beillesztheti a CSS-kódot, hogy „beilleszkedjen”. Nem mondja el, hogy a kivilágítási folyamat hogyan fogja befolyásolni a kódot, de egy figyelmeztető üzenet az oldal tetején azt mondja, hogy az eredmények fájni fogják az érzéseidet, és segít a jobb kódolásban is..

A CSS Lint érvényesíti a kód szintaxisát egy előre meghatározott szabálykészlettel szemben. Ezzel felismeri a lehetséges hatékonyságokat és hibákat. Egy kis testreszabással a CSS Lint lehetőséget ad arra, hogy kiválassza a végrehajtandó szabályokat.

# CSS tesztelési / érvényesítési eszközök

CSS stressz teszt

CSS stressz teszt könyvjelzőként működik (egy kis darab JavaScript-kódot), amely stressztesztet alkalmaz az adott weboldal CSS-jére. Az eszköz indexeli a CSS kód összes elemét és osztályait. Ezután elindítja a stressztesztot az osztályok egyenkénti eltávolításával és az oldal görgetésének időbeosztásával.

Ha az oldal görgetéséhez szükséges idő jelentősen lecsökken egy választó eltávolításakor, akkor a választó olyan problematikus területet jelent, amelyet el kell távolítani vagy kijavítani. Ez az eszköz különösen a képzeletbeli CSS3 kóddal működik, amely lehetővé teszi a lekerekített sarkokat, az átlátszóságot, a szöveges árnyékokat és a dobozok árnyékát. Mindezek a hatások a CSS3-ban is megvalósíthatók képszeletelés, speciális szkriptelés vagy további elemek hozzáadása nélkül.

De a CSS3 problémákat okozhat: egyetlen tulajdonság látható újratervezéseket és oldalgörgetési problémákat eredményezhet. A CSS stressztesztje itt hasznos lehet.

CSS érvényesítési szolgáltatás

CSS érvényesítési szolgáltatás hitelesíti a lépcsőzetes stíluslapokat és az (X) HTML-et a stíluslapokkal. Az eszköz ellenőrzi a CSS összes verziójában meghatározott tulajdonságokat. Egy oldal vagy CSS fájl érvényesítéséhez be kell írnia az URI-t (egységes erőforrás-azonosítót), és be kell állítania néhány alapvető lehetőséget, például a profilt (az ellenőrizendő CSS típusát), a cél eszközt, a megjelenő figyelmeztetéseket és a gyártói kiterjesztésekkel kapcsolatos lépéseket. -kapcsolódó problémák (hibákat vagy figyelmeztetéseket mutatnak).

Miután elkészült, megérinti a Check gombot, és megvárja az eredményeket. A záró jelentés átfogó listát mutat a hibákról és a figyelmeztetésekről, ahol érvénytelen tulajdonságokat, szintaxis hibákat, ismeretlen szállítói kiterjesztéseket talál számos olyan probléma között, amelyeket ki kell javítania a CSS-ben annak kiigazítása érdekében. A jelentés megmutatja az összes érvényes CSS-kódot az oldalon.

BackstopJS 3

BackstopJS 3 automatizálja a reagáló webes felhasználói felületek vizuális regressziós tesztelését. A DOM képernyőképeinek összehasonlításával végzi a munkáját. Izgalmas funkciók listáját kínálja: a böngészőn belüli jelentések, az elrendezés beállítása a nyomtatáshoz és a képernyőhöz, valamint néhány egyéb jellemző, például a képernyő szűrése és a referencia / teszt / vizuális diffúziós ellenőr.

A Puppeteer és a ChromyJS parancsfájlok segítségével a BackstopJS 3 képes szimulálni a felhasználói interakciókat, és képes teszteket készíteni a Chrome Headless segítségével. A platformok közötti renderelési problémák kiküszöbölése érdekében integrált dokkoló-megjelenítést is tartalmaz. Az eszköz globálisan vagy helyileg is futhat önálló csomagként, és jól játszik a CI és a forrásvezérlés mellett. A BackstopJS 3 nagyon egyszerűen használható: mindössze három paranccsal elég hosszú utat tehet meg.

Következtetés

Remélem, hogy a fenti CSS-eszközök segítenek optimalizálni a webes alkalmazás CSS-fájljait a jobb teljesítmény érdekében. Ha érdekli a haladó CSS ​​tanulása, akkor nézd meg ezt ragyogó tanfolyam.

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