Emmet: السمات المخصصة `[attr=val]` والترقيم `$`

بعد الدروس السبعة الأولى، يمكنك بالفعل كتابة HTML بتداخل عشوائي، سمات عشوائية، وتكرار عشوائي باستخدام Emmet. لكن سيناريوهين "بأسلوب المصنع" لا يزالان غير محلولين—"10 حقول إدخال لكل منها اسم مختلف" و "100 صف جدول بأرقام تصاعدية تلقائية." يتم حل هذين السيناريوهين بواسطة السمات المخصصة [attr=val] و الترقيم $ على التوالي—قطعتي اللغز الأخيرتين لقدرات التوليد الدفعي لـ Emmet.

1. ما ستتعلمه

• السمات المخصصة [attr=val]: إضافة أي سمة بما في ذلك HTML5 data-* و aria-*
• السمات المختصرة: اختصار [attr] (بدون قيمة)، تسلسل سمات متعددة
• الترقيم $: إدراج أرقام تسلسلية تصاعدية تلقائيًا في قيم class و id و attribute
• الحشو الصفري متعدد الأرقام $$$: توليد تلقائي لـ 001، 002، 003
• اتجاه الترقيم وقيمة البداية: @- للعكسي، @N لبدء العد من N
• تطبيق مدمج: جدول + سمات + ترقيم + وسوم ضمنية

2. قصة حقيقية لمطور واجهة أمامية

(1) نقطة الألم: حقول نموذج كثيرة جدًا + صفوف جدول كثيرة جدًا

تلقت أليس مهمة بناء نموذج تسجيل دخول + تسجيل مدمج مع 5 حقول إدخال (اسم المستخدم، البريد الإلكتروني، كلمة المرور، تأكيد كلمة المرور، تذكرني) وزر إرسال واحد. بعد كتابة نموذج واحد، أدركت أن جميع أسماء inputs تبدو متطابقة تقريبًا—name="user"، name="email"، name="pwd"، وهكذا—كل واحد يجب كتابته يدويًا.

الأسوأ كان جدول "شروط الخدمة" في صفحة التسجيل: 100 صف من الشروط، كل صف tr، مع العمود 1 رقم تسلسلي (1–100) والعمود 2 نص الشرط. حاولت أليس الكتابة اليدوية: tr>td{1}+td{Term 1}، tr>td{2}+td{Term 2}، ... عند الصف 30 استسلمت. مجرد كتابة 30 سطرًا متشابهًا "tr + 2 td" استغرق 30 دقيقة.

أخيرًا، بعد كتابة جميع الحقول، احتاجت أليس أيضًا إلى إضافة سمات HTML5 مثل aria-label="Username input" و data-validate="email" إلى inputs—كل سمة تتطلب التحقق من المواصفات، كتابة علامات المساواة، وإضافة علامات الاقتباس. 30 سطر input تضخمت إلى 90 سطرًا من HTML.

(2) كيف يحلها [attr=val] و $

يوفر Emmet آليتين متكاملتين لحل مشكلات أليس:

السمات المخصصة [attr=val]: اكتب أي سمة داخل أقواس مربعة، مقدمة مباشرة مثل HTML—يمكن لأليس كتابة كل input كـ input[name=user type=text] في سطر واحد، وسمات aria و data-* يمكن أن توضع بالمثل داخل الأقواس.

الترقيم $: يجعل قيم class و id و attribute للعناصر المتكررة تصاعدية تلقائيًا. أرقام الـ 100 شرط التسلسلية يمكن توليدها بـ td.item$@100*100 في سطر واحد (بدءًا من 100، تنازليًا)، ويمكن ملء نص الشرط بـ {text} (مغطى في الدرس 09).

أعادت أليس كتابة النموذج بالكامل في سطر Emmet واحد:

form>(input[name=user type=text placeholder="Username"])+(input[type=email name=email])+(input[type=password name=pwd])+(input[type=password name=pwd-confirm])+(label>input[type=checkbox name=remember]+{Remember me})+(button[type=submit]{Login})

وجدول الـ 100 شرط:

(table>(tr>td{item $}*3)*5)

بعد التحقق، صاحت أليس: "5 حقول إدخال انتقلت من 25 سطرًا مكتوبًا يدويًا إلى سطر واحد، وجدول الـ 100 شرط انتقل من 350 سطرًا إلى سطر واحد. زيادة كفاءة Emmet في سيناريوهات النماذج والجداول هي 30 ضعفًا أو أكثر."

(3) الفوائد

[attr=val] و $ هما العاملان الأساسيان لـ Emmet لمعالجة سيناريوهات "التكرار + بأسلوب المصنع". الأول يتيح لك تغ��ية جميع سمات HTML5 في سطر اختصار واحد، بينما الثاني يجعل الأرقام التسل��لية تعمل تلقائيًا. بعد هذا الدرس، تستطيع أليس كتابة نموذج بـ 5 حقول في 12 ثانية وجدول بـ 100 صف في 10 ثوانٍ. يمثل هذا الدرس أيضًا ختام المرحلة 2—الدروس التسعة المتبقية ستغطي اختصارات CSS وإجراءات المحرر.

3. السمات المخصصة [attr=val]: سمات HTML5 في أقواس مربعة

[attr=val] هي صيغة Emmet لإضافة سمات عشوائية إلى وسم. المحتوى المكتوب داخل الأقواس المربعة يصبح سمات HTML خام—سواء كانت سمات HTML5 قياسية (colspan، type، placeholder)، سمات HTML5 الأحدث (data-*، aria-*)، أو سمات مخصصة.

(1) قواعد الاختصار

نصيحة: الشكل بدون قيمة [attr] (مثل [disabled]) يولد attr=""—القيمة هي سلسلة فارغة. إذا أردت سمة منطقية (مثل <input disabled>)، لن يزيل Emmet القيمة تلقائيًا؛ ستحتاج إلى تعديلها يدويًا. ومع ذلك، معظم سمات HTML القياسية الحديثة تدعم شكل القيمة، مما يحافظ على الاتساق.

نقطة أساسية: المحتوى داخل الأقواس المربعة يتم تحليله بالكامل وفقًا لصيغة سمات HTML5—يمكن للقيم استخدام علامات اقتباس مفردة، مزدوجة، أو بدون علامات اقتباس (عندما لا توجد مسافات)؛ السمات المتعددة مفصولة بمسافات. ملاحظة: هنا، المسافات هي فواصل صالحة، على عكس قاعدة Emmet الخاصة "المسافة = رمز إيقاف." الأقواس المربعة تشكل سياقًا "مغلقًا."

4. الترقيم $: العنصر النائب التصاعدي التلقائي

$ هو عنصر الترقيم النائب في Emmet—اكتب $ في class أو id أو قيمة سمة أو حتى موضع نص، اقرنه مع تكرار *N، ويتم استبداله تلقائيًا برقم التسلسل الحالي (الافتراضي يبدأ من 1).

(1) أين يمكن استخدام $

(2) الحشو الصفري متعدد الأرقام $$$

تسلسل عدة رموز $ ينتج حشوًا صفريًا متعدد الأرقام:

(3) العكسي $- وقيمة البداية $@N

افتراضيًا، يبدأ الترقيم من 1 تصاعديًا. استخدم @- للتنازلي، و @N للبدء من N:

نقطة أساسية: في $@N، N هو قيمة البداية، وليس قيمة النهاية. يستخدم هذا بشكل شائع لسيناريوهات مثل "البدء من رقم محدد" (مثل أرقام صفحات الترقيم، رموز SKU للمنتجات، أرقام الإصدارات).

5. أمثلة عملية

تغطي الأمثلة الخمسة التالية جميع التركيبات الأساسية لـ [attr] و $—من سمات مفردة إلى سمات متعددة، من ترقيم أساسي إلى حشو صفري متعدد الأرقام، من عكسي إلى سيناريوهات الجداول.

▶ مثال: سمات أساسية td[title="Hello" colspan=3] (الصعوبة ★)

أضف سمتي title و colspan إلى td. هذه واحدة من أكثر تركيبات السمات كلاسيكية في جداول HTML.

الاختصار:

td[title="Hello" colspan=3]

التوسيع:

<td title="Hello" colspan="3"></td>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

علامات الاقتباس المزدوجة تغلف title التي تحتوي على مسافة ("Hello")، ولا توجد علامات اقتباس حول القيمة بدون مسافات (3). Emmet يضيف تلقائيًا علامات اقتباس لجميع السمات بغض النظر عما إذا كنت قد أدرجتها في الاختصار. السمات المتعددة مفصولة بمسافات، وهذا مختلف عن قاعدة Emmet الخاصة "المسافة = رمز إيقاف"—المسافات لها معنى خاص داخل الأقواس المربعة. colspan=3 يشير إلى أن الخلية تمتد 3 أعمدة أفقيًا.

▶ مثال: سمات input input[type=text name=user placeholder=Username] (الصعوبة ★)

أضف سمات type و name و placeholder إلى input دفعة واحدة. input هو أحد أكثر الوسوم "كثافة بالسمات" في HTML.

الاختصار:

input[type=text name=user placeholder=Username]

التوسيع:

<input type="text" name="user" placeholder="Username">

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

ثلاث سمات مكتملة في اختصار واحد. ملاحظة: Emmet يفترض input بذكاء كـ type="text" (حتى لو حذفت type)، لذا كتابة `input[name=user placeholder=Username]` فقط لا تزال تنتج type="text". إذا أردت type="password" أو type="email"، يجب كتابته بشكل صريح. ثلاث سمات متسلسلة هي الاختصار الأعلى ترددًا في سيناريوهات النماذج.

▶ مثال: ترقيم $ مفرد ul>li.item$*5 (الصعوبة ★)

خمسة عناصر li، لكل منها فئة تصاعدية تلقائيًا من 1 إلى 5—المثال الرئيسي من توثيق Emmet الرسمي.

الاختصار:

ul>li.item$*5

التوسي��:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

خمسة عناصر li بفئات item1، item2، item3، item4، item5. هذا هو نمط Emmet القياسي للعناصر المرقمة بشكل فريد (عنصر + رقم). إذا كان اسم الفئة لا يحتاج إلى جزء رقمي، اكتب ببساطة .item (بدون $)، وجميع عناصر li تشترك في نفس الفئة.

▶ مثال: حشو صفري $$$ متعدد الأرقام ul>li.item$$$*5 (الصعوبة ★)

استخدم 3 رموز $ للحشو الصفري التلقائي للترقيم إلى 3 أرقام.

الاختصار:

ul>li.item$$$*5

التوسيع:

<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

عدد أرقام الحشو الصفري = عدد رموز $. 3 رموز $ = حشو صفري بـ 3 أرقام (item001، item002...). سيناريوهات الحشو الصفري تشمل: أرقام الطلبات (مسبوقة، سهلة الترتيب)، معرفات الجداول، رموز SKU، وأرقام الفصول. للحشو بـ 4 أرقام، استخدم item$$$$; لـ 5 أرقام، استخدم item$$$$$. ملاحظة: عندما يتجاوز الرقم الفعلي عرض الحشو، لا يتم اقتطاعه—مثل *12 مع $$ ينتج item01، 02، 03، 04، 05، 06، 07، 08، 09، 10، 11، 12 (التسعة الأولى محشوة صفريًا؛ الأرقام 10–12 تعرض بأرقامها الفعلية لأنها تتجاوز رقمين).

▶ مثال: جدول + ترقيم (table>(tr>td{item $})*3) (الصعوبة ★★)

تجميع + تكرار + محتوى نصي—"قائمة مرقمة" من 3 صفوف × عمود واحد، باستخدام التجميع بحيث يتبع td تكرار كل tr.

الاختصار:

(table>(tr>td{item $})*3)

التوسيع:

<table>
  <tr>
    <td>item 1</td>
  </tr>
  <tr>
    <td>item 2</td>
  </tr>
  <tr>
    <td>item 3</td>
  </tr>
</table>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: الأقواس الخارجية تغلف الجدول بأكمله كوحدة مستقلة؛ الداخلي (tr>td{item $}) هو قالب لـ "صف واحد مع عنصر N واحد،" و *3 يكرر هذا القالب 3 مرات. كل تكرار يستبدل $ برقم التسلسل الحالي (1، 2، 3)، منتجًا 3 عناصر tr كل منها يحتوي على td واحد بنص "item 1،" "item 2،" و "item 3." هذا هو نمط Emmet الأساسي لسيناريوهات مثل "ترقيم الشروط،" "ترقيم قائمة المهام،" و "قوائم المنتجات." للحصول على خلايا متعددة لكل صف، غير td{item $} إلى td{item $}+td{...} (محتوى النص مغطى في الدرس 09).

6. مثال كامل: مجموعة حقول نموذج + معرفات محشوة صفريًا

ادمج [attr] و $—نموذج تسجيل مع 5 حقول إدخال، كل حقل له id محشو صفريًا بـ 3 أرقام.

▶ مثال: نموذج تسجيل + معرفات 3 أرقام (الصعوبة ★★)

الاختصار:

form#register>(fieldset>legend{Account Info})+(input#field-001.form-control[type=text name=user])+(input#field-002.form-control[type=email name=email])+(input#field-003.form-control[type=password name=pwd])+(label>input#field-004[type=checkbox name=news]+{Subscribe to newsletter})+(button#btn-100.btn.btn-primary[type=submit]{Register})

التوسيع:

<form id="register">
  <fieldset>
    <legend>Account Info</legend>
  </fieldset>
  <input id="field-001" class="form-control" type="text" name="user">
  <input id="field-002" class="form-control" type="email" name="email">
  <input id="field-003" class="form-control" type="password" name="pwd">
  <label>
    <input id="field-004" type="checkbox" name="news">
    Subscribe to newsletter
  </label>
  <button id="btn-100" class="btn btn-primary" type="submit">Register</button>
</form>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: هذا المثال يدمج جميع عوامل المرحلة 2—> (تداخل)، + (أخ)، #id، .class، [] (سمات)، {} (محتوى نصي). ملاحظة: id كل input مكتوب يدويًا لأن $ في Emmet يمكن استخدامه فقط داخل هياكل التكرار *N. هنا، الـ 5 inputs تستخدم نهجًا هجينًا—"id يدوي + class تلقائي"—حيث id يعم�� كـ "مرساة حقل" النموذج (خطاف JS) ويجب أن يكون فريدًا، بينما class يعمل كـ "نوع حقل" (محدد CSS) ويمكن إعادة استخدامه. نمط "id مكتوب يدويًا + class تلقائي" هو نمط عالي التردد في تطوير النماذج.

جرب بنفسك: اكتب td[title="Hello world!" colspan=3] في ورقة غش Emmet الرسمية لرؤية التوسيع في الوقت الفعلي.

❓ أسئلة شائعة

📖 ملخص

• [attr=val] تضيف سمات عشوائية إلى وسم؛ السمات المتعددة مفصولة بمسافات
• شكل [attr] بدون قيمة مكافئ لـ [attr=""]؛ كلاهما يولدان سمات بقيمة فارغة
• الأقواس المربعة تشكل سياقًا "مغلقًا"—المسافات هي فواصل سمات، وليست رموز إيقاف
• $ هو عنصر ترقيم نائب؛ اقرنه مع *N للاستبدال التلقائي برقم التسلسل الحالي (افتراضي تصاعدي من 1)
• رموز $ المتعددة تحشو صفريًا تلقائيًا ($$$ → حشو صفري بـ 3 أرقام)
• $@N يبدأ الترقيم من N؛ @- ينتج ترقيمًا تنازليًا
• $ يمكن وضعه في قيم class و id و attribute
• جميع عوامل المرحلة 2 الثمانية مغطاة الآن: > + ^ * () . # [] $

📝 تمارين

1. أساسي (الصعوبة ★): اكتب اختصارات Emmet من سطر واحد تتوسع إلى: (أ) وسم a مع href="#"، class="link"، data-id="$" (ملاحظة: $ بدون * افتراضيًا 1)؛ (ب) td مع title="Cell"، colspan=2، rowspan=3؛ (ج) ul>li*5، كل li بفئة row-$ (ترقيم برقم واحد).
2. متوسط (الصعوبة ★★): اكتب "ورقة درجات" بـ 5 صفوف × 4 أعمدة مع الصف الأول كرأس (th) والصفوف 2–5 كبيانات (td)، مع ids خلايا البيانات باستخدام حشو صفري بـ 3 أرقام (cell-001 حتى cell-020). اكتبها كلها في سطر Emmet واحد واشرح لماذا يمكن استخدام $ لـ ids لكن class لن يعمل بنفس الطريقة.
3. متقدم (الصعوبة ★★★): اكتب "جدول شروط الخدمة" بـ 100 صف بهيكل 3 أعمدة: (أ) عمود رقم تسلسلي باستخدام td.item$@100*100 للترقيم العكسي (من 100 نزولاً إلى 1)؛ (ب) عمود عنوان باستخدام محتوى نصي {Term $} (محتوى النص مغطى في الدرس 09)؛ (ج) عمود محتوى متروك فارغًا حاليًا. اكتبها كلها في سطر Emmet واحد، تحقق من التوسيع، وقارن فرق الوقت بين كتابة 100 صف يدويًا مقابل سطر Emmet واحد.

فريق Web-Tutorial التقني

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

من نحن