Aldagai likidoak erabiliz eraikitako zure Shopify CSS murrizteko modurik errazena

Txikitu script-a Shopify Liquid CSS fitxategietarako

bat eraiki genuen ShopifyPlus benetako gai-fitxategian bere estiloetarako ezarpen ugari dituen bezero baten gunea. Estiloak erraz doitzeko oso abantailatsua den arren, esan nahi du ez dituzula kaskadako estilo-orri estatikorik (CSS) erraz dezakezun fitxategia mini (tamaina murriztu). Batzuetan, hau CSS deitzen zaio konpresio konprimitzea zure CSS.

Zer da CSS minifikazioa?

Estilo-orri batean idazten ari zarenean, behin definitzen duzu HTML elementu jakin baten estiloa, eta, ondoren, behin eta berriz erabiltzen duzu edozein web orrialdetan. Esate baterako, nire gunean nire letra-tipoak nola ikusten diren jakiteko zehaztasun batzuk konfiguratu nahi baditut, nire CSS honela antola dezaket:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Estilo-orri horren barruan, espazio, lerro-itzulera eta tabulazio bakoitzak espazioa hartzen du. Horiek guztiak kentzen baditut, estilo-orri horren tamaina % 40 baino gehiago murriztu dezaket CSS txikiagotuz gero! Emaitza hau da...

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS txikitzea ezinbestekoa da zure gunea bizkortu nahi baduzu eta sarean zure CSS fitxategia modu eraginkorrean konprimitzen lagunduko dizuten tresna ugari daude. Bilatu besterik ez konprimitu CSS tresna or txikitu CSS tresna online.

Imajinatu CSS fitxategi handi bat eta zenbat leku gorde daitekeen bere CSS txikituz... normalean %20koa da gutxienez eta aurrekontuaren %40tik gorakoa izan daiteke. Zure webgunean CSS orri txikiago bat aipatzen baduzu orrialde bakoitzean karga-denborak aurreztu ditzakezu, zure webgunearen sailkapena handitu, zure konpromisoa hobetu eta, azken finean, zure bihurketa-neurriak hobetu ditzake.

Alde txarra, noski, CSS fitxategi konprimitu batean lerro bakarra dagoela da, beraz, arazoak konpontzea edo eguneratzea oso zaila da.

Shopify CSS likidoa

Shopify gai baten barruan, erraz egunera ditzakezun ezarpenak aplika ditzakezu. Hori egitea gustatzen zaigu guneak probatzen eta optimizatzen ditugun heinean, gaia bisualki pertsonalizatu ahal izateko kodean sakondu beharrean. Beraz, gure Stylesheet Liquid (Shopify-ren script-lengoaia) eraikita dago eta aldagaiak gehitzen ditugu Estilo-orria eguneratzeko. Honela izan daiteke:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

Honek ondo funtzionatzen duen arren, ezin duzu kodea kopiatu eta lineako tresna bat erabili txikitzeko, haien gidoiak ez dituelako etiketa likidoak ulertzen. Izan ere, zure CSS erabat suntsituko duzu saiatzen bazara! Albiste bikaina da Liquid-ekin eraikita dagoenez... benetan script-ak ERABIL ditzakezu irteera murrizteko!

Shopify CSS minifikazioa likidoan

Shopify-k aldagaiak erraz idazteko eta irteera aldatzeko aukera ematen dizu. Kasu honetan, benetan gure CSS eduki-aldagai batean bil ditzakegu eta gero manipulatu fitxa, lerro-itzulera eta zuriune guztiak kentzeko! Kode hau aurkitu dut Shopify komunitatea ra Tim (tairli) eta bikain funtzionatu zuen!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Beraz, goiko nire adibiderako, nire theme.css.liquid orrialdeak honela izango luke:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Kodea exekutatzen dudanean, irteera CSS ondokoa da, ezin hobeto minduta:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}