فهم وحدات CSS (وكيفية استخدامها)

ربما تكون قد شاهدت مختلف وحدات CSS في رمز الويب من قبل ، ولكن فهم كيفية عملها يتيح لك استخدامها بشكل أكثر عمداً. في هذا المنشور ، ستتعلم وحدات CSS حقًا ، وكيف تؤثر على تخطيطاتك ، وكيف يساعدك استخدامها داخل Divi 5 بشكل أكثر استجابة.

يجلب Divi 5 الدعم الأصلي لوحدات CSS مباشرة إلى المنشئ. بفضل ميزة الوحدات المتقدمة الجديدة ، يمكنك استخدام ٪ و EM و REM و VW والمزيد بدون رمز مخصص.

ما هي وحدات CSS؟

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

على سبيل المثال ، عرض الكتابة: 100 لا يعني أي شيء للمتصفح. لكن أضف وحدة ، مثل 100px أو 100 ٪ ، والآن تعرف بالضبط ما تريد.

خذ هذا المثال بأربعة مربعات ، كل منها يستخدم قيمة CSS مختلفة:

• يستخدم العرض الأول: 100. غير صالح تقنيًا ، ولكن العديد من المتصفحات ستجعلها 100 ٪.
• يستخدم الثاني (100px) عرضًا ثابتًا.
• المقياس الثالث والرابع (100 ٪ و 60 ٪) بالنسبة للحاوية الأصل.

قد تتساءل لماذا المربع الأول ذو العرض: 100 لا يزال يظهر كامل العرض ، على الرغم من أنه غير صالح تقنيًا.

العرض: يتم تجاهل 100 من قبل المتصفح لأنه يفتقر إلى وحدة. ولكن في هذه الحالة ، لا يزال المربع يمتد عبر الحاوية ، ليس لأن CSS تم قبوله ، ولكن لأن العناصر على مستوى الكتلة مثل Div تمتد بشكل طبيعي على العرض الكامل لوالدهم افتراضيًا. إنها صدفة للسلوك الافتراضي ، وليس نتيجة لتفسير CSS غير الصالح على أنها 100 ٪.

وحدات CSS الشعبية

على الرغم من أن PX و ٪ يظهرون عادة ، إلا أن العديد من الآخرين مفيدون بمجرد معرفة وقت استخدامها:

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

لكن أولاً ، من المفيد معرفة أن جميع وحدات CSS تقع في نوعين رئيسيين: المطلق والنسبي.

الوحدات المطلقة والنسبية

يعد فهم الفرق ضروريًا إذا كنت تريد أن يعمل تخطيطك جيدًا عبر أحجام الشاشة المختلفة.

الوحدات المطلقة

الوحدات المطلقة لها قيم ثابتة. هذا يعني أنه عندما تقوم بتعيين شيء ما على 100 بكسل ، فإنه سيكون دائمًا 100 بكسل ، سواء كان المستخدم على الهاتف أو جهاز لوحي أو شاشة سطح مكتب ضخمة. لا تستجيب هذه الوحدات لحجم الشاشة أو التصميم المحيط ، مما يجعلها رائعة عندما تحتاج إلى تحكم دقيق.

غالبًا ما يتم استخدامها في الحدود أو أحجام الأيقونات أو ظلال الصندوق الثابتة ، وعادة ما تكون الدقة أكثر من المرونة.

ولكن هذه الدقة نفسها يمكن أن تسبب مشاكل. قد يتفوق التصميم الذي يبدو مثاليًا على شاشة كبيرة ، أو يتقلص بشكل محرج ، أو يكسر بالكامل على الأجهزة الأصغر. نظرًا لأن الوحدات المطلقة لا تتكيف ، يمكن أن تجعل تخطيطك يشعر بالصلابة ما لم يتم استخدامه بعناية.

الوحدات النسبية

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

تستجيب بعض الوحدات لحجم العنصر الأصل ، والبعض الآخر بحجم خط الجذر للصفحة ، ورد على بعضها حتى يتفاعل مع نافذة المتصفح نفسه. فيما يلي عدد قليل من المفاتيح:

• ٪ جداول مع الحاوية الأصل.
• يضبط EM بناءً على حجم خط العنصر الأصل.
• يتبع REM حجم خط الجذر للصفحة.
• يستجيب VW و VH لعرض وارتفاع منفذ عرض المتصفح.

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

دعونا نلقي نظرة على مثال سريع لمعرفة سبب أهمية هذه المرونة. لنفترض أنك تقوم ببناء قسم صور وتعيين عرضه على 1200 بكسل.

قد يبدو ذلك مثاليًا على شاشة كبيرة ، ولكن على جهاز لوحي مع عرض شاشة يبلغ 768 بكسل ، يمكن أن تفيض الصورة وتبدو غريبة. حاول الآن استخدام:

width: 100%;

هذا يخبر المتصفح لجعل الصورة تملأ عرض الحاوية. سواء كانت الشاشة واسعة أو ضيقة ، تتم ضبط الصورة تلقائيًا.

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

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

متى تستخدم وحدة CSS

الآن بعد أن فهمت الفرق بين الوحدات المطلقة والنسبية ، فإن الخطوة التالية هي معرفة متى تستخدم كل منها.

كقاعدة عامة ، اذهب مع الوحدات النسبية عندما يحتاج التصميم إلى التكيف مع أحجام الشاشة المختلفة. هذه مثالية لعرض القسم أو الطباعة أو التباعد بين العناصر أو تخطيطات الصفحة الكاملة. نظرًا لأنها تتوسع تلقائيًا ، فإنها تساعدك على الحفاظ على الاتساق دون إنشاء أنماط منفصلة لكل جهاز.

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

فيما يلي بعض الأمثلة لتوجيه اختياراتك:

• استخدم PX عندما تحتاج إلى تحكم دقيق ، مثل أحجام الأيقونات. لأنه لا يتكيف ، تجنب ذلك لعرض التصميم أو النص.
• استخدم ٪ عندما تريد أن تتوسع عناصر مع الحاوية.
• استخدم EM عندما تريد أن تتراوح التباعد مع حجم خط العنصر الأصل.
• استخدم REM (يشار إليها عادة باسم Root EM) إذا كنت تريد تحجيمًا ثابتًا عبر موقعك. نظرًا لأنه يعتمد على حجم خط الجذر ، فإنه يحافظ على التباعد والطباعة القابلة للتنبؤ.
• استخدم VW و VH للأقسام على الشاشة كاملة أو مناطق البطل أو التباعد الذي يستجيب مباشرة إلى منفذ العرض (العرض الكامل لشاشة جهازك).

لمزيد من التحكم المتقدم ، يمكنك أيضًا الجمع بين الوحدات باستخدام وظائف CSS. CALC () مفيدة عند خلط القيم مثل 1REM + 5VW للتباعد المستجيب مع الحد الأدنى من قاعدة. و Clamp () مثالية لوضع قيم السوائل التي تنمو أو تتقلص بين الحدود ، مما يجعلها بديلاً أنظف لاستعلامات الوسائط.

في النهاية ، يتضمن اختيار الوحدة الصحيحة التفكير في كيفية تصرف كل عنصر في سيناريوهات مختلفة واختيار الوحدة التي تنجز ذلك بشكل أفضل.

وحدات Divi المتقدمة للبناء بشكل مستجيب دون الترميز

لقد رأينا بالفعل كيف تمنحك وحدات CSS السيطرة على سلوك التصميم. يأخذ Divi 5 هذا السيطرة ويجعله بلا جهد للاستخدام مع الوحدات المتقدمة.

اشترك في قناتنا على YouTube

مع الدعم الأصلي لـ ٪ و EM و REM و VW و VH تم إنشاؤه مباشرة في المنشئ ، يمكنك تطبيق قيم CSS الحقيقية على الوحدات النمطية والأقسام والتباعد والطباعة ، دون الحاجة إلى فتح لوحة التعليمات البرمجية. في أي حقل عددي ، ما عليك سوى تحديد الوحدة المفضلة لديك من القائمة المنسدلة للوحدة المتقدمة ، وضبط القيمة ، وشاهد التغييرات المباشرة.

ولا يتوقف عند هذا الحد. يتيح لك DIVI أيضًا استخدام وظائف CSS المتقدمة مثل CALC () و CLAMP () في المنشئ البصري. هذا يعني أنه يمكنك إنشاء قيم السوائل ، وخلط الوحدات ، وتخطيطات ضبطها مع نفس المستوى من المطورين الدقيقين من CSS المكتظة يدويًا ، ولكن بصريًا.

هل تحتاج إلى حجم خط يتوافق بشكل سائل عبر أحجام شاشة مختلفة؟ استخدام المشبك (). هل تريد إزاحة التباعد بمزيج من القيم الثابتة والمرنة؟ حاول calc (). Divi يتعامل مع كل شيء ، على الفور وواضحة.

أنت لا تخمن أو تبديل بين التصميم والرمز بعد الآن. يمنحك Divi القوة المرئية والتعليقات الفورية للحصول على المنطق المستجيب بشكل صحيح مع التحكم الكامل في كيفية قيام العناصر الخاصة بك بتقليصها وتتصرف عبر الأجهزة.

تعلم كل شيء عن وحدات Divi 5 المتقدمة

تتزامن وحدات CSS تمامًا مع سير العمل المتقدم لـ Divi

لقد رأيت بالفعل كيف يجعل Divi استخدام وحدات CSS الفردية بسهولة داخل المنشئ. لكن القوة الحقيقية تظهر عندما تعمل هذه الوحدات معًا عبر موقعك بأكمله. هذا هو المكان الذي تتألق فيه ميزات مثل متغيرات التصميم ، ومجموعات مجموعة الخيارات ، ووظائف CSS المتقدمة مثل CALC () و CLAMP ().

لا يسمح لك Divi فقط بإدخال وحدات CSS في الحقول. يساعدك على دمجها في نظام التصميم بالكامل دون كتابة رمز. يبقى كل شيء متسقًا وقابل للتطوير وأسهل في الحفاظ عليه.

دعونا نرى كيف يساعدك Divi في استخدام وحدات CSS كجزء من سير عمل مرن يحركه المنطق:

1. إنشاء منطق تخطيط مع متغيرات التصميم

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

يمكنك إنشاء قيم قابلة لإعادة الاستخدام مثل –card-padding أو فجوة القسم ، باستخدام وحدات CSS حقيقية مثل 2REM ، 5VW ، أو حتى الصيغ مثل calc (2REM + 1VW). بمجرد تعيينها ، يمكن تطبيق هذه القيم عبر الوحدات النمطية والصفوف والأقسام للحفاظ على كل شيء ثابتًا.

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

2. استخدم المشبك () و calc () بصريًا

وظائف CSS مثل clamp () و calc () تساعدك على بناء تخطيطات سريعة الاستجابة. يتيح لك تحديد القيم المرنة التي تتكيف عبر أحجام الشاشة دون كتابة استعلامات الوسائط. لذا بدلاً من تعيين أحجام ثابتة لكل جهاز ، يمكنك كتابة منطق مثل المشبك (1Rem ، 2VW ، 2.5REM) للسماح للمتصفح بتوسيع نطاق الأشياء بسلاسة بين حدود المجموعة. أو استخدم Calc (100vh - 80px) لضبط قسم Hero بناءً على ارتفاع منفذ العرض الخاص بك.

عادة ، فإنها تتطلب كتابة CSS يدويًا. في Divi ، يمكنك إدخال هذه مباشرة داخل أي حقل أرقام.

ولأن وحدات CSS مدعومة داخل كلتا الوظيفتين ، يمكنك مزج القيم مثل REM و VW و PX للحصول على السلوك الذي تريده بالضبط. ترى النتائج تعيش كما تكتب ، مما يجعل من السهل التجربة والحصول على الاستجابة بشكل صحيح دون مغادرة المنشئ.

3. حفظ منطق الوحدة مع إعدادات مجموعة الخيارات

بمجرد إعداد تخطيطات باستخدام وحدات أو صيغ متقدمة ، لا يتعين عليك إعادة بنائها مرة أخرى. يتيح لك Divi حفظ منطق التصميم الخاص بك ، بما في ذلك أشياء مثل الحشو: المشبك (1Rem ، 3VW ، 2REM) ، كجماعة خيار مسبق.

هذا يعني في المرة التالية التي تحتاج فيها إلى نفس نمط التباعد أو التخطيط ، لا تطبق نفس الإعدادات ، ولكن فقط الإعداد المسبق المحفوظ.

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

في Divi ، فإن استخدام وحدة CSS لا يقتصر فقط على الحجم ؛ إنه عن السلوك. تصبح كل قيمة تقوم بتعيينها جزءًا من نظام مرئي يتكيف مع المقاييس ، وتبقى متسقة عبر تخطيطك. ولأن كل شيء مدمج في المنشئ ، فإنه يشبه الترميز وأكثر مثل التصميم بالمنطق.

يحول Divi وحدات CSS إلى قوة عظمى بصرية

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

هل أنت مستعد لتجربته؟ قم بتنزيل Divi 5 وابدأ في استخدام وحدات CSS الحقيقية في تصميماتك.