وصلت أسوأ CSS اضطررت إلى تصحيح أخطائه على الإطلاق كسطر واحد مكون من 40.000 حرف. قامت خطوة البناء بتسلسل وتصغير كل جزء في المشروع، وكانت القاعدة القريبة من النهاية تتغلب على اللون الذي لا ينبغي أن يكون له، ولم تكن هناك طريقة لرؤية السلسلة المتتالية لأنه لم تكن هناك فواصل أسطر لرؤيتها. لقد قمت بشحن ما يكفي من الواجهات الأمامية عبر سمات WordPress وتطبيقات React لمعرفة أن ورقة الأنماط التي لا يمكنك قراءتها هي ورقة أنماط لا يمكنك إصلاحها، لذلك قمت ببناء ملف منسق css على تولز.ديف يؤدي ذلك إلى تحويل جدار النص هذا مرة أخرى إلى CSS ذو مسافة بادئة وقابلة للمسح الضوئي في عجينة واحدة، وتصغيره مرة أخرى عندما تكون جاهزًا للشحن. هذا هو الدليل لها ولماذا "؛ تنسيق CSS"؛ يعني في الواقع.
ليرة تركية؛DR: يقوم منسق CSS بإعادة المسافة البادئة لورقة الأنماط بمسافة متسقة بحيث تكون قابلة للقراءة، ويقوم مُصغر CSS بشرائط التباعد للخلف بحيث يكون الملف صغيرًا. تولز منسق css يفعل كلا من إدخال واحد. يقوم بتوزيع CSS إلى قواعد ومحددات وإعلانات وقواعد وتعليقات، ثم يطبع تلك البنية مرة أخرى مع اختيارك لمسافتين أو أربع مسافات أو علامات تبويب، أو يطويها إلى أصغر مكافئ صالح. متداخلة
@mediaو@keyframesكتل،url()تظل القيم والسلاسل المقتبسة سليمة، ويعمل كل شيء من جانب العميل حتى لا يغادر CSS المتصفح أبدًا.
ما هو منسق CSS؟
يقرأ منسق CSS ورقة الأنماط ويعيد كتابتها بمسافة بيضاء متسقة ويمكن التنبؤ بها. القواعد نفسها لا تتغير. المحددات والخصائص والقيم متطابقة قبل وبعد، ويطبق المتصفح الملف المنسق تمامًا كما كان سيطبق الملف الأصلي. ما يتغير هو التخطيط: إعلان واحد لكل سطر، ومساحة واحدة بعد كل نقطتين، وكل كتلة ذات مسافة بادئة بمستوى أعمق من الأصل، ودعامة إغلاق على السطر الخاص بها. والنتيجة هي ملف يمكن للإنسان مسحه ضوئيًا.
تحت الغطاء، لا تقوم الأداة بالبحث والاستبدال على المسافات البيضاء، حيث تسوء عمليات التنسيق الساذجة. يقوم بتوزيع CSS إلى بنيته الحقيقية أولاً. ورقة الأنماط عبارة عن سلسلة من العقد: قواعد النمط التي تربط المحدد بكتلة من الإعلانات، مثل القواعد @media أو @importوالتعليقات والإعلانات نفسها. بمجرد أن يصبح CSS شجرة لتلك العقد، فإن طباعته مرة أخرى بأي مسافة بادئة تريدها تكون واضحة وآمنة بشكل حاسم. المحلل اللغوي هو ما يتيح للمنسق معرفة وجود فاصلة بالداخل :not(a, b) هو جزء من المحدد بينما فاصلة بين h1 و h2 يفصل بين محددين، وتلك الفاصلة المنقوطة داخل أ url() معرف URI للبيانات ليس نهاية الإعلان.
نفس التحليل يشغل العملية العكسية. نظرًا لأن الأداة تفهم البنية بالفعل، فيمكنها طباعة الشجرة بدون مسافة بادئة على الإطلاق، وهذا هو بالضبط ما هو التصغير. ولهذا السبب تغطي إحدى الأدوات كلتا الوظيفتين: التنسيق والتصغير هما نفس التحليل المطبوع بطريقتين مختلفتين.
ما الفرق بين تنسيق وتصغير CSS؟
هذه طرفي نقيض لنفس المحور، ومعرفة ما تريده توفر الارتباك. يضيف التنسيق، الذي يسمى أيضًا التجميل أو الطباعة الجميلة، مسافات بيضاء لصالح الأشخاص. يؤدي التصغير إلى إزالة المسافات البيضاء لصالح الأجهزة والشبكات. تقوم بتنسيق النسخة التي تقرأها وتحررها؛ تقوم بتصغير النسخة التي ترسلها إلى المتصفح.
التمييز مهم لأنه ينتمي إلى نقاط مختلفة في سير العمل الخاص بك. أثناء قيامك بكتابة CSS، أو عندما ترث ملفًا تحتاج إلى فهمه، فأنت تريد تنسيقه. عند النشر، تريد تصغيره بحيث يقوم المتصفح بتنزيل عدد أقل من البايتات والدهانات بشكل أسرع. يتم تصغير معظم خطوط أنابيب البناء تلقائيًا، ولكن الكثير من المواقف تقع خارج نطاق البناء: مقتطف تم لصقه من CodePen، وورقة أنماط مستخرجة من الصفحة التي تقوم بمراجعتها، وملف سمة يتم تحريره مباشرة في نظام إدارة المحتوى. بالنسبة لهؤلاء، يعد المنسق المستقل والمصغر هو المسار الأسرع.
وهنا الانقسام في لمحة.
| جانب | تنسيق (تجميل) | تصغير |
|---|---|---|
| جمهور | الناس يقرأون ويحررون | تنزيل المتصفحات |
| مسافة بيضاء | أضيفت لسهولة القراءة | تمت إزالته بالكامل |
| تعليقات | يتم الاحتفاظ بها بشكل افتراضي | تمت إزالته افتراضيًا |
| حجم الملف | أكبر | صغيرة قدر الإمكان |
| متى تستخدم | الكتابة وتصحيح الأخطاء والمراجعة | الشحن للإنتاج |
كيف أقوم بتنسيق CSS باستخدام هذه الأداة؟
التدفق قصير عمدا. الصق CSS الخاص بك في الإدخال، واختيار تجميل أو تصغير، وقراءة النتيجة. عند التجميل، اختر مسافتين أو أربع مسافات أو علامات تبويب لتتناسب مع إعدادات محرر مشروعك '؛s، وقرر ما إذا كنت ستحتفظ بالتعليقات أم لا. ال منسق css يعرض الإخراج بشارة الحجم حتى تتمكن من رؤية تغيير البايت، ويسرد أي إشعارات تحليل مثل الدعامة غير المتوازنة كتحذيرات بدلاً من الفشل بصمت.
تبدو الخطوات الأربع هكذا في الممارسة العملية. أولاً، قم بلصق ورقة الأنماط، سواء كانت مصغرة أو مكتوبة بخط اليد أو تم تصديرها من أداة. ثانيًا، انقر فوق Beautify لإعادة وضع مسافة بادئة لها أو Minify لتجريدها. ثالثًا، قم بمراجعة شارة الإخراج والحجم وإلقاء نظرة سريعة على أي تحذيرات. رابعًا، انسخ النتيجة إلى الحافظة الخاصة بك أو قم بتنزيلها كـ .css ملف جاهز للانسحاب إلى مشروعك. لا توجد خطوة تحميل ولا حساب، لأن كل شيء يحدث في متصفحك.
إذا كنت تعمل مع تنسيقات منظمة أخرى، فسيظهر نفس النمط عبر Toolz. ال منسق json يجمل ويصغر JSON، منسق html يفعل الشيء نفسه بالنسبة للترميز، و منسق sql يعالج الاستعلامات. التنسيق فكرة عامة، والحصول على نفس شكل الأداة لكل لغة يحافظ على اتساق ذاكرة العضلات، وهو موضوع مجموعة أدوات مطور الويب الدليل يتطور أكثر.
هل يغير التنسيق كيفية عمل الأنماط الخاصة بي؟
لا، وهذا هو الضمان الذي يجعل الأداة آمنة للتشغيل على CSS الإنتاج. تجميل وتصغير المسافات البيضاء التي تعمل باللمس فقط والتعليقات اختياريًا. لا يقومون أبدًا بإعادة ترتيب الإعلانات، ولا يعيدون تسمية أي شيء أبدًا، ولا يقومون أبدًا بدمج القواعد أو إسقاطها، ولا يعيدون كتابة القيم أبدًا. لم تتغير خصوصية محدداتك، ولم يتغير ترتيب المصدر الذي يحرك السلسلة، والنتيجة المحسوبة في المتصفح مكافئة بالبايت مقابل البايت.
تجدر الإشارة إلى هذا بوضوح لأن بعض مُحسِّنات CSS تقوم بأكثر من مجرد التصغير: فهي تدمج المحددات المكررة، وتسقط القواعد التي تحكم عليها غير المستخدمة، وتعيد ترتيب الخصائص. يمكن لهذه التحويلات تغيير السلوك بطرق خفية، خاصة عندما تكون سلسلة أو سلسلة !important متورط. هذا المنسق لا يفعل أيًا من ذلك عمدًا. إنها أداة مسافات بيضاء. إذا قمت بتجميل ملف، ولم تقم بتحرير أي شيء، وتصغيره مرة أخرى، فإن الملفين متطابقان وظيفيًا، مما يعني أنه يمكنك القيام برحلة ذهابًا وإيابًا بحرية دون خوف.
تم تحديد قواعد CSS التي تحدد ما يعتبر مسافات بيضاء وأين تكون غير مهمة في وحدة بناء جملة CSS المستوى 3 من W3C. يتبع المنسق نموذج الترميز النحوي '؛s، ولهذا السبب يتعامل مع المسافات البيضاء داخل رمز سلسلة أو url() يختلف عن المسافة البيضاء بين الإعلانات.
كيف يتعامل مع @media و@keyframes والقواعد الأخرى؟
قواعد AT هي المكان الذي تنهار فيه أدوات التنسيق غير الرسمية، لأن القاعدة يمكن أن تنتهي إما بفاصلة منقوطة أو تلتف مجموعة كاملة من القواعد الأخرى. @import "base.css"; هي عبارة تنتهي عند الفاصلة المنقوطة. @media (max-width: 600px) { ... } هي كتلة تحتوي على قواعد متداخلة خاصة بها، ويجب وضع مسافة بادئة لهذه القواعد المتداخلة بمستوى أعمق من @media الخط نفسه. لا يمكن لنهج البحث والاستبدال التمييز بين الاثنين؛ يمكن للمحلل.
لأن هذه الأداة تبني شجرة حقيقية، متداخلة @media تحافظ الكتلة على وضع مسافة بادئة لقواعدها الداخلية بشكل صحيح عند التجميل وتنهار بشكل صحيح عند التصغير. نفس الشيء ينطبق على @supports استعلامات الميزة و @keyframes الرسوم المتحركة، حيث تبدو كل خطوة مئوية 0% و 100% هي كتلة خاصة بها داخل الرسوم المتحركة. إعلانات الخط في @font-face وطبقات @layer يتم التعامل مع القواعد بنفس الطريقة. مهما كان عمق التداخل الذي تصل إليه ورقة الأنماط، فإن المسافة البادئة تتتبعها.
يحمي هذا الوعي الهيكلي أيضًا أجزاء القيمة التي تبدو مثل بناء الجملة ولكنها ليست كذلك. أ url() يمكن أن يحتوي على URI للبيانات معبأ بقاعدة 64 تتضمن الفواصل المنقوطة والنقطتين، و content يمكن أن تحتوي الخاصية على سلسلة مقتبسة بداخلها أقواس أو فواصل. يترك المنسق الجزء الداخلي من السلاسل المقتبسة و url() القيم كما هي مكتوبة تمامًا، لذلك لا يتم طي مسار الخط أو معرف URI لبيانات SVG أو جزء من نص المحتوى الذي تم إنشاؤه أو إعادة تباعده أو كسره أبدًا. إذا قمت بتضمين الصور بشكل متكرر كمعرفات URI للبيانات، فإن الصورة إلى القاعدة 64 تتزاوج الأداة بشكل طبيعي مع هذه الأداة.
ما مدى صغر حجم تصغير CSS الذي يجعل ملفي؟
يعتمد الأمر كليًا على مقدار المسافة البيضاء وعدد التعليقات التي يحتوي عليها المصدر، لكن التوفير حقيقي. عادةً ما تتقلص ورقة الأنماط المكتوبة بمسافات بادئة سخية وتعليقات التوثيق بنسبة عشرين إلى أربعين بالمائة بمجرد اختفاء هذه المسافة البيضاء. الملف الذي كان مضغوطًا إلى حد ما بالفعل سوف يتقلص بشكل أقل. تُظهر شارة الحجم الموجودة في الأداة عدد البايتات قبل وبعد لملفك، لذلك لا يتعين عليك التخمين أبدًا.
هذه البايتات مهمة لأن CSS يقوم بحظر العرض. لن يقوم المتصفح برسم صفحة حتى يقوم بتنزيل CSS وتحليله في رأس المستند، لذا فإن كل كيلو بايت من ورقة الأنماط هو كيلو بايت بين المستخدم ونظرته الأولى إلى الصفحة. يعد التصغير أحد أرخص مكاسب الأداء المتاحة: لا توجد تغييرات في التعليمات البرمجية، ولا يوجد خطر على السلوك، فقط عدد أقل من البايتات على السلك. علاوة على التصغير، يؤدي ضغط gzip أو Brotli على طبقة الخادم إلى تقليص الملف بشكل أكبر، ويتم ضغط CSS المصغر جيدًا لأن إزالة المسافة البادئة تترك الرموز المميزة ذات المعنى أكثر كثافة.
التصغير هو ابن عم قريب للعمل المخصص مصغر css يفعل، و دليل مصغر CSS يتعمق أكثر في جانب الضغط. السبب وراء وجود كليهما هو الراحة: في بعض الأحيان تهبط على المنسق لتنظيف الملف وترغب في تصغيره في نفس المكان، وأحيانًا تذهب مباشرة إلى المصغر. وفي كلتا الحالتين التحليل الأساسي هو نفسه.
هل يمكنني الاحتفاظ بتعليقاتي والتحكم في المسافة البادئة؟
نعم لكليهما، وهذان الخياران يغطيان الحالات التي يفتقدها المنسق ذو الحجم الواحد. يتم الاحتفاظ بالتعليقات بشكل افتراضي عند التجميل، لأنه أثناء قراءة وتحرير CSS، غالبًا ما تكون التعليقات هي الجزء الأكثر فائدة. عند التصغير، تتم إزالة التعليقات افتراضيًا لحفظ كل بايت، ولكن هناك تبديل للحفاظ عليها، وهو ما تريده عندما يحمل الملف رأس ترخيص أو إشعار حقوق الطبع والنشر الذي يجب أن يبقى في الحزمة المشحونة.
المسافة البادئة هي خيار لأن الفرق تختلف، والهدف من المنسق هو إنهاء الخلاف من خلال تطبيق قاعدة واحدة باستمرار. تعد المسافتان هي الإعداد الافتراضي الأكثر شيوعًا في مشاريع الواجهة الأمامية الحديثة، حيث تناسب أربع مسافات قواعد التعليمات البرمجية التي تستخدمها في مكان آخر، وتناسب علامات التبويب الفرق التي تفضلها لإمكانية الوصول أو التكوين الشخصي. اختر واحدة وكل كتلة في الإخراج تتبعها. الاتساق هو القيمة الكاملة: يستحق المنسق استخدامه على وجه التحديد لأنه يزيل القرارات اليدوية الصغيرة التي تنحرف ملفًا تلو الآخر عبر المشروع. الحالة الأوسع لتوحيد أدواتك بهذه الطريقة تمر عبر أدوات إنتاجية المطور مرشد.
ما هي المشاكل اليومية التي يحلها التنسيق بالفعل؟
السطر المكون من 40 ألف حرف الذي فتحت به هو الحالة الدرامية، لكن الأسطر الدنيوية تظهر كثيرًا. تقوم بنسخ قاعدة من أدوات تطوير المتصفح '؛ وتصل مع اختصار محسوب وتباعد غير متناسق لا يتطابق مع ملفك. لقد ورثت ورقة أنماط من مقاول لم يقم مطلقًا بتشغيل المنسق، لذا فإن أنماط الدعامة والمسافة البادئة تتغير كل بضع مئات من الأسطر. تقوم بلصق مقتطف من منشور مدونة أو أداة تصميم تستخدم علامات تبويب حيث يستخدم مشروعك مسافات. في كل واحدة منها، يعمل CSS، لكنه غير متطابق، والملف غير المتطابق هو ملف يبطئ كل تعديل مستقبلي ويشوش كل فرق.
يؤدي تشغيل مثل هذا الملف عبر المنسق إلى تطبيعه بالكامل مرة واحدة. تحصل كل كتلة على نفس المسافة البادئة، ويهبط كل إعلان على سطره الخاص، ويظهر الفرق الذي تلتزم به بعد ذلك فقط التغييرات التي أجريتها بالفعل بدلاً من عاصفة من ضوضاء المسافات البيضاء. هذه النقطة الأخيرة هي الفوز الهادئ بالإنتاجية: تنتج قاعدة التعليمات البرمجية المنسقة باستمرار اختلافات نظيفة، والفروق النظيفة تجعل مراجعة التعليمات البرمجية أسرع ويسهل اكتشاف الانحدارات. التنسيق ليس تجميليًا. إنه ما يبقي ورقة الأنماط مقروءة مع نموها، ولهذا السبب يقوم كل مشروع أمامي جاد في النهاية بتوحيد تخطيط واحد وفرضه. ال أدوات إنتاجية المطور يقدم الدليل الحجة الأوسع لإزالة هذا النوع من الاحتكاك اليدوي من سير العمل.
هل من الآمن تنسيق CSS الحساس أو الخاص؟
نعم، وهذا قرار تصميم متعمد وليس حاشية سفلية. تتم جميع عمليات التحليل والتنسيق في JavaScript داخل متصفحك. لا يتم تحميل أي ورقة أنماط على الخادم، ولا يتم تسجيل أي شيء، وتستمر الأداة في العمل مع إيقاف تشغيل اتصالك بمجرد تحميل الصفحة. يمكنك تنسيق CSS الذي يحتوي على أسماء الفئات الداخلية، أو الرموز المميزة لنظام التصميم التي لم يتم إصدارها، أو بنية ميزة لم يتم شحنها دون مغادرة أي منها لجهازك.
وهذا يهم أكثر مما قد يبدو، لأن ورقة الأنماط يمكن أن تسرب النية. غالبًا ما تكشف أسماء الفئات وأسماء الخصائص المخصصة عن ميزات التلغراف التي لم يتم نشرها بعد، وبنية المكون '؛s CSS عن كيفية إنشاء المنتج. المنسق من جانب الخادم، مهما كانت سمعته، هو طرف ثالث تقوم بتسليم تلك المعلومات إليه. أداة من جانب العميل تزيل السؤال بالكامل. السبب وراء معالجة بيانات المطور في المتصفح وليس على الخادم هو موضوع أدوات خصوصية البيانات عبر الإنترنت الدليل، وينطبق على كل أداة في أدوات الترميز المجموعة، وليس هذه فقط. عندما تكون الخصوصية مجانية، فلا يوجد سبب للتخلي عنها.
الأسئلة المتداولة
كيف أقوم بتنسيق CSS عبر الإنترنت؟
الصق CSS الخاص بك في منطقة الإدخال وانقر فوق Beautify. تقوم الأداة بتوزيع ورقة الأنماط وإعادة كتابتها بإعلان واحد لكل سطر ومسافة بادئة متسقة. كل شيء يعمل في متصفحك، لذلك لا يتم تحميل أي شيء.
ما الفرق بين تنسيق وتصغير CSS؟
يضيف التنسيق، والذي يسمى أيضًا التجميل، مسافة بادئة وفواصل أسطر بحيث يكون CSS قابلاً للقراءة للأشخاص، بينما يزيل التصغير جميع المسافات البيضاء والتعليقات غير الضرورية بحيث يكون الملف صغيرًا قدر الإمكان للمتصفحات. تقوم هذه الأداة بالأمرين معًا من نفس الإدخال.
هل يغير تنسيق CSS كيفية عمل الأنماط الخاصة بي؟
لا. يؤدي التجميل والتصغير فقط إلى تغيير المسافات البيضاء والتعليقات، وليس القواعد أو المحددات أو القيم أبدًا. يطبق المتصفح ورقة أنماط منسقة بنفس الطريقة التي يطبق بها النسخة الأصلية.
هل يتعامل مع @media و@keyframes بشكل صحيح؟
نعم. يتم تحليل القواعد المتداخلة مثل @media و@supports و@keyframes ككتل، لذلك يتم وضع مسافة بادئة لقواعدها الداخلية بمستوى أعمق عند التجميل والحفاظ عليها سليمة عند التصغير.
هل سيكسر قيم url() أو سلاسل المحتوى؟
لا. يترك المنسق الجزء الداخلي من السلاسل المقتبسة وقيم عنوان url () تمامًا كما هي مكتوبة، لذلك لا يتم طي عناوين URI للبيانات ومسارات الخطوط ونص المحتوى أو إعادة تباعدها أبدًا.
ما مدى صغر حجم التصغير الذي يجعل CSS الخاص بي؟
يعتمد ذلك على مقدار المسافة البيضاء وعدد التعليقات التي يحتوي عليها الملف، ولكن عادةً ما تتقلص ورقة الأنماط القابلة للقراءة بنسبة عشرين إلى أربعين بالمائة بمجرد إزالة المسافة البادئة والتعليقات. تُظهر شارة الحجم تغيير البايت الدقيق لملفك.
هل يمكنني الاحتفاظ بتعليقاتي عند التصغير؟
نعم. هناك تبديل للحفاظ على التعليقات. اتركه لأصغر مخرجات، أو قم بتشغيله عندما تحتاج إلى الاحتفاظ برأس ترخيص أو ملاحظات تأليف في الملف المصغر.
هل من الآمن تنسيق CSS الحساس هنا؟
نعم. تتم جميع عمليات التحليل والتنسيق في JavaScript داخل متصفحك. لا يتم إرسال ورقة أنماط إلى الخادم، ولا يتم تسجيل أي شيء، وتعمل الأداة مع تعطيل اتصالك.
ال منسق css مجاني، ويعمل بالكامل في متصفحك، ولا يحتاج إلى تسجيل. قم بتجميل ورقة الأنماط لقراءتها، وتصغيرها لشحنها، وعدم تصحيح سطر مكون من 40.000 حرف مرة أخرى. استكشفه وبقية أدوات الترميز على Toolz.dev.
