Emmet: بادئات المتصفح والمطابقة التقريبية
علمك الدرس 11 أساسيات اختصارات CSS — كتابة
margin: 10px 20px;وخصائص شائعة أ��رى في سطر واحد. لكن عصر CSS3 قدم نقطتي ألم رئيسيتين لا تزالان بدون حل: التوافق عبر المتصفحات (حيث يحتاجborder-radiusكتابة بادئات-webkit-و-moz-معًا) وأسماء الخصائص صعبة التذكر (overflow: hidden;طويلة جدًا للكتابة). يحل هذا الدرس كلتيهما: بادئات المتصفح تتيح لك ت��سيع قواعد توافق webkit/moz بضغطة مفتاح واحدة، والمطابقة التقريبية تتيح لك كتابةbdrsليتم استدلاله ذكيًا كـborder-radius.
1. ما ستتعلمه
- آلية بادئات المتصفح: بادئة
-webkit-واحدة ��شغل توسيع 3 أسطر webkit + moz + قياسي - بادئات متعددة صريحة:
-w-m-يحدد فقط webkit + moz، متجنبًا بادئات ms/o غير الضرورية - مرجع سريع لأحرف بادئات Emmet:
w= webkit،m= moz،s= ms،o= o - مبدأ المطاب��ة التقريبية: الاختصارات غير المعروفة تطابق مع أقرب اسم مقتطف معرف مسبقًا (
bdrs←border-radius) - المطابقة التقريبية عمليًا:
ov-h←overflow: hidden;،tdn←text-decoration: none; - الخصائص الموصولة بشرطة: صيغة الاختصار والقيم المتعددة لأسماء الخصائص الموصولة بشرطة (
border-top،border-bottom)
2. قصة حقيقية لمطور واجهة أمامية
(1) نقطة الألم: بادئات CSS3 عبر المتصفحات + أسماء الخصائص الطويلة
كانت أليس تبني بطاقات ذات زوايا مدورة لصفحة هبوط متجر إلكتروني. أرادت أن تدعم جميع المتصفحات الحديثة border-radius للزوايا المدورة. المشكلة: المتصفحات من عام 2015 كانت لا تزال تحتاج بادئات —
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
ثلاثة أسطر فقط لمعالجة خاصية border-radius واحدة. تصميمها كان فيه 6 زوايا مدورة (البطاقة نفسها، الأزرار، الصور، الشارات، الصور الرمزية، وتذييل البطاقة). بـ 3 أسطر لكل منها = 18 سطرًا من النسخ واللصق الخالص. الأسوأ: خصائص CSS3 المختلفة لها متطلبات تواف�� بادئات مختلفة — box-shadow يحتاج 4 أسطر (webkit, moz, ms, o)، بينما transform يحتاج فقط 2. استمرت أليس في الخلط بين أي خاصية تحتاج كم بادئة.
والأسوأ كانت أسماء خصائص CSS3 الطويلة: overflow: hidden; كانت مطلوبة بشكل متكرر، وكان على أليس كتابة overflow كاملاً (8 أحرف) كل مرة؛ text-decoration: none; كان أطول (15 حرفًا لاسم الخاصية وحده). قد تكتب هاتين الخاصيتين 50 مرة في اليوم، وتكتبهما كاملتين كل مرة — بمجموع 1,150 ضغطة مفتاح. فكرت أليس: هل يمكن توسيع بادئات توافق CSS3 بضغطة مفتاح واحدة؟ هل يمكن لأسماء الخصائص الطويلة استخدام اختصارات قصيرة؟
(2) كيف تحل بادئات المتصفح + المطابقة التقريبية في Emmet المشكلة
حل Emmet مكون من جزأين:
آلية بادئات المتصفح: أضف - قبل اختصار CSS، ويوسعه Emmet تلقائيًا إلى 3 أسطر من قواعد التوافق webkit/moz/قياسي. اختصار أليس للزوايا المدورة -bdrs8 يتوسع إلى 3 أسطر دفعة واحدة:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
6 زوايا مدورة تنتقل من 18 سطرًا إلى 6 اختصارات — زيادة سرعة 3 أضعاف.
آلية المطابقة التقريبية: يستخدم Emmet قاموس مقتطفات CSS معرف مسبقًا + خوارزمية بحث تقريبي لمطابقة الاختصارات القصيرة ذكيًا مع أسماء الخصائص الطويلة. bdrs ليس مباشرة في القاموس، لكن Emmet يستخدم "البحث التقريبي في أسماء المقتطفات المعرف�� مسبقًا" لإيجاد أقرب تطابق: border-radius؛ ov-h يستخدم فصل الشرطة للمطابقة الذكية مع overflow: hidden;؛ tdn يستخدم مجموعة الأحرف الأولى للمطابقة مع text-decoration: none;. مدخلات أليس لأسماء الخصائص الخمسين انتقلت من 1,150 ضغطة مفتاح إلى حوالي 200 (متوسط طول الاختصار 4 أحرف) — زيادة سرعة 5 أضعاف.
(3) الفوائد
بادئات المتصفح + المطابقة التقريبية هما المسرعان الأساسيان لـ Emmet في عصر CSS3. الأولى تحل العمل المتكرر "لتوافق المتصفحات"، بينما الثانية تحل العبء المعرفي "لعدم تذكر أسماء الخصائص الطويلة". بمجرد إتقانهما، تستطيع أليس كتابة أنماط البطاقات في 90 ثانية (بدلاً من 8 دقائق)، وتقليل كود توافق CSS3 للزوايا المدورة من 18 سطرًا إلى 6، وتحسين سرعة إدخال أسماء الخصائص الطويلة 5 أضعاف. بعد هذا الدرس، ستتمكن من كتابة زوايا مدورة متوافقة مع webkit/moz بـ -bdrs8 في سطر واحد، وتوسيع text-decoration: none; من tdn في سطر واحد.
3. آلية بادئات المتصفح: بادئة - تشغل توسيع 3 أسطر
الخصائص الجديدة في CSS3 (الزوايا المدورة، الظلال، التدرجات، التحويلات) تتطلب كتابة بادئات المتصفح لمحركات المتصفحات المختلفة. يجعل Emmet هذه المهمة المتكررة عملية بضغطة مفتاح واحدة.
(1) أساسيات بادئات المتصفح
أضف بادئة - قبل اختصار CSS، ويوسعه Emmet تلقائيًا إلى 3 أسطر من قواعد التوافق تشمل webkit + moz + قياسي.
| الاختصار | التوسيع | حالة الاستخدام |
|---|---|---|
-bdrs |
-webkit-border-radius: ;-moz-border-radius: ;border-radius: ; |
زوايا مدورة متوافقة 3 أسطر |
-bxs |
-webkit-box-shadow: ;-moz-box-shadow: ;box-shadow: ; |
ظل متوافق 3 أسطر |
-trf |
-webkit-transform: ;-moz-transform: ;transform: ; |
تحويل متوافق 3 أسطر |
-bdrs8 |
-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; |
زوايا مدورة مع قيمة |
نقطة أساسية: يفترض Emmet افتراضيًا تضمين webkit (Chrome، Safari، Opera الجديد) + moz (Firefox) + قياسي — 3 أسطر إجمالاً. هذا مبني على تكوين كتالوج بائعي CSS (
css.{vendor}Properties) —border-radiusموجود في كتالوجي webkit و moz، لذا تضاف البادئتان. للحصول على نسخة بادئة محددة فقط، استخدم صيغة البادئة الصريحة في القسم (3).
(2) كيف تعمل البادئة التلقائية
آلية بادئات المتصفح في Emmet مبنية ع��ى تكوين css.autoInsertVendorPrefixes (ممكّن افتراضيًا). عند التمكين، جميع خصائص CSS3 المعروفة (في كتالوجات البائعين) تتوسع تلقائيًا إلى قواعد متوافقة من 3 أسطر — بادئة - غير مطلوبة للبادئات:
الاختصار (مع -) |
الاختصار (بدون -) |
التوسيع | ملاحظات |
|---|---|---|---|
-bdrs8 |
bdrs8 |
-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; |
كلاهما متكافئان عند تمكين التكوين |
-bxs |
bxs |
-webkit-box-shadow: ;-moz-box-shadow: ;box-shadow: ; |
سلوك البادئة التلقائية |
نصيحة: هذا تصميم للراحة — لا يحتاج المطورون لحفظ "أي الخصائص تحتاج بادئات".
bdrs8و-bdrs8ينتجان نفس التوسيع. ومع ذلك، إضافة-صراحة أوضح وأكثر قابلية للنقل (تظل تعمل إذا تم إيقاف تكوين البادئة التلقائية).
(3) تحديد البادئة الصريح: -w-m- يخرج فقط البادئات المحددة
لإخراج بادئات محددة فقط (مثال: webkit + moz فقط، بدون ms + o)، استخدم صيغة -{حرف}-{حرف}-... الصريحة:
| الاختصار | التوسيع | حالة الاستخدام |
|---|---|---|
-w-m-bdrs8 |
-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; |
webkit + moz فقط |
-wm-trf |
-webkit-transform: ;-moz-transform: ;transform: ; |
webkit + moz فقط |
-w-bdrs8 |
-webkit-border-radius: 8px;border-radius: 8px; |
webkit فقط |
(4) مرجع سريع لأحرف البادئات
يوفر Emmet اختصارات بادئات بحرف واحد لتحديد صريح أقصر:
| الحرف | البادئة الكاملة | المتصفح |
|---|---|---|
w |
-webkit- |
Chrome، Safari، Opera الجديد |
m |
-moz- |
Firefox |
s |
-ms- |
Edge القديم، IE |
o |
-o- |
Opera القديم (مهمل؛ Opera الجديد يستخدم webkit) |
البادئات المتعددة توصل بـ -: w-m، w-m-s-o (webkit + moz + ms + o).
4. المطابقة التقريبية: الاستدلال الذكي للاختصارات غير المعروفة
CSS لديه أكثر من 200 اسم خاصية — حفظها كلها غير واقعي. يستخدم Emmet المطابقة التقريبية لتتيح لك كتابة اختصارات قصيرة يتم استدلالها إلى أسماء خصائص طويلة.
(1) مبدأ المطابقة التقريبية
يحتفظ Emmet بقاموس مقتطفات CSS معرف مسبقًا (snippets.json). عندما يكتب المستخدم اختصارًا غير معرف مباشرة في القاموس، يستخدم Emmet خوارزمية بحث تقريبي لإيجاد أقرب اسم مقتطف.
يكتب المستخدم "bdrs"
→ البحث عن "bdrs" في snippets.json → غير موجود
→ تشغيل البحث التقريبي → المقارنة مع جميع أسماء المقتطفات
→ حساب درجات التشابه
→ "border-radius" يحصل على أعلى درجة (b-d-r-s تطابق 1-2 حرف من border-radius)
→ إخراج خاصية "border-radius"
(2) مرجع سريع للمطابقة التقريبية عمليًا
أزواج المطابقة التقريبية الأكثر شيوعًا "اختصار قصير ← خاصية طويلة" في Emmet:
| الاختصار | التوسيع | عملية المطابقة التقريبية |
|---|---|---|
bdrs |
border-radius: ; |
b-d-r-s → border-radius |
bdt |
border-top: ; |
b-d-t → border-top (معرف مباشرة) |
bdb |
border-bottom: ; |
b-d-b → border-bottom |
ov-h |
overflow: hidden; |
ov-h → overflow: hidden |
ovh |
overflow: hidden; |
ovh → overflow: hidden (بدون شرطة) |
oh |
overflow: hidden; |
oh → overflow: hidden (فائقة القصر) |
tdn |
text-decoration: none; |
t-d-n → text-decoration: none |
pos-a |
position: absolute; |
pos-a → position: absolute |
bxz-cb |
box-sizing: content-box; |
bxz-cb → box-sizing: content-box |
c |
color: ; |
c → color (معرف مباشرة) |
نقطة أ��اسية: المطابقة التقريبية تعمل على أسماء المق��طفات المعرف�� مسبقًا، وليس على أسماء خصائص CSS مباشرة. هذا يعني أن نفس الاختصار قد يكون له عدة مرشحين — يختار Emmet صاحب أعلى درجة تشابه.
ohيمكن أن يطابق إماoverflow: hiddenأوoutline: hidden، لكن Emmet يختار بناءً على الأولوية.
(3) اختصار الخصائص الموصولة بشرطة
CSS لديه العديد من الخصائص متعددة الكلمات الموصولة بشرطة (border-top، border-bottom، text-decoration). قواعد اختصار Emmet للخصائص الموصولة بشرطة:
| الاختصار | التوسيع | ملاحظات |
|---|---|---|
bdt |
border-top: ; |
الخاصية الموصولة بشرطة تأخذ الأحرف الأولى |
bdb |
border-bottom: ; |
نفس ما سبق |
bdl |
border-left: ; |
نفس ما سبق |
bdr |
border-right: ; |
نفس ما سبق |
tdn |
text-decoration: none; |
إزالة زخرفة النص |
tdl |
text-decoration: line-through; |
زخرفة نص خط في المنتصف |
tt-u |
text-transform: uppercase; |
تحويل النص إلى أحرف كبيرة |
bd-1-s-#ccc |
border: 1px solid #ccc; |
اختصار حدود كامل |
نصيحة: صيغة القيم المتعددة للخصائص الموصولة بشرطة تستخدم
-كفاصل (مثال:bdt-1-s-solid). لكن احذر التمييز بين هذا واختصار القيم المتعددة —bdtهي الخاصية (border-top)،-1هي القيمة (1px)،-sهي القيمة (solid)، لذا النتيجة النهائية هيborder-top: 1px solid;.#هو فاصل اللون، و#cccهي قيمة اللون — نفس الاختصار يمكنه مزج خاصية + قيم متعددة + لون بسلاسة.
5. أمثلة عملية
تغطي الأمثلة الأربعة التالية السيناريوهات الأساسية لبادئات المتصفح + المطابقة التقريبية + الخصائص الموصولة بشرطة.
▶ مثال: بادئة متصفح واحدة -webkit-bdrs10 (الصعوبة ⭐)
بادئة المتصفح الأكثر شيوعًا — كتابة توافق webkit + moz + قياسي في سطر واحد.
الاختصار:
-webkit-bdrs10
التوسيع:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
الناتج:
TEXT 📖 للعرض فقطالتحليل: `-webkit-bdrs10` يتكون من 3 أجزاء: ① `-webkit-` هي علامة بادئة المتصفح الصريحة، تشغل Emmet لتوسيع نسخة webkit؛ ② `bdrs` يطابق تقريبيًا مع `border-radius` (عبر تطابق أقرب تشابه في قاموس snippets.json)؛ ③ `10` هي القيمة، تضيف وحدة px تلقائيًا. يخرج Emmet في النهاية 3 أسطر من قواعد التوافق: نسخة webkit، نسخة moz، ونسخة w3c القياسية. بما أن `border-radius` موجود في كتالوجي بائعي Emmet (css.webkitProperties، css.mozProperties)، حتى بدون كتابة `-webkit-` صراحة، `bdrs10` سيخرج تلقائيًا 3 أسطر توافق. ميزة ترميز `-webkit-` الصريح هي وضوح القصد واستمرارية الوظيفة بعد تغييرات التكوين.
▶ مثال: بادئات متصفح متعددة -w-m-bdrs10 (الصعوبة ⭐⭐)
تحديد صريح لبادئات webkit + moz فقط — تجنب بادئات ms/o القديمة غير الضرورية.
الاختصار:
-w-m-bdrs10
التو��يع:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
الناتج:
TEXT 📖 للعرض فقطالتحليل: في `-w-m-bdrs10`، `-` هو مشغل بادئة المتصفح، `w-m` هي قائمة البادئات الصريحة (w = webkit، m = moz)، و `bdrs10` هي الخاصية + القيمة. عند رؤية `-w-m-`، يخرج Emmet **فقط البادئتين المحددتين + القياسي**، بدون ms (IE/Edge القديم) و o (Opera القديم). وضع "التحديد الصريح" هذا مفيد لـ: (أ) التحكم الدقيق في عدد بادئات الإخراج؛ (ب) تجنب بادئات المتصفحات المهملة (مثل o)؛ (ج) الالتزام بمعايير ترميز الفريق التي تتطلب webkit + moz فقط. الفرق الرئيسي عن `-webkit-bdrs10` هو: `-w-m-bdrs10` **للخصائص غير المعروفة** يخرج فقط بادئتين + قياسي؛ بينما `-webkit-bdrs10` **للخصائص المعروفة** يخرج جميع بادئات الكتالوج، و**للخصائص غ��ر المعروفة** يخرج جميع البادئات الأربع.
▶ مثال: المطابقة التقريبية bdrs tdn ov-h (الصعوبة ⭐⭐)
ثلاث مطابقات تقريبية شائعة لخصائص طويلة — عرض قدرة الاستدلال الذكي لـ Emmet.
الاختصار (3 توسيعات مستقلة):
bdrs8
التوسيع:
border-radius: 8px;
الاختصار:
tdn
التوسيع:
text-decoration: none;
الاختصار:
ov-h
التوسيع:
overflow: hidden;
الناتج:
TEXT 📖 للعرض فقطالتحليل: ثلاثة اختصارات مستقلة تعرض ثلاثة أشكال من المطابقة التقريبية. ف�� `bdrs8`، `bdrs` يطابق تقريبيًا مع `border-radius`، و8 تضيف px تلقائيًا ← `border-radius: 8px;`. هذا نمط "اختصار الأحرف الأولى" النموذجي (أول حرفين من "border" و "radius"). في `tdn`، `t-d-n` هو اختصار `text-decoration: none` (الأحرف الأولى من text + decoration + none) ← `text-decoration: none;`. هذا **اسم مستعار دقيق معرف مسبقًا** في قاموس Emmet، وليس مطابقة تقريبية — snippets.json الخاص بـ Emmet يحتوي المدخل الدقيق `"tdn": "text-decoration: none|;"`. في `ov-h`، تعمل الشرطة كفاصل قيم، تفصل `ov` (overflow) عن `h` (hidden) ← `overflow: hidden;`. هذا شكل آخر من المطابقة التقريبية: الشرطة تجعل هيكل الاختصار أوضح. المطابقة التقريبية لـ Emmet تعمل على **أسماء المقتطفات المعرف�� مسبقًا**، وليس على **جميع أسماء خصائص CSS** — لذا أحيانًا، قد لا يتم العثور على خصائص غامضة.
▶ مثال: اختصار الخصائص الموصولة بشرطة bdt-1-s-solid bd-1-s-#ccc (الصعوبة ⭐⭐)
صيغة القيم المتعددة للخصائص الموصولة بشرطة — عرض أن الشرطات في الاختصارات تفصل كلاً من الخصائص والقيم.
الاختصار:
bdt-1-s-solid
التوسيع:
border-top: 1px solid;
الاختصار:
bd-1-s-#ccc
التوسيع:
border: 1px solid #ccc;
الناتج:
TEXT 📖 للعرض فقطالتحليل: اختصاران يعرضان صيغة القيم المتعددة للخصائص الموصولة بشرطة. في `bdt-1-s-solid`، `bdt` هو اختصار الخاصية الموصولة بشرطة لـ `border-top` (الأحرف الأولى من border + top)، `-1` هي القيمة 1 (تضيف px تلقائيًا)، `-s` هو الاسم المستعار لـ solid (s = solid)، و `-solid` هي قيمة صريحة. يحلل Emmet بذكاء: `bdt` هو اسم الخاصية؛ كل شيء بعد `-` هو قيمة (1px، solid)، منتجًا `border-top: 1px solid;`. في `bd-1-s-#ccc`، `bd` هو اختصار `border` (معرف مباشرة)، `-1` هو 1px، `-s` هو solid، و `-#ccc` هو اللون (`#` هو فاصل اللون؛ يتعرف Emmet تلقائيًا على حدود القيمة). الناتج النهائي هو `border: 1px solid #ccc;`. كلا المثالين يوضحان الاختصار المختلط "خاصية موصولة بشرطة + قيم متعددة + لون" — هذه هي صيغة حدود CSS الكاملة الأكثر شيوعًا.
6. مثال كامل: نمط بطاقة CSS3 في سطر واحد
ادمج بادئات المتصفح والمطابقة التقريبية والخصائص الموصولة بشرطة لكتابة نمط بطاقة CSS3 كامل (مع توافق المتصفحات القديمة).
▶ مثال: نمط بطاقة CSS3 متوافق (الصعوبة ⭐⭐)
الاختصار:
-w-m-bdrs8 +bxs0-2-4-#0003 -bgs#fff w200 h200 m10-20 p16
التوسيع:
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 2px 4px #00000033;
-moz-box-shadow: 0 2px 4px #00000033;
box-shadow: 0 2px 4px #00000033;
background: #fff;
width: 200px;
height: 200px;
margin: 10px 20px;
padding: 16px;
الناتج:
TEXT 📖 للعرض فقطالتحليل: يجمع هذا المثال جميع الآليات الأساسية لهذا الدرس. `-w-m-bdrs8` يحدد صراحة بادئات webkit + moz لتوسيع الزوايا المدورة (3 أسطر)؛ `+bxs0-2-4-#0003` هو اختصار `box-shadow` — `bxs` يطابق تقريبيًا مع box-shadow، `0-2-4` هي الإزاحة ونصف قطر التمويه بـ 3 قيم (تضيف px تلقائيًا)، و `#0003` هو أسود بألفا 03 (يوسع Emmet تلقائيًا اللون بـ 4 أحرف `#0003` إلى 8 أحرف `#00000033`). اختصار `-bgs#fff`: `bgs` هو اختصار background، `#fff` هي خلفية بيضاء. ملاحظة: `-bgs` هو اختصار بادئة متصفح (`-` يشغل webkit/moz)، لكن background ليست خاصية CSS3 جديدة، لذا لن يتم إخراج نسخ webkit/moz فعليًا (لأن background ليست في كتالوجات البائعين). `-` هنا تستخدم لوضوح القصد. أخيرًا، `w200 h200 m10-20 p16` هي الأبعاد والتباعد الأساسية. هذا السطر الواحد يغطي نمط بطاقة CSS3 كامل، من 12 سطر CSS مكتوب يدويًا إلى اختصار Emmet واحد.
❓ أسئلة شائعة
-bdrs8 و bdrs8 ينتجان نفس التوسيع تمامًا؟ هل يجب أن أكتب - دائمًا؟css.autoInsertVendorPrefixes (افتراضي)، هما متطابقان — كلاهما يتوسع إلى 3 أسطر من قواعد التوافق. عند تعطيل التكوين، -bdrs8 لا يزال يتوسع إلى 3 أسطر، لكن bdrs8 يتوسع إلى ��طر واحد فقط (النسخة القياسية). يوصى دائمًا بكتابة بادئة - لوضوح القصد وتوافق أفضل عبر البيئات.bdrs مع border-radius، لكن ليس radius؟bdrs يمكنه المطابقة لأن snippets.json الخاص بـ Emmet يعرف صراحة "bdrs": "border-radius:|;" كاسم مستعار دقيق. radius ليس في القائمة المعرف�� مسبقًا، لذا البحث التقريبي لا يجد تطابقًا قريبًا. إذا كنت تستخدم radius بشكل متكرر، يمكنك تخصيص snippets.json بإضافة "radius": "border-radius:|;"، مما يجعل radius قابلاً للتوسيع أيضًا.-webkit-bdrs10 و -w-bdrs10؟-webkit-bdrs10 يحدد صراحة بادئة webkit؛ -w-bdrs10 هو الصيغة المختصرة (w = webkit). الاثنان متكافئان في تحليل Emmet. ومع ذلك، في -webkit-bdrs10، -webkit- جزء من اسم الخاصية، ويبحث Emmet عن مقتطف webkit-bdrs ككل؛ في -w-bdrs10، -w- هي قائمة بادئات صريحة، ويحلل Emmet بوضع "قائمة البادئات + الخاصية". كلاهما ينتجان نفس النتيجة، لكن الدلالة تختلف — -webkit-bdrs يركز على "نسخة متوافقة مع webkit"، بينما -w-bdrs يركز على "تحديد البادئة w". يوصى باستخدام -w-bdrs (أقصر وأكثر توافقًا مع اتفاقية البادئات بحرف واحد في Emmet).!important؟ مثلاً، -bdrs8!؟!important تعمل بشكل مستقل عن آلية بادئات المتصفح. -bdrs8! يتوسع إلى 3 أسطر مع !important في كل منها. ومع ذلك، عمليًا، لا يوصى بإضافة !important إ��ى بادئات المتصفح — قواعد التوافق نفسها غير شائعة بالفعل، وإضافة !important تجعل تصحيح الأولوية صعبًا. إذا كان لا بد من استخدامها، طبقها فقط على النسخة القياسية النهائية (border-radius: 8px !important;) بدلاً من نسخ webkit/moz.📖 ملخص
- بادئات المتصفح: أضف
-قبل الاختصار للتوسيع التلقائي إلى 3 أسطر قواعد متوافقة webkit + moz + قياسي (-bdrs8← 3 أسطر) - البادئة التلقائية: تكوين
css.autoInsertVendorPrefixesممكّن افتراضيًا؛ خصائص CSS3 المعرو��ة لا تحتاج-للحصول على البادئات - البادئات الصريح��:
-w-m-تحديد بادئة بحرف واحد (w=webkit،m=moz،s=ms،o=o) - المطابقة التقريبية: تعمل على أسماء المقتطفات المعرف�� مسبقًا (
bdrs←border-radius،ov-h←overflow: hidden;) - الخصائص الموصولة بشرطة:
bdt= border-top،bdb= border-bottom،bdl= border-left،bdr= border-right - القيم المتعددة المختلطة:
bd-1-s-#ccc= border 1px solid رمادي؛#يعمل كفاصل لون لتسلسل القيم المختلطة بسلاسة
📝 تمارين
- أساسي (الصعوبة ⭐): في ملف
.css، أدخل ا��اختصارات الثلاثة-bdrs8،-bxs،-trfواحدًا تلو الآخر، اضغط Tab، وسجل نتائج التوسيع. ثم أعد كتابتها بدون-(كـbdrs8،bxs،trf) وقارن التوسيعات الستة (ملاحظة: مع تمكينcss.autoInsertVendorPrefixesافتراضيًا، يجب أن يكون الاثنان متطابقين). - متوسط (الصعوبة ⭐⭐): اكتب سطر Emmet واحد لنمط div متوافق مع CSS3 كامل. المتطلبات: (أ) زوايا مدورة 8px (متوافقة مع webkit + moz)؛ (ب) ظل
0 2px 4px rgba(0,0,0,0.3)(باستخدام لون 4 أحرف#0003)؛ (ج) عرض 200px، ارتفاع 200px؛ (د) هامش 10px-20px (قيمتان). سجل التوسيع وتحقق من أن جميع أسطر التوافق تتضمن بادئات-webkit-و-moz-. - متقدم (الصعوبة ⭐⭐⭐): اكتب نمط CSS كامل "لظل بطاقة + انتقال تحويم" بـ 5 خصائص على الأقل: (أ) نمط افتراضي بزوايا مدورة + ظل + حشوة (3 خصائص)؛ (ب)
transition(شغل توسيع متوافق بـ-trs، أو استخدم اختصارtrs)؛ (ج) استخدامان على الأقل للمطابقة التقريبية (مثال:bdrs،tdn،ov-h)؛ (د) خاصية واحدة على الأقل بـ!important. تحقق من التوسيع واكتب تقرير ملخص فوائد السرعة "بادئات المتصفح + المطابقة التقريبية" (كم تستغرق الكتابة اليدوية مقابل Emmet لكل منها).
