المغلق الاختزال مقابل Longhand - عند استخدام أي

الاختزال و Longhand - أحدهما موجز والآخر دقيق. جاء أحدهما إلى الوجود بدافع الحاجة إلى الإيجاز ، بينما يقف الآخر بقوة للحفاظ على الوضوح. وفي كلتا الحالتين ، لديهم أغراضهم ، إيجابيات وسلبيات ، إذا جاز التعبير.

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

ما هو الاختزال الممتلكات?

خاصية الاختزال هي خاصية تأخذ القيم لمجموعات أخرى من خصائص CSS. على سبيل المثال ، يمكننا تعيين قيمة لـ عرض الحدود, نمط الحدود و الحدود بين اللون باستخدام الحدود الملكية وحدها.

في الأساس,

 الحدود: 1px الصلبة الأزرق. 

بالضبط مثل:

 عرض الحدود: 1px ؛ نمط الحدود: الصلبة. لون الحدود: الأزرق.

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

كيف يعمل?

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

الآن ، ماذا لو افتقدنا خاصية أو اثنين في الإعلان؟ في المثال أعلاه ، دعنا نقول أننا تجاهلناها نمط الحدود.

 الحدود: 1px الأزرق. 

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

 الحدود: 1px لا شيء أزرق. 

الآن دعونا إسقاط 1PX إلى عن على عرض الحدود والحفاظ على اثنين آخرين:

 الحدود: الأزرق الصلبة.

سنكون قادرين على رؤية الحدود ، فقط بعرض أكثر سمكا وهذا بسبب عرض الحدود حصلت الملكية على القيمة الافتراضية متوسط.

 الحدود: متوسطة الصلبة الأزرق. 

هذا يخلصنا لذلك عندما يتم ترك قيمة العقار في بيان الاختزال, تأخذ هذه الخاصية قيمتها الافتراضية (حتى إذا كان عليها تجاوز أي قيمة سابقة مخصصة لنفسها).

إذا كان هناك عرض الحدود: 1px ؛ لعنصر في مكان ما من قبل الحدود: الأزرق الصلبة. لنفسه ، عرض الحدود سيكون متوسط (القيمة الافتراضية) ، لا 1PX.

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

ال الكل خاصية

هناك خاصية CSS واحدة مختصرة يمكنها ذلك اضبط القيمة لجميع خصائص CSS. قيم CSS-wide يرث, مبدئي و غير مصلد تنطبق على جميع الخصائص وبالتالي فهي القيم الوحيدة المقبولة من قبل الكل خاصية.

 div all: initial

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

⚠ تحذير

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

ملحوظة: خاصية CSS اللون يأخذ قيمة ست عشرية مع تدوين اختصار إذا كان الرقمان من قيمة ست عشرية في كل قناة لون هو نفسه. فمثلا, الخلفية: # 445599 ؛ هو نفسه كما الخلفية: # 459 ؛.

ما هي الممتلكات منذ فترة طويلة?

ال الخصائص الفردية التي يمكن تضمينها في خاصية الاختزال تسمى خصائص longhand. بعض الأمثلة الصورة الخلفية, ترك هامش, مدة الرسوم المتحركة, إلخ.

لماذا يجب علينا استخدامه?

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

خذ الخط خاصية الاختزال على سبيل المثال. دعنا نستخدمها في H4 العنصر (الذي يحتوي على نمط متصفح افتراضي الخط الوزن: جريئة)

 الخط: 20px "courier new" ؛ 

في الكود المختصر أعلاه ، لا توجد قيمة لـ الخط الوزن الملكية ، وبالتالي الخط الوزن: جريئة(النمط الافتراضي للمتصفح) سيتم تجاوزه بواسطة القيمة الافتراضية الخط الوزن: عادي تسبب في H4 عنصر لتفقد أسلوبه جريئة ، والتي قد لا يكون المقصود.

لذلك ، على سبيل المثال أعلاه بسيطة اثنين من الخصائص longhand, حجم الخط و خط العائلة هي الكمال.

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

بغض النظر عن الإنتاج ، أثناء مرحلة التطوير ، قد يجد بعض المطورين (خاصة المبتدئين) استخدام تدوين longhand أسهل بكثير من العمل من الاختصار لـ سهولة القراءة والوضوح.

استنتاج

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