Teknobench
Kategoriji ▾
Lingwa: mt ▾

Formatter u minifier tas-CSS

Ibbewtifika CSS mħawwad b’indentazzjoni nadifa jew minimizzah bil-csso, u ara d-daqs qabel u wara. Jaħdem fil-brawżer tiegħek; xejn ma jittella’.

Kif tifformatja jew tminimizza CSS

  1. Waħħal l-istylesheet tiegħek, jew ikklikkja Iftaħ fajl biex tiftaħ fajl .css (sa 10 MB).
  2. Agħżel l-Indentazzjoni (2 spazji, 4 spazji jew tab) u jekk tridx Linja vojta bejn ir-regoli.
  3. Ikklikkja Ifformatja (ibbewtifika) biex tikseb kodiċi li jinqara, jew Minimizza biex tikseb l-iżgħar verżjoni.
  4. Għall-minimizzazzjoni, żomm Għaqqad ir-regoli waqt il-minimizzazzjoni immarkat għall-aħjar riżultat, u Żomm il-kummenti /*! … */ immarkat biex iżżomm l-intestaturi tal-liċenzja.
  5. Ikkopja jew niżżel ir-riżultat. Il-linja tal-istatus turi d-daqs qabel u wara, f’bytes, u l-perċentwal salvat.

Jekk tkun nieqsa parentesi, l-għodda tieqaf u tgħidlek f’liema linja hemm il-{ mhux magħluq jew il-} żejjed, minflok ma tipproduċi output miksur.

Ibbewtifika: CSS li jinqara u konsistenti

Ifformatja (ibbewtifika) juża js-beautify, il-formatter li nsibu f’ħafna editors tal-kodiċi. Iqiegħed kull dikjarazzjoni fuq linja tagħha, jindenta l-kontenut ta’ kull regola u ta’ at-rules bħal @media u @supports, jikteb kull selettur ta’ grupp fuq linja tiegħu, u jżid spazju wara d-dwieta (:) ta’ kull dikjarazzjoni. Il-linji vojta eżistenti jinżammu (massimu waħda wara l-oħra), biex it-taqsimiet loġiċi tal-fajl tiegħek jibqgħu jidhru. Il-formatter qatt ma jbiddel il-valuri, l-ordni tar-regoli jew it-tifsira tas-selettur: ibiddel l-ispazji biss.

Dan huwa utli biex taqra CSS minimizzat minn sit web, biex tirrevedi stylesheet iġġenerat minn għodda, jew biex tnaddaf fajl editjat minn diversi persuni b’drawwiet differenti.

Minimizza: CSS iżgħar bil-csso

Minimizza juża csso (CSS Optimizer), minifier strutturali. Lil hinn milli jneħħi l-ispazji u l-kummenti, jerġa’ jikteb l-istylesheet f’forma ekwivalenti u iqsar:

  • il-kuluri jitqassru (#ff0000 isir red, #ffffff isir #fff);
  • l-unitajiet u ż-żeru jiġu ssimplifikati (0px isir 0, 0.5em isir .5em);
  • id-dikjarazzjonijiet duplikati jitneħħew u l-proprjetajiet shorthand jingħaqdu meta jkun sigur;
  • b’Għaqqad ir-regoli waqt il-minimizzazzjoni, ir-regoli b’dikjarazzjonijiet identiċi jiġu miġbura (a{color:red} b{color:red} isir a,b{color:red}) u d-dikjarazzjonijiet sostitwiti jitneħħew.

Ir-ristrutturar huwa sigur għal stylesheets normali, imma jċaqlaq id-dikjarazzjonijiet. Jekk is-CSS tiegħek jiddependi minn ordni speċifika ħafna tal-cascade, pereżempju hacks tal-brawżer, neħħi l-marka mill-għażla: il-csso mbagħad jikkompressa kull regola fil-post tagħha biss.

Il-kummenti jitneħħew, ħlief kummenti “importanti” li jibdew b’/*!, li komunement jintużaw għal-liċenzji. Neħħi l-marka minn Żomm il-kummenti /*! … */ biex tneħħihom ukoll.

Id-daqs qabel u wara

Il-linja tal-istatus tqabbel id-daqs tal-input u tar-riżultat f’bytes UTF-8. Il-kodiċi bbewtifikat normalment huwa akbar mill-oriġinal; il-kodiċi minimizzat tipikament jiffranka 20 sa 50% fuq CSS miktub bl-idejn. Ftakar li s-servers jikkompressaw ukoll il-fajls bil-gzip jew bil-Brotli, għalhekk l-iffrankar fit-trasferiment huwa iżgħar mill-figura mhux ipproċessata, imma l-minimizzazzjoni xorta tnaqqas il-ħin tal-parsing u d-daqs tal-fajls fil-cache.

Mistoqsijiet frekwenti

Is-CSS tiegħi jintbagħat lil server?

Le. Iż-żewġ librerijiet jaħdmu fil-brawżer tiegħek. L-istylesheet tiegħek qatt ma jitlaq mill-kompjuter tiegħek, li jfisser ukoll li l-għodda taħdem offline malli titella’ l-paġna.

Nista’ nifformatja SCSS jew Less?

L-iffurmattjar ġeneralment jaħdem għal SCSS u Less sempliċi, għax is-sintassi hija qrib is-CSS. Il-minimizzazzjoni le: il-csso jifhem biss CSS standard, għalhekk ikkompila l-kodiċi tal-preproċessur l-ewwel.

Għaliex is-CSS minimizzat tiegħi huwa differenti minn dak li stennejt?

Il-csso jista’ jerġa’ jordna jew jgħaqqad ir-regoli meta Għaqqad ir-regoli waqt il-minimizzazzjoni tkun immarkata. Is-CSS li jirriżulta japplika l-istess stili. Jekk trid kull regola żżomm postha, neħħi l-marka mill-għażla.

L-għodda tivvalida s-CSS tiegħi?

Parzjalment biss. Tiċċekkja li l-parentesi u l-kummenti huma bbilanċjati u tirrapporta l-linja tal-problema. Ismijiet jew valuri invalidi tal-proprjetajiet jinżammu kif inhuma, għax il-brawżers jinjoraw dikjarazzjonijiet mhux magħrufa.

X’jiġri mill-prefissi tal-vendur u mill-proprjetajiet personalizzati?

Jinżammu. Il-prefissi tal-vendur bħal -webkit- u l-proprjetajiet personalizzati (--main-color) jiġu ppreservati kemm mill-iffurmattjar kif ukoll mill-minimizzazzjoni.

Għodod relatati