L-Eħfef Mod Biex Tnaqqas is-CSS Shopify Tiegħek Li Jinbena Bl-Użu ta' Varjabbli Likwidi
Bnejna barra a ShopifyPlus sit għal klijent li għandu numru ta 'settings għall-istili tagħhom fil-fajl tat-tema attwali. Filwaqt li dan huwa tassew vantaġġuż biex taġġusta faċilment l-istili, dan ifisser li m'għandekx folji tal-istil statiku cascading (CSS) fajl li tista' faċilment timminifika (naqqas fid-daqs). Xi drabi dan jissejjaħ CSS kompressjoni u, kompressjoni is-CSS tiegħek.
X'inhu l-Minifikazzjoni CSS?
Meta tkun qed tikteb fuq stylesheet, tiddefinixxi l-istil għal element HTML partikolari darba, u mbagħad tużah aktar u aktar fuq kull numru ta 'paġni tal-web. Pereżempju, jekk ridt nwaqqaf xi dettalji dwar kif il-fonts tiegħi dehru fuq is-sit tiegħi, nista' norganizza s-CSS tiegħi kif ġej:
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
p {
font-size: 18px;
}
F'dik l-istil, kull spazju, ritorn tal-linja, u tab jieħdu spazju. Jekk inneħħi dawk kollha, nista' naqqas id-daqs ta' dik il-folja tal-istil b'aktar minn 40% jekk is-CSS jiġi mnaqqas! Ir-riżultat huwa dan...
h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}
minifikazzjoni CSS huwa indispensabbli jekk trid tħaffef is-sit tiegħek u hemm numru ta 'għodod onlajn li jistgħu jgħinuk tikkompressa l-fajl CSS tiegħek b'mod effiċjenti. Fittex biss għal tikkompressa għodda CSS or jimminimizza l-għodda CSS online.
Immaġina fajl CSS kbir u kemm spazju jista' jiġi ffrankat billi timminifizza s-CSS tiegħu... tipikament huwa minimu ta' 20% u jista' jkun 'il fuq minn 40% tal-baġit tagħhom. Li jkollok paġna CSS iżgħar referuta matul is-sit tiegħek jista' jiffranka ħinijiet ta' tagħbija fuq kull paġna waħda, jista' jżid il-klassifikazzjoni tas-sit tiegħek, itejjeb l-impenn tiegħek, u fl-aħħar itejjeb il-metriċi ta' konverżjoni tiegħek.
L-iżvantaġġ, ovvjament, huwa li hemm linja waħda f'fajl CSS kompressat u għalhekk huma oerhört diffiċli biex issolvi l-problemi jew taġġorna.
Shopify CSS Likwidu
F'tema ta' Shopify, tista' tapplika settings li tista' faċilment taġġorna. Aħna nħobbu nagħmlu dan hekk kif nittestjaw u ottimizzaw is-siti sabiex inkunu nistgħu nippersonalizzaw biss it-tema viżwalment aktar milli nħaffru fil-kodiċi. Għalhekk, il-Stylesheet tagħna hija mibnija bil-Liquid (il-lingwa tal-iskript ta' Shopify) u aħna nżidu varjabbli biex taġġorna l-Stylesheet. Jista' jidher bħal dan:
{%- 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 }}
}
Filwaqt li dan jaħdem tajjeb, ma tistax sempliċement tikkopja l-kodiċi u tuża għodda onlajn biex timminifiha minħabba li l-iskrittura tagħhom ma tifhimx it-tikketti likwidi. Fil-fatt, int se teqred totalment is-CSS tiegħek jekk tipprova! L-aħbar l-kbira hija li minħabba li hija mibnija bil-Likwid... tista' fil-fatt TUŻA scripting biex timminimizza l-output!
Shopify CSS Minifikazzjoni Fil-Likwidu
Shopify jippermettilek li tikteb varjabbli faċilment u timmodifika l-output. F'dan il-każ, nistgħu fil-fatt nagħlaq is-CSS tagħna f'varjabbli tal-kontenut u mbagħad jimmanipulawh biex ineħħu t-tabs, il-prospetti tal-linja u l-ispazji kollha! Sibt dan il-kodiċi fil-
Shopify Komunità minn Tim (tairli) u ħadmet b'mod brillanti!{%- 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 }}
Allura, għall-eżempju tiegħi hawn fuq, il-paġna tiegħi theme.css.liquid tidher bħal din:
{%- 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 }}
Meta nmexxi l-kodiċi, is-CSS tal-output huwa kif ġej, minifikat perfettament:
/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}