4 Työkalut tarkastukseen ja CSS n optimointiin
Kun sivustosi alkaa kasvaa, niin koodisi. Kun koodi laajenee, CSS voi yhtäkkiä olla vaikea ylläpitää, ja saatat päätyä kirjoittamaan yhden CSS-säännön toiseen. Tämä vaikeuttaa asioita, ja luultavasti päädytte runsaasti vikoja.
Jos tämä tapahtuu sinulle, sinun on aika tarkastaa sivustosi CSS. CSS: n tarkastaminen mahdollistaa sen, että tunnistat CSS: n osat, joita ei ole optimoitu. Voit myös vähentää tyylitaulukon tiedostomuotoa poistamalla koodirivit, jotka hidastavat sivustosi tehokkuutta.
Tässä on 5 hyvää työkalua, joiden avulla voit tarkistaa ja optimoida CSS.
Type-O-Matic
Type-O-Matic on Firebug-laajennus, jolla analysoidaan verkkosivustossa käytettyjä fontteja. Tämä laajennus antaa visuaalisen raportin taulukkoon, jossa on kirjasinominaisuudet, kuten kirjasinperhe, koko, paino, väri ja kuinka monta kertaa fonttia käytetään verkkosivulla. Raporttitaulukon avulla voit helposti optimoida kirjasinkäytön, poistaa tarpeettoman tai yhdistää liian samanlaisia tyylejä.
CSS Lint
CSS Lint on pölyämistä työkalu, joka analysoi CSS-syntaksi tiettyjen parametrien perusteella, jotka koskevat CSS: n suorituskykyä, saavutettavuutta ja yhteensopivuutta. Tulisi yllättynyt, odottaa paljon varoituksia CSS: ssä. Nämä virheet auttavat kuitenkin korjaamaan CSS-syntaksin ja tehostamaan sitä. Lisäksi olet myös parempi CSS-kirjailija.
CSS ColorGuard
CSS ColorGuard on suhteellisen uusi työkalu. Se on rakennettu solmumoduulina ja se toimii kaikissa alustoissa: Windows, OS X ja Linux. CSS ColorGuard on komentorivityökalu, joka ilmoittaa sinulle, jos käytät samanlaisia värejä tyylitaulukkosi; esimerkiksi. # f3f3f3 on melko lähellä # f4f4f4, joten haluat ehkä harkita näiden kahden yhdistämistä. CSS ColorGuard on konfiguroitavissa, voit määrittää samankaltaisuuden kynnyksen ja määrittää värit, joita työkalu ei halua jättää huomiotta.
CSS Dig
CSS Dig on Python-skripti ja toimii paikallisesti tietokoneessa. CSS Dig suorittaa perusteellisen tutkimuksen CSS: ssä. Se lukee ja yhdistää mm. kaikki taustaväritiedot ovat taustan osan alapuolella. Näin voit helposti tehdä raporttiin perustuvia päätöksiä, kun yrität standardoida CSS-syntaksi esim. saatat löytää värit eri tyylejä käyttäen seuraavalla väriä koskevalla ilmoituksella.
väri: #ccc; väri: #cccccc; väri: #CCC; väri: #CCCCCC;
Nämä väritiedotteet tekevät saman. Saatat myös mennä #ccc tai pääoman kanssa #CCC standardina. CSS Dig voi paljastaa tämän redundanssin myös muille CSS-ominaisuuksille, ja voit tehdä koodisi yhdenmukaisemmaksi.
