La Plej Facila Maniero Por Minimigi Vian Shopify CSS Tion Estas Konstruita Uzante Likvajn Variablojn

Minify Skripto por Shopify Likvaj CSS-Dosieroj

Ni konstruis a ShopifyPlus retejo por kliento, kiu havas kelkajn agordojn por siaj stiloj en la fakta temodosiero. Kvankam tio estas vere avantaĝa por facile ĝustigi stilojn, tio signifas, ke vi ne havas statikan kaskadan stilfoliojn (CSS) dosiero kiun vi povas facile mini (malgrandigi en grandeco). Foje tio estas referita kiel CSS kunpremo kaj kunpremante via CSS.

Kio estas CSS-Minigo?

Kiam vi skribas al stilfolio, vi difinas la stilon por aparta HTML-elemento unufoje, kaj poste uzas ĝin ree kaj ree sur ajna nombro da retpaĝoj. Ekzemple, se mi volus agordi iujn specifaĵojn pri kiel miaj tiparoj aspektis en mia retejo, mi povus organizi mian CSS jene:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ene de tiu stilfolio, ĉiu spaco, linio-reveno kaj langeto okupas spacon. Se mi forigas ĉiujn tiujn, mi povas redukti la grandecon de tiu stilfolio je pli ol 40% se la CSS estas malgrandigita! La rezulto estas ĉi tio...

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

CSS-miniigo estas nepra se vi volas akceli vian retejon kaj ekzistas kelkaj iloj interrete, kiuj povas helpi vin kunpremi vian CSS-dosieron efike. Nur serĉu kunpremi CSS-ilon or minify CSS-ilo rete.

Imagu grandan CSS-dosieron kaj kiom da spaco povas esti ŝparita per malpliigo de ĝia CSS... ĝi estas kutime almenaŭ 20% kaj povas esti pli ol 40% de ilia buĝeto. Havi pli malgrandan CSS-paĝon referitan tra via retejo povas ŝpari ŝarĝtempojn sur ĉiu paĝo, povas pliigi la rangotabelon de via retejo, plibonigi vian engaĝiĝon kaj finfine plibonigi viajn konvertajn metrikojn.

La malavantaĝo, kompreneble, estas, ke estas ununura linio en kunpremita CSS-dosiero, do ili estas nekredeble malfacile solvi aŭ ĝisdatigi.

Shopify CSS Likvaĵo

Ene de Shopify-temo, vi povas apliki agordojn, kiujn vi povas facile ĝisdatigi. Ni ŝatas fari tion dum ni testas kaj optimumigas retejojn por ke ni povu nur personecigi la temon vide prefere ol fosi en la kodon. Do, nia Stilfolio estas konstruita per Liquid (la skriptlingvo de Shopify) kaj ni aldonas variablojn por ĝisdatigi la Stilfolion. Ĝi povas aspekti jene:

{%- 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 }}
}

Dum ĉi tio funkcias bone, vi ne povas simple kopii la kodon kaj uzi interretan ilon por malgrandigi ĝin ĉar ilia skripto ne komprenas la likvajn etikedojn. Fakte, vi tute detruos vian CSS se vi provos! La bonega novaĵo estas, ke ĉar ĝi estas konstruita kun Liquid... vi povas efektive UZI skripton por malgrandigi la eliron!

Shopify CSS-Minigo En Likva

Shopify ebligas vin facile skribi variablojn kaj modifi la eligon. En ĉi tiu kazo, ni povas efektive envolvi nian CSS en enhavvariablon kaj poste manipuli ĝin por forigi ĉiujn langetojn, liniajn revenojn kaj spacojn! Mi trovis ĉi tiun kodon en la Shopify Komunumo el Tim (tairli) kaj ĝi brile funkciis!

{%- 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  }}

Do, por mia supra ekzemplo, mia paĝo theme.css.liquid aspektus jene:

{%- 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  }}

Kiam mi rulas la kodon, la eligo CSS estas jena, perfekte minigita:

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