A CSS határozza meg a weboldal megjelenését. Ezzel az eszközzel közzététel előtt eltávolíthatod a felesleges szóközöket, vagy behúzásokkal és sortörésekkel olvashatóvá teheted a kódot.
CSS kicsinyítése a Kicsinyítés móddal
Az editorok fölött válaszd a következő módot:
Kicsinyítés.A Beillesztés gombbal illeszd be a CSS-t a bemeneti editorba, vagy az
Importálásgombbal tölts be egy.css-fájlt.Ha az Automatikus feldolgozás be van kapcsolva, az eredmény gépelés közben frissül. Ahol ez a beállítás látható, kikapcsolhatod, majd a szerkesztés után használhatod a Kicsinyítés gombot. Telefonon a Kicsinyítés gombbal frissítheted az eredményt.
A
Másolásgombbal másolhatod az eredményt, aLetöltésgombbal pedig CSS-fájlként mentheted.
Az alábbi CSS például pirosra színez egy címsort. Kicsinyítés után ezt kapod: h1{color:red}. A címsor továbbra is piros marad.
h1 {
color: red;
}Tömör CSS olvashatóvá tétele
Válaszd a Formázás módot, ha a kód tömörsége miatt nehezen olvasható. Az eredményben a deklarációk külön sorba kerülnek, a beállítástól függően két- vagy négyszóközös behúzással.
A formázás szóközöket ad hozzá, ezért az eredmény nagyobb lehet a bemenetnél. A korábbi minifikálás során törölt megjegyzéseket és eredeti formázást nem állítja vissza.
Felcserélés a kimenetet a bemeneti editorba helyezi, és vált a Kicsinyítés és Formázás mód között. Ha az Automatikus feldolgozás ki van kapcsolva, az új eredményhez nyomd meg újra a fő műveleti gombot.
Mit módosíthat a kicsinyítés?
| Beállítás | Hatás |
|---|---|
| Fontos megjegyzések megtartása | Megtartja a következő jelöléssel kezdődő megjegyzéseket: /*!. A szokásos megjegyzéseket eltávolítja. Csak akkor kapcsold ki, ha a jelölt megjegyzéseket is törölni szeretnéd. |
| Szabályok átrendezése és összevonása | Engedélyezi az összevonható szabályok egyesítését és átrendezését. Kikapcsolva ezek a szerkezeti módosítások elmaradnak. |
| Automatikus feldolgozás | Frissíti az eredményt a bemenet vagy a beállítások változásakor. Kikapcsolva törli a már nem aktuális eredményt. Telefonon ez a beállítás nem jelenik meg. |
| Kimenet behúzása | A Formázás módban behúzási szintenként két vagy négy szóközt választhatsz. |
| Sortördelés | Tördeli a hosszú sorokat az editorokban. Csak a kód megjelenítését változtatja meg, a letöltött fájlt nem. |
Az eredeti CSS lecserélése előtt próbáld ki az eredményt a webhelyeden, különösen engedélyezett átrendezés mellett. Őrizd meg az eredeti fájlt, hogy szükség esetén visszaállíthasd.
Importálás, másolás és letöltés
Az Importálás egyszerre egy CSS-fájlt fogad. A fájlt az oldalra is húzhatod. Ha a bemenetben már van kód, egy új fájl betöltése előtt az eszköz rákérdez a cserére. Megszakításkor a jelenlegi munka megmarad.
A Beillesztés gomb a vágólap tartalmára cseréli a bemenetet. A böngésző ehhez engedélyt kérhet. A bemeneti editorba kattintva a szokásos beillesztési billentyűparancsot is használhatod.
A Másolás és Letöltés gomb a kimeneti editor tartalmát használja. A letöltött CSS-fájl nevében minified vagy beautified szerepel. Mentsd az eredményt, mielőtt elhagyod az oldalt, mert újratöltéskor az editorok tartalma nem áll helyre.
Telefonon a műveleti sávban kéznél van a fő művelet és a Másolás. Nyisd meg a Több menüt a további parancsokhoz és a kiválasztott mód megjegyzés-, átrendezési vagy behúzási beállításaihoz. Az Automatikus feldolgozás ebben az elrendezésben nem érhető el.
A méretadatok értelmezése
A méretadatok 768 pixelnél szélesebb ablakban, az editorok alatt jelennek meg. Keskenyebb ablakban rejtve maradnak. A bemenet és a kimenet mérete bájtokban értendő, a megtakarítás e két értéket hasonlítja össze. A formázás növelheti a fájlméretet, bár a megtakarítás kijelzése nem mutat negatív százalékot.
A gzip-adat az ebben a böngészőben gzip-pel tömörített méretet becsüli. A webszerver másképp is tömöríthet, ezért ez nem minden látogató tényleges letöltési mérete.
Ha az eredmény nem az, amire számítottál
A Kicsinyítés módban a szintaktikai jelzés megadja az ellenőrizendő sort és pozíciót. Ellenőrizd a tulajdonság és az érték közötti kettőspontot, valamint a zárójelek párjait. Az eszköz részben hibás CSS-ből is készíthet eredményt, ezért a látható kimenet nem bizonyítja minden szabály helyességét.
A Formázás olvashatóvá alakítja a szöveget, és az elemző által észlelt szintaktikai problémákat is jelzi. Egyik mód sem ellenőrzi, hogy minden deklaráció a kívánt módon működik-e.
Ha szerkesztés után eltűnt az eredmény, használd újra a Kicsinyítés vagy Formázás gombot. Ahol az Automatikus feldolgozás látható, bekapcsolhatod az automatikus frissítéshez. Törlés megerősítés után kiüríti mindkét editort. Megszakításkor a tartalmuk megmarad.
A CSS feldolgozása a böngészőben történik. A használati statisztikák megmaradhatnak ezen az eszközön, de a stíluslap másolatát nem tárolják. A feldolgozási számláló a Kicsinyítés vagy Formázás gombbal indított műveleteket számolja. Az automatikus frissítéseket nem.