Teknobench

Formáidiú agus Miniú CSS

Maisigh CSS praslach le heangú glan nó minigh é le csso, agus féach ar an méid roimh agus tar éis. Ritheann sé i do bhrabhsálaí; ní uaslódáiltear aon rud.

Conas CSS a fhormáidiú nó a mhíniú

  1. Greamaigh do bhileog stíle, nó cliceáil Oscail comhad chun comhad .css a lódáil (suas le 10 MB).
  2. Roghnaigh an Eangú (2 spás, 4 spás nó táb) agus cé acu a theastaíonn Líne bhán idir rialacha uait.
  3. Cliceáil Formáidigh (maisigh) chun cód inléite a fháil, nó Minigh chun an leagan is lú a fháil.
  4. Le haghaidh miniúcháin, fág Cumaisc rialacha agus tú ag miniú ticeáilte don toradh is fearr, agus Coinnigh /*! tuairimí */ ticeáilte chun ceanntásca ceadúnais a chaomhnú.
  5. Cóipeáil nó íoslódáil an toradh. Taispeánann an líne stádais an méid roimh agus tar éis, i mbearta, agus an céatadán a sábháladh.

Má tá lúibín ar iarraidh, stopann an uirlis agus insíonn sí duit ar cén líne atá an { neamhdhúnta nó an } breise, in ionad aschur briste a tháirgeadh.

Maisigh: CSS inléite, comhsheasmhach

Úsáideann Formáidigh (maisigh) js-beautify, an formáiditheoir atá i go leor eagarthóirí cóid. Cuireann sé gach dearbhú ar a líne féin, eangaíonn sé ábhar gach riail agus na rialacha at mar @media agus @supports, scríobhann sé gach roghnóir de ghrúpa ar a líne féin, agus cuireann sé spás tar éis idirstadanna gach dearbhaithe. Coinnítear línte bána atá ann cheana (ceann amháin ar a mhéad ar a chéile), mar sin fanann codanna loighciúla do chomhaid le feiceáil. Ní athraíonn an formáiditheoir luachanna, ord rialacha ná brí roghnóirí riamh: ní athraíonn sé ach spás bán.

Tá sé seo úsáideach chun CSS miniaithe ó shuíomh gréasáin a léamh, chun bileog stíle a ghin uirlis a athbhreithniú, nó chun comhad a ghlanadh a d’eagraigh roinnt daoine le nósanna difriúla.

Minigh: CSS níos lú le csso

Úsáideann Minigh csso (CSS Optimizer), miniú struchtúrach. Taobh amuigh de spás bán agus tuairimí a bhaint, athscríobhann sé an bhileog stíle i bhfoirm choibhéiseach níos giorra:

  • giorraítear dathanna (éiríonn #ff0000 red, éiríonn #ffffff #fff);
  • simplítear aonaid agus nialais (éiríonn 0px 0, éiríonn 0.5em .5em);
  • baintear dearbhuithe dúblacha agus cumaisctear maoine gearrscríbhinne nuair is sábháilte é;
  • le Cumaisc rialacha agus tú ag miniú, grúpáiltear rialacha a bhfuil dearbhuithe comhionanna acu (éiríonn a{color:red} b{color:red} a,b{color:red}) agus scaoiltear dearbhuithe sháraithe.

Tá athstruchtúrú sábháilte do ghnáthbhileoga stíle, ach bogann sé dearbhuithe. Má bhraitheann do CSS ar ord cascáide an-sonrach, mar shampla hackanna brabhsálaí, díthiceáil an rogha: ansin ní chomhbhrúfaidh csso ach gach riail ina háit.

Baintear tuairimí, ach amháin tuairimí “tábhachtacha” a thosaíonn le /*!, a úsáidtear go coitianta do cheadúnais. Díthiceáil Coinnigh /*! tuairimí */ chun iad siúd a bhaint freisin.

Méid roimh agus tar éis

Cuireann an líne stádais méid an ionchuir agus an toraidh i gcomparáid i mbearta UTF-8. Bíonn cód maisithe níos mó ná an bunleagan de ghnáth; sábhálann cód miniaithe 20 go 50% de ghnáth ar CSS lámhscríofa. Cuimhnigh go gcomhbhrúann freastalaithe comhaid le gzip nó Brotli freisin, mar sin tá an sábháil aistrithe níos lú ná an figiúr amh, ach laghdaíonn miniú am parsála agus méid na gcomhad i dtaisce fós.

Ceisteanna coitianta

An seoltar mo CSS chuig freastalaí?

Ní sheoltar. Ritheann an dá leabharlann i do bhrabhsálaí. Ní fhágann do bhileog stíle do ríomhaire riamh, rud a chiallaíonn go n-oibríonn an uirlis as líne freisin nuair a bhíonn an leathanach lódáilte.

An féidir liom SCSS nó Less a fhormáidiú?

De ghnáth oibríonn an formáidiú le SCSS agus Less simplí, mar go bhfuil an chomhréir gar do CSS. Ní oibríonn miniú: ní thuigeann csso ach CSS caighdeánach, mar sin tiomsaigh do chód réamhphróiseálaí ar dtús.

Cén fáth a bhfuil mo CSS miniaithe difriúil ón méid a bhí súil agam leis?

D’fhéadfadh csso rialacha a athordú nó a chumasc nuair atá Cumaisc rialacha agus tú ag miniú ticeáilte. Cuireann an CSS a thagann as na stíleanna céanna i bhfeidhm. Más mian leat gach riail a choinneáil san áit ina bhfuil sí, díthiceáil an rogha.

An bhfíoraíonn an uirlis mo CSS?

Go páirteach amháin. Seiceálann sí go bhfuil lúibíní agus tuairimí cothromaithe agus tuairiscíonn sí líne na faidhbe. Coinnítear ainmneacha nó luachanna maoine neamhbhailí mar atá, ós rud é go ndéanann brabhsálaithe neamhaird de dhearbhuithe anaithnide.

Cad a tharlaíonn do réimíreanna díoltóra agus do mhaoine saincheaptha?

Coinnítear iad. Caomhnaítear réimíreanna díoltóra mar -webkit- agus maoine saincheaptha (--main-color) ag an bhformáidiú agus ag an miniú araon.