أسهل طريقة لتقليل Shopify CSS الذي تم إنشاؤه باستخدام المتغيرات السائلة

تصغير البرنامج النصي لـ Shopify Liquid CSS Files

بنينا أ Shopify Plus موقع لعميل لديه عدد من الإعدادات لأنماطه في ملف القالب الفعلي. في حين أن هذا مفيد حقًا لتعديل الأنماط بسهولة ، إلا أنه يعني أنه ليس لديك أوراق أنماط ثابتة متتالية (CSS) ملف يمكنك بسهولة قلل (تصغير الحجم). يشار إلى هذا أحيانًا باسم CSS ضغط و ضغط CSS الخاص بك.

ما هو CSS Minification؟

عندما تكتب إلى ورقة أنماط ، فإنك تحدد النمط لعنصر HTML معين مرة واحدة ، ثم تستخدمه مرارًا وتكرارًا على أي عدد من صفحات الويب. على سبيل المثال ، إذا كنت أرغب في إعداد بعض التفاصيل الخاصة بكيفية ظهور الخطوط الخاصة بي على موقعي ، فقد أقوم بتنظيم CSS الخاص بي على النحو التالي:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

ضمن ورقة الأنماط هذه ، تشغل كل مسافة ، وعودة سطر ، وعلامة تبويب مساحة. إذا قمت بإزالة كل هؤلاء ، فيمكنني تقليل حجم ورقة الأنماط هذه بنسبة تزيد عن 40٪ إذا تم تصغير CSS! والنتيجة هي ...

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

تصغير CSS يعد أمرًا ضروريًا إذا كنت ترغب في تسريع موقعك وهناك عدد من الأدوات عبر الإنترنت التي يمكن أن تساعدك في ضغط ملف CSS الخاص بك بكفاءة. فقط ابحث عن أداة ضغط CSS or تصغير أداة CSS على الانترنت.

تخيل ملف CSS كبير ومقدار المساحة التي يمكن توفيرها عن طريق تصغير CSS الخاص به ... عادةً ما يكون بحد أدنى 20٪ ويمكن أن يزيد عن 40٪ من ميزانيته. يمكن أن يؤدي وجود صفحة CSS أصغر يتم إحالتها في جميع أنحاء موقعك إلى توفير أوقات التحميل في كل صفحة ، ويمكن أن يؤدي إلى زيادة تصنيف موقعك ، وتحسين مشاركتك ، وتحسين مقاييس التحويل في النهاية.

الجانب السلبي ، بالطبع ، هو وجود سطر واحد في ملف CSS مضغوط ، لذا من الصعب للغاية استكشاف الأخطاء وإصلاحها أو التحديث.

Shopify سائل CSS

ضمن سمة Shopify ، يمكنك تطبيق الإعدادات التي يمكنك تحديثها بسهولة. نود القيام بذلك أثناء اختبار المواقع وتحسينها حتى نتمكن فقط من تخصيص السمة بصريًا بدلاً من البحث في الكود. لذلك ، تم تصميم ورقة الأنماط الخاصة بنا باستخدام Liquid (لغة البرمجة النصية الخاصة بـ Shopify) ونضيف متغيرات لتحديث ورقة الأنماط. قد يبدو كالتالي:

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

بينما يعمل هذا بشكل جيد ، لا يمكنك ببساطة نسخ الكود واستخدام أداة عبر الإنترنت لتقليلها لأن البرنامج النصي الخاص بهم لا يفهم العلامات السائلة. في الواقع ، سوف تدمر CSS تمامًا إذا حاولت! النبأ العظيم هو أنه لأنه مبني باستخدام Liquid… يمكنك في الواقع استخدام البرمجة النصية لتقليل الإخراج!

Shopify CSS Minification In Liquid

يتيح لك Shopify كتابة المتغيرات بسهولة وتعديل الإخراج. في هذه الحالة ، يمكننا بالفعل تغليف CSS الخاص بنا في متغير محتوى ثم معالجته لإزالة جميع علامات التبويب وعودة الأسطر والمسافات! لقد وجدت هذا الرمز في Shopify المجتمع تبدأ من تيم (تيرلي) وعملت ببراعة!

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

لذلك ، على سبيل المثال أعلاه ، ستبدو صفحة theme.css.l Liquid الخاصة بي كما يلي:

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

عندما أقوم بتشغيل الكود ، يكون ناتج CSS كما يلي ، مصغرًا تمامًا:

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