CSS أنماط المخطط التفصيلي

إن مخططات CSS هي أكثر من مجرد حدود

الخاصية المخطط التفصيلي CSS خاصية مربكة. عندما تتعلم أولاً عن ذلك ، من الصعب أن نفهم كيف يكون مختلفًا عن بُعد عن خاصية الحدود. يشرح W3C أن لديه الاختلافات التالية:

الخطوط العريضة لا تأخذ مساحة

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

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

قد تكون الخطوط العريضة غير مستطيلة

قبل البدء في التفكير "رائع ، الآن يمكنني رسم الدوائر!" فكر مرة اخرى. هذا البيان له معنى مختلف عن رأيك. عندما تضع حدًا على عنصر ، يفسر المستعرض العنصر كما لو كان مربعًا مستطيلًا عملاقًا واحدًا. إذا تم تقسيم المربع على عدة أسطر ، فإن المتصفح يترك الحواف مفتوحة فقط لأن المربع ليس مغلقًا. يبدو الأمر كما لو كان المتصفح يشاهد الحدود بشاشة عريضة بشكل غير محدود - على نطاق واسع بما فيه الكفاية ليكون هذا الحد مستطيلًا واحدًا مستمرًا.

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

استخدامات الخاصية المخطط التفصيلي

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

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

يمكنك أيضًا استخدام الخاصية المخطط التفصيلي لإزالة الخط المنقط حول الارتباطات النشطة. توضح هذه المقالة من CSS-Tricks كيفية إزالة المخطط التفصيلي المنقط.