20 طرق بسيطة لتصميم عنصر HTML details

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

من المفيد أن يكون لدينا عنصر إفصاح بسيط في HTML لا يتطلب JavaScript، لكن التصميم الافتراضي لعنصر <details> قد يكون مخيبًا للآراء بالنسبة لبعض الأشخاص. لحسن الحظ، من السهل تغيير تصميم هذا العنصر.

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

Table of Contents

تقديم عنصر التفاصيل
ألوان الخلفية، الحواف والهوامش
- إضافة حد
- إضافة بعض ألوان الخلفية
تصميم العلامة
إنشاء علامة خاصة لعنصر الملخص
متعلقات إضافية
الخاتمة

تعريف عنصر التفاصيل

هذا هو الكود الأساسي لعنصر <details>:

<details>
  <summary>Click me!</summary>
  <p>Peekaboo! Here's some hidden content!</p>
</details>

يمكن وضع أي محتوى HTML داخل عنصر <details>. عنصر <summary> يوفر التلميح للمستخدم للنقر على العنصر لكشف المزيد من المحتوى، ويجب أن يكون الطفل الأول لعنصر <details>.

إليك مثال حيّ لهذا الكود:

Click me!

بيكابو! إليك بعض المحتوى المخفي!

دعونا نلقي نظرة على جميع الطرق التي يمكننا استخدام CSS لتحسين مظهر عنصر <details> الخاص بنا.

ألوان الخلفية، الحواف والتسعير

A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.

إضافة حدود

كما هو موضح في جدول المحتويات أعلاه، يمكن لحدود بسيطة أن تفعل الكثير لتعزيز وتحديد عنصر <details>، جنبًا إلى جنب مع بعض التسعير ونصف قطر حدود طفيف:

details {
  padding: 10px; 
  border: 5px solid #f7f7f7;
  border-radius: 3px;
}

هذا هو الكود البسيط الذي استخدمناه أعلاه لتنسيق قائمة محتوياتنا.

إضافة بعض ألوان الخلفية

دعونا نضيف لونًا خلفيًا لعنصر <details> بدلاً من الحد:

details {
  padding: 10px;
  background-color: #e4eaef;
  border-radius: 5px;
}

النتيجة موضحة في القلم أدناه.

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

يمكننا أيضًا إعطاء لون خلفية مختلف لعنصر <summary> لتمييزه عن بقية المحتوى، وتغيير لون النص الخاص به:

summary {
  background-color: #2196F3;
  color: white;
  padding: 10px;
}

لاحظ أن تغيير لون النص لعنصر <summary> يغير أيضًا لون السهم الإشاري. وذلك لأن السهم مرتبط بالعنصر <summary> تمامًا كما ترتبط الأسهم (مثل النقاط) بعناصر القائمة. سنرى فيما يلي كيف يمكن تصميمها بشكل منفصل.

تصميم الإشارة

تم تعيين عنصر <summary> إلى display من list-item. لذا يمكن تعديل السهم الافتراضي (▶) الذي يأتي معه تمامًا مثل الأسهم الافتراضية على عناصر قوائم HTML. يمكننا تغيير الحرف المستخدم وتغيير لونه بشكل مستقل.

تغيير لون الإشارة

لنضع الإشارة الافتراضية بلون مختلف. فقط من أجل المتعة، دعونا أيضًا زيادة حجم الخط للإشارة. يمكننا القيام بذلك باستخدام ::marker pseudo-element:

summary::marker {
  color: #e162bf;
  font-size: 1.2em;
}

النتيجة موضحة أدناه.

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

تغيير مسافة الإشارة

بشكل افتراضي، السهم الإشاري قريب جدًا من نص الملخص. تم تعيين list-style-position إلى inside. إذا قمنا بتغييره إلى outside، يمكننا إضافة مساحة بين نص الملخص والإشارة من خلال إضافة بعض الحشو اليساري. نحتاج أيضًا إلى إضافة بعض الهامش الأيسر بحيث لا ينتشر المثلث خارج الحاوي:

summary {
  list-style-position: outside;
  margin-left: 30px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
}

النتيجة موضحة أدناه.

I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.

تغيير شكل الإشارة

علامة التبويب في عنصر <summary> ليست بالضرورة مثلثة. يمكننا استبدالها بأي حرف نرغب فيه:

summary {
  list-style-type: '⬇ ';
}

لاحظ أننا استخدمنا '⬇ ' (مع مسافة بجانب السهم)، وهو بديل عن المسافة التي جربناها أعلاه.

لدينا الآن سهم لأسفل بدلاً من مثلث. لكن… لن يتغير ذلك السهم لأسفل عندما يكون عنصر <details> مفتوحًا. وذلك لأن عنصر <details> له حالتان – مغلق ومفتوح – وقد قمنا فقط بتعيين نمط العلامة للحالة مغلق. فلنقم أيضًا بتعيين علامة للحالة مفتوحة:

details[open] > summary {
  list-style-type: '⬆ ';
}

هذه المرة، استخدمنا سهم يشير لأعلى. وهذا يعطينا النتيجة الموضحة أدناه.

اللعنة! مرة أخرى، يخذلنا Safari، حيث لا يدعم list-style-type على عنصر <summary> أيضًا. لكن لا تيأس، فسننظر في حلول أكثر أناقة أدناه.

يمكننا تجربة جميع أنواع الأحرف الأخرى، مثل + و –، ✓ و Χ أو ✗، ⋁ و ⋀، وحتى المرح بأحرف أخرى مثل ★ أو الفواكه الملونة مثل 🍏 🍌 🍓 🍋 و 🍐، لكن تذكر أن هذه الأحرف قد لا تعمل على جميع الأنظمة، فكن حذرًا قليلاً، ومرة أخرى، list-style-type بالتأكيد لن يعمل في Safari.

إنشاء علامة خاصة لعنصر summary

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

إزالة العلامة المخصصة

كما هو الحال مع علامات العناصر المرتبطة، يمكننا إزالة العلامة تمامًا:

summary  {
  list-style: none;
}

/* يا للهول، سافاري مجددا */

summary::-webkit-details-marker {
  display: none;
}

المعيار list-style: none يعمل على جميع المتصفحات باستثناء… (هل يمكنك تخمين؟)… سافاري. على الأقل هناك خيار خاص -webkit- في هذه الحالة.

ملاحظة: طريقة أخرى لإزالة العلامة من عنصر <summary> هي إعطاء عنصر <summary> قيمة display غير list-item – مثل block أو flex. هذا يعمل في كل متصفح باستثناء… (هل يجب حتى أن أقولها؟)… سافاري.

الآن لا يوجد علامة لعنصرنا.

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

استخدام صورة الخلفية كعلامة

يمكننا وضع صورة على الخلفية، كما يلي:

summary {
  list-style: none;
  padding: 10px 10px 10px 40px;
  background: url(arrow.svg) no-repeat 14px 50%;
  background-size: 18px;
  font-weight: bold;
}

النتيجة موضحة أدناه.

عكس استخدام صورة الخلفية مباشرة على عنصر <summary> هو أننا لا يمكن تدويرها عندما يتم فتح عنصر <details>، لأن لا يمكن تحديد الرسوم المتحركة مباشرة على صور الخلفية في CSS. (يمكننا بالطبع استخدام صورة مختلفة للحالة المفتوحة، لكن لا يمكننا تحريكها، وهو أكثر متعة.) لذا إذا كنا سنستخدم صورة الخلفية، من الأفضل وضعها على عنصر يمكن تدويره و/أو تحريكه.

استخدام صورة الخلفية كعلامة مع ::after

دعونا نضع صورة الخلفية داخل عنصر ::after الوهمي:

summary {
  display: flex;
}

summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('arrow.svg');
  background-size: cover;
  margin-left: .75em;
  transition: 0.2s;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

إليك مثال حي لهذا الكود.

لقد استخدمنا display: flex على عنصر <summary> لجعل الموضع الأفقي للسهم سهلاً.

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

جعل عنصر الملخص يبدو وكأنه علامة

لقد كنا نضع عنصر <summary> بعرض كامل، لكن هذا ليس ضرورياً. يمكننا جعله يبدو أكثر مثل علامة، مع هذا التغيير البسيط:

summary {
  display: inline-flex;
}

مثال موضح أدناه.

تقييد عرض عنصر التفاصيل

في جميع الأمثلة التي شرحناها حتى الآن، تم تمديد عنصر <details> ليغطي العرض الكامل لحاويته، لأنه عنصر يأتي في سطر جديد. يمكننا إعطائه عرضًا مختلفًا، إذا لم نرغب بعرض واسع كهذا، مثل width: 50%;. أو يمكننا تحديده ليكون بنفس عرض المحتوى عن طريق تحديده كعنصر في السطر:

details {
  display: inline-block;
}

انقر على التبويب أدناه لكشف العرض الأضيق لعنصر <details>.

جرب تغيير display: inline-block إلى width: 50% في الكود أعلاه.

وضع أسهم العلامة في نهاية الملخص

الآن دعونا نفعل شيئًا مختلفًا قليلاً، وضع أسهم العلامة على الجانب الأيمن من عنصر <summary>. نظرًا لاستخدامنا لـ display: flex، يكون نقل السهم إلى اليمين بسيطًا كإضافة justify-content: space-between إلى عنصر <summary>:

summary {
  display: flex;
  justify-content: space-between;
}

استخدام ::after كعلامة بدون صورة خلفية

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

summary::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 10px solid #15171b;
  border-inline: 7px solid transparent;
  transition: 0.2s;
}

إليك مثال في الوقت الفعلي.

الآن لدينا سهم يدور بين الحالتين المغلقة والمفتوحة. لقد أضفنا أيضًا ظلًا منعكس لطيفًا لعنصر <details>.

طريقة أخرى لاستخدام ::after بدون صورة هي وضع أحرف Unicode داخل خاصية content:

summary::after {
  content: "\25BC";
  transition: 0.2s;
}

يضع هذا شكل مثلث (▼) كعلامة لنا، كما هو موضح في هذا تطبيق CodePen.

هناك الآلاف من رموز Unicode، وهي ممتعة للاستكشاف. كل منها يأتي برمز مثل U + 25BC أو U + 025BC. لاستخدام هذا الرمز داخل خاصية content، خذ الأحرف بعد ال+ وضعها داخل علامات content المقتطعة، مع \ في الأمام: content: "\25BC". إذا كان هناك صفر أو أكثر في البداية، يمكنك تجاهلها. (على سبيل المثال، U + 02248 يمكن أن يصبح "\02248" أو "\2248".)

الإضافات الطريفة

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

تأثير التحول على عنصر `<details>`

يمكننا تحديد تأثيرات تحول مختلفة على عنصر <details>. على سبيل المثال، قد نفعل شيئًا مثل هذا:

details {
  transition: 0.2s background linear;
}

details:hover {
  background: #dad3b1;
}

بينما نكون في ذلك، دعونا أيضًا ننتقل إلى لون نص <summary> في الحالة open:

details > summary {
  transition: color 1s;
}

details[open] > summary {
  color: #d9103e;
}

يظهر الناتج أدناه.

يمكننا أيضًا تحديد تغيير في الخلفية على عنصر <summary> بدلاً من ذلك.

تحريك فتح وإغلاق عنصر `<details>`

هاها خدعتكم! يبدو أنه ليس من الممكن تحريك فتح وإغلاق عنصر <details>. وفقا لـ MDN:

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

ومع ذلك، يمكننا أن نستمتع قليلاً بتحريك المحتويات في عنصر <details>. على سبيل المثال، يمكننا تعيين المحتويات للتلاشي عند الكشف:

details article {
  opacity: 0;
}

details[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

النتيجة مبينة أدناه.

خدعة أخرى قد تكون لتمرير المحتوى، مثل هذا:

details {
  overflow: hidden;
}

details[open] article {
  animation: animateUp .5s linear forwards;
}

@keyframes animateUp {
  0% {
    opacity: 0;
    transform: translatey(100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

النتيجة مبينة أدناه.

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

تغيير محتوى الملخص في الحالات المفتوحة والمغلقة

في العروض التوضيحية أعلاه، كان <select> دائمًا يحتوي على نفس النص، سواء كان عنصر <details> مفتوحًا أو مغلقًا. لكن يمكننا تغيير ذلك. أولاً، دعونا نترك النص “انقر هنا” الحالي في مكانه، ولكن أيضًا نضيف نصًا إضافيًا لكل حالة باستخدام العنصر الظاهري ::after:

summary::after {
  content: " to show hidden content";
}

details[open] summary::after {
  content: " to hide extra content";
}

هذا يعطينا النتيجة المبينة أدناه.

تغيير مؤشر الماوس للملخص

العقرب الافتراضي (أو مؤشر الماوس) لعنصر <details> غريب نوعًا ما. إنه سهم قياسي في معظم الأحوال، ومؤشر نصي (أو I-beam) عند التحديق في نص <summary>.

من أجل المتعة، دعونا نغير إلى مؤشر اليد (أو “المؤشر”):

summary {
  cursor: pointer;
}

هذا يعين مؤشر الماوس إلى يد عند التحديق في أي مكان على عنصر <summary>، كما هو موضح أدناه.

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

تغيير أساليب تركيز الوصولية

إذا كنا نتنقل عبر صفحة من خلال لوحة المفاتيح، يمكننا تبديل التركيز إلى عنصر <details> ثم فتحه بالضغط على عودة. خلال التركيز، يحتوي عنصر <summary> على حد محدد افتراضي. الصورة أدناه تظهر كيف يبدو ذلك في متصفحات مختلفة.

إنها تشبه بعضها البعض كثيرًا: في الغالب حد صلب باهت (أزرق أو أسود) وعرضه حوالي 3px.

هناك العديد من الأنماط التي يمكننا تعيينها لعنصر <details> المركز، لكن دعونا نفعل شيئًا بسيطًا هنا كدليل على المفهوم، ونغير الحد إلى خط منقط أحمر:

summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}

افتراضيًا، لا يظهر خط التركيز عند النقر على عنصر <summary>. ولكن إذا قمنا بتغيير نمط التركيز، يظهر هذا النمط يظهر حتى لمستخدمي الماوس (أي عند النقر على عنصر <details> باستخدام الفأرة). ففي الكود أعلاه، قمنا بتعيين outline إلى none وبدلاً من ذلك استخدمنا focus-visible لتعيين الأنماط، حيث يعني ذلك أن أنماط التركيز ستظهر فقط لمستخدمي المفاتيح (الذين يعتبرون ذلك مفيدًا فعليًا).

الصورة أدناه تظهر التصميم الجديد لدينا.

هنا مثال حي.

يمكننا الإمتاع بهذا الأمر، عن طريق استخدام التحريكات وألوان الخلفية عندما يكون عنصر <details> في تركيز. سأترك الأمر لك للتجربة أكثر.

استخدام عناصر تفاصيل متعددة مثل قائمة الأكورديون

هناك اقتراحات لتنسيق عناصر تفاصيل متعددة بطريقة تغلق واحدة عندما تفتح الأخرى. تقترح مواصفات HTML حتى علاقة سمة name مشتركة بين عناصر <details> متعددة لهذا الغرض.

لا يوجد حاليًا طريقة لفعل هذا فقط باستخدام HTML و CSS وحدهما، ولكن هناك بعض الأمثلة الذكية على القيام بذلك باستخدام JavaScript (مثل هنا, هنا, و هنا).

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

فيما يلي مثال بسيط:

details {
  background-color: #2196F3;
}

details[open] {
  background-color: #ce0e99;
}

تهيئة عنوان داخل الملخص

بعض المطورين، المهتمين ببنية HTML الخاصة بهم، يفضلون وضع عنوان عنصر داخل عنصر <summary>. سواء كان ذلك مفيدًا أم لا هو موضوع نقاش، ولكن التجسيد الافتراضي ليس لطيفًا، حيث يقع العنوان على السطر الذي يلي السهم. يمكن إصلاح ذلك عن طريق تعيين العنوان إلى display: inline أو display: inline-block:

summary h2 {
  display: inline;
}

يمكنك التحقق من عرض توضيحي لهذا على CodePen.

خاتمة

كما حاولنا أن نظهر أعلاه، هناك العديد من الطرق البسيطة لتصميم عنصر <details>. تحديد الحواف، الفراغات وألوان الخلفية سهل، وهذه بحد ذاتها تحسن المظهر بشكل كبير. بعض طرق تصميم العلامة الافتراضية سهلة، ولكن نظرًا لأن شركة فوررست الفورت () لديها العديد من المشاكل في تصميم العلامة، قد يكون من الأفضل تجنب هذا الخيار، لصالح إنشاء عنصر علامة مخصص تمامًا. (ومع ذلك، لا يحطم تصميم العلامة عنصر <details> في Safari.)

لقد كانت هناك محاولات لتحريك فتح وإغلاق عنصر <details> فقط باستخدام CSS، ولكنها تعتبر محاولات تستحق المحاولة في أفضل الأحوال، لذا لا يستحق المحاولة الذهاب في هذا الأسلوب. إذا كنت تريد بالفعل فتح وإغلاق متحرك، ستحتاج إلى JavaScript.

لمعرفة المزيد حول عنصر <details>، تحقق من المقالات التالية:

موضوع MDN حول عنصر التفاصيل
تحديث موقع whatwg.org حول تعريف عنصر التفاصيل

إذا توصلت إلى أي طرق أخرى رائعة لتصميم عنصر <details>، أخبرني على تويتر، وقد نضيفها هنا.

تعريف عنصر التفاصيل

ألوان الخلفية، الحواف والتسعير

إضافة حدود

إضافة بعض ألوان الخلفية

تصميم الإشارة

تغيير لون الإشارة

تغيير مسافة الإشارة

تغيير شكل الإشارة

إنشاء علامة خاصة لعنصر summary

إزالة العلامة المخصصة

استخدام صورة الخلفية كعلامة

استخدام صورة الخلفية كعلامة مع ::after

جعل عنصر الملخص يبدو وكأنه علامة

تقييد عرض عنصر التفاصيل

وضع أسهم العلامة في نهاية الملخص

استخدام ::after كعلامة بدون صورة خلفية

الإضافات الطريفة

تأثير التحول على عنصر <details>

تحريك فتح وإغلاق عنصر <details>

تغيير محتوى الملخص في الحالات المفتوحة والمغلقة

تغيير مؤشر الماوس للملخص

تغيير أساليب تركيز الوصولية

استخدام عناصر تفاصيل متعددة مثل قائمة الأكورديون

تهيئة عنوان داخل الملخص

خاتمة

تأثير التحول على عنصر `<details>`

تحريك فتح وإغلاق عنصر `<details>`