Lesson 21 / الدرس 21

Data attributes & inline SVG / سمات البيانات وSVG المضمّن

Two things every real page uses: data-* attributes for attaching your own information to an element, and inline <svg> for icons that stay sharp and take their colour from the text around them.

شيئان تستخدمهما كل صفحة حقيقية: سمات data-* لإرفاق معلوماتك الخاصة بعنصر، و<svg> المضمّن للأيقونات التي تبقى حادة وتأخذ لونها من النص حولها.

You met class and id last lesson: one groups elements, the other names a single one. Neither is meant to carry information. When you need the element itself to remember something — a price, a state, a row id — HTML gives you an attribute family for exactly that.

قابلت class وid في الدرس الماضي: الأولى تجمّع العناصر، والثانية تسمّي عنصرًا واحدًا. وليس المقصود بأيٍّ منهما أن تحمل معلومات. فحين تحتاج أن يتذكر العنصر نفسه شيئًا — سعرًا أو حالة أو معرّف صف — تعطيك HTML عائلة سمات لهذا بالضبط.

`data-*`: your own attributes

data-*: سماتك أنت

Any attribute whose name starts with data- is valid HTML and means nothing to the browser. That is the point: you invent the name, you decide the value, and nothing in the browser will ever argue with you or repurpose it. The name must be lowercase and, by convention, hyphenated.

أي سمة يبدأ اسمها بـ data- فهي HTML صالحة ولا تعني شيئًا للمتصفح. وهذا هو المقصود: أنت تخترع الاسم، وأنت تقرر القيمة، ولن يجادلك المتصفح فيها أو يعيد استخدامها أبدًا. ويجب أن يكون الاسم بحروف صغيرة، ويُفصل بشرطات عرفًا.

<li data-price="12" data-currency="JOD">Dates, 1kg</li>
<li data-price="3" data-currency="JOD">Mint tea</li>

Run it and inspect a list item with the tools from lesson 4 — the attributes are there on the element, invisible on the page. CSS can select on them ([data-currency="JOD"]) and JavaScript reads them through dataset, which is how a "add to cart" button knows which price it belongs to.

شغّله وافحص عنصر قائمة بالأدوات التي تعلمتها في الدرس 4 — فالسمات موجودة على العنصر، غير مرئية على الصفحة. وتستطيع CSS الاختيار بها ([data-currency="JOD"])، وتقرؤها JavaScript عبر dataset، وهكذا يعرف زر "أضف إلى السلة" أي سعر يخصّه.

سمة data-* مرئية لكل من يفتح مصدر الصفحة. ضع فيها معلومات العرض، ولا تضع فيها شيئًا خاصًا أبدًا — لا عناوين بريد، ولا ملاحظات داخلية، ولا أسعارًا لم تنشرها. وهي القاعدة نفسها التي مرّت في التعليقات في الدرس 11، وللسبب نفسه.

Inline `<svg>`: icons that are part of the page

<svg> المضمّن: أيقونات جزء من الصفحة

An SVG is a picture described by shapes and coordinates rather than pixels, so it stays sharp at any size. You can point an <img> at a .svg file exactly like any other image — but writing the <svg> straight into your HTML buys you something an <img> cannot: the shapes become real elements, so CSS can colour them.

الـ SVG صورة موصوفة بأشكال وإحداثيات بدل البكسلات، فتبقى حادة عند أي حجم. ويمكنك توجيه <img> إلى ملف .svg كأي صورة أخرى — لكن كتابة <svg> مباشرة داخل HTML تمنحك ما لا يمنحه <img>: تصبح الأشكال عناصر حقيقية، فتستطيع CSS تلوينها.

<p style="color: teal">
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none"
         stroke="currentColor" stroke-width="2" aria-hidden="true">
        <path d="M20 6 9 17l-5-5"/>
    </svg>
    Saved
</p>

The magic word is currentColor: the icon takes whatever colour the surrounding text has. Change the paragraph colour and the tick follows, with no second copy of the file. viewBox is the coordinate space the shapes are drawn in; width and height are how big it appears.

والكلمة السحرية هي currentColor: تأخذ الأيقونة اللون الذي يحمله النص من حولها. غيّر لون الفقرة وستتبعه علامة الصح، دون نسخة ثانية من الملف. أما viewBox فهي فضاء الإحداثيات الذي رُسمت فيه الأشكال، وwidth وheight هما حجمها الظاهر.

Because an inline SVG is markup, accessibility works the way it does everywhere else. An icon that only decorates text already labelled beside it takes aria-hidden="true", so a screen reader does not announce it twice. An icon that is the label — a bare close button, say — needs a <title> inside the SVG instead.

ولأن SVG المضمّن ترميز، تعمل إتاحة الوصول كما تعمل في كل مكان آخر. فالأيقونة التي تزيّن نصًا مكتوبًا بجوارها تأخذ aria-hidden="true"، حتى لا يعلنها قارئ الشاشة مرتين. أما الأيقونة التي هي التسمية — كزر إغلاق مجرد — فتحتاج <title> داخل الـ SVG بدلًا من ذلك.

يناسب SVG المضمّن حفنة من الأيقونات الصغيرة. أما إذا ظهرت الصورة نفسها في عشرين صفحة، فـ <img src="logo.svg"> أفضل — إذ يخزّن المتصفح ملفًا واحدًا بدل قراءة الأشكال نفسها داخل كل صفحة ينزّلها.

Need	Reach for
Attach your own value to an element	data-*
A small icon that follows the text colour	inline <svg> with currentColor
The same picture on many pages	<img src="…svg">
A decorative icon beside a label	aria-hidden="true"
An icon that is the only label	<title> inside the SVG

Which of the two to use, and when.

Try it live / جرّب بنفسك

<h1>Today's list</h1>

<ul>
    <li data-price="12" data-currency="JOD">Dates, 1kg</li>
    <li>Mint tea</li>
    <li>Olive oil</li>
</ul>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which of these is a valid custom attribute?

2. What does stroke="currentColor" do in an inline SVG?

ماذا تفعل stroke="currentColor" في SVG مضمّن؟

3. An icon sits beside the word "Delete". What should it carry?

Your task / مهمتك

Build a short shop list. Give each item a data-price and a data-currency, and put an inline <svg> tick beside one of them that uses currentColor and is hidden from screen readers.

ابنِ قائمة متجر قصيرة. أعطِ كل عنصر data-price وdata-currency، وضع بجوار أحدها علامة صح بـ <svg> مضمّن تستخدم currentColor ومخفية عن قارئات الشاشة.

Every item has a data-price كل عنصر له data-price
An inline <svg> uses currentColor <svg> مضمّن يستخدم currentColor
The decorative icon has aria-hidden="true" الأيقونة الزخرفية عليها aria-hidden="true"
No private information is stored in a data-* لا معلومات خاصة مخزّنة في data-*