Emmet: تدرجات CSS في سطر واحد
في الدرسين 11-12 أتقنت الآليات الأساسية لاختصارات CSS — استنتاج الوحدات، الوحدات الصريحة، القيم المتعددة، الألوان، بادئات المتصفح، والمطابقة التقريبية. لكن أكثر ميزات CSS3 تعقيدًا — التدرجات — لم تُغطَ بعد. التدرجات هي أكثر خصائص CSS3 تكرارًا: تدرج
linear-gradientواحد يتطلب أربعة أسطر من كود التوافق عبر المتصفحات (-webkit-+-moz-+-o-+ قياسي)، وتختلف صيغة معاملات كل سطر عبر ثلاث نسخ (webkit القديم، المواصفة الحالية، اقتراح W3C). يعلمك هذا الدرس مولد تدرجات CSS3 في Emmet —lg(...)يوسع أربعة أسطر توافق عبر المتصفحات تغطي ثلاث نسخ صياغة بضغطة واحدة، ثم يدمج جميع آليات الدرسين السابقين لبناء نمط زر كامل.
1. ما ستتعلمه
- اختصار التدرج الخطي
lg(...): يتوسع تلقائيًا إلى 4 أسطر توافق عبر المتصفحات (webkit + moz + o + قياسي)، تغطي 3 نسخ صياغة - معاملات اتجاه التدرج:
lg(left, #fff, #000)وlg(top, #fff, #000) - نقاط توقف متعددة الألوان مع مواضع:
lg(#fff, #ccc 50%, #000)—50%هو موضع#ccc rg(...)تدرج شعاعي: نفس هيكلlg(...)، يفترض من المركز للخارج- تطبيق عملي: نمط زر بـ 7 خصائص (
bgc+c+p+bdrs+tdn+fz+fw) في سطر واحد
2. قصة حقيقية لمطور واجهة أمامية
(1) نقطة الألم: كود التدرجات عبر المتصفحات + أنماط الأزرار — تجربة مرهقة
تبني أليس زر "سجل الآن" في صفحة هبوط منتج SaaS. تريد خلفية بتدرج خطي من الأبيض إلى الرمادي الفاتح — بصريًا أكثر أناقة من اللون الصلب. تبحث في Google عن "linear-gradient cross-browser syntax"، تنسخ وتلصق النتيجة:
background: -webkit-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to right, #fff 0%, #f0f0f0 100%);
أربعة أسطر من كود التوافق عبر المتصفحات، مع معاملات مختلفة قليلاً في كل سطر (webkit/moz/o تستخدم left، القياسي يستخد to right). تحتاج نسخ هذا 5 مرات (الزر الأساسي، الزر الثانوي، حالة التحويم، الحالة النشطة، حالة التعطيل)، مع تغيير قيم الألوان كل مرة. هذا 20 سطرًا من كود التدرج × 5 دورات نسخ-لصق = 100 سطر.
والأسوأ، يحتاج الزر أيضًا مجموعة كاملة من الأنماط: خلفية متدرجة (4 أسطر) + لون النص (سطر واحد) + حشوة (سطر واحد) + border-radius (سطر واحد) + إزالة زخرفة النص (سطر واحد) + font-size (سطر واحد) + font-weight (سطر واحد) + cursor (سطر واحد) = 11 سطرًا. تقضي أليس 15 دقيقة فقط على CSS الزر. تفكر: تدرجات CSS3 عنصر أساسي في التصميم الحديث — ألا يمكنني فقط كتابة بضعة أحرف، بضع قيم، والضغط Tab للحصول على 4 أسطر من كود التوافق عبر المتصفحات؟
(2) حل مولد التدرجات في Emmet
يوفر Emmet مولد تدرجات CSS3 — lg(...) (تدرج خطي) و rg(...) (تدرج شعاعي). تكتب "تعريف تدرج عادي" (اتجاه + نقاط توقف لونية) داخل الأقواس، ويوسعه Emmet تلقائيًا إلى 4 أسطر توافق عبر المتصفحات تغطي webkit/moz/o + قياسي عبر 3 نسخ صياغة.
اختصار زر التدرج لأليس:
lg(left,#fff,#f0f0f0)
سطر واحد يتوسع إلى 4 أسطر توافق عبر المتصفحات مع معالجة تلقائية لمواضع نقاط التوقف اللونية. هذا الاختصار الواحد يقلل كود التدرج لديها من 20 سطرًا إلى 1.
لنمط الزر الكامل، تكتب أليس جميع الخصائص السبع في سطر واحد:
bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700
47 حرفًا، 7 ضغطات Tab، 11 سطرًا من CSS زر كامل في 12 ثانية. ما كان يستغرق 15 دقيقة يستغرق الآن 12 ثانية — تحسين سرعة 75 ضعفًا.
(3) الفوائد
مولد تدرجات CSS3 المدمج مع اختصارات CSS هو السلاح النهائي لـ Emmet في التنسيق. الأول يلغي العمل المتكرر لـ "4 أسطر توافق عبر المتصفحات + 3 نسخ صياغة"، بينما الثاني يضغط أنماط مكونات واجهة المستخدم الشائعة (الأزرار، البطاقات، النماذج) في سطر واحد. بعد هذا الدرس، تنتقل تنسيقات أزرار أليس من 15 دقيقة إلى 12 ثانية، وكود تدرج التوافق عبر المتصفحات من 20 سطرًا إلى اختصار واحد. هذا الدرس هو أيضًا خاتمة المرحلة 4 — المرحلة 5 تنتقل إلى إجراءات المحرر، ممتدة Emmet من "كتابة الاختصارات" إلى "تسريع التحرير".
3. التعريف الأساسي لمولدات تدرجات CSS3
تدرجات CSS3 هي أحد المؤثرات البصرية المفضلة لدى المصممين، لكن صيغة التوافق عبر المتصفحات مرهقة بشكل لا يصدق — تدرج linear-gradient واحد يتطلب ثلاث نسخ ببادئات البائعين (webkit/moz/o)، كل منها تختلف صيغة معاملاتها عبر ثلاث نسخ (webkit القديم، المواصفة الحالية، اقتراح W3C).
يوفر Emmet كلمتين مفتاحيتين لمولد التدرجات — lg(...) و rg(...) — تتوسعان تلقائيًا إلى 4 أسطر توافق عبر المتصفحات، تغطي جميع نسخ الصياغة الثلاث.
graph TB
A[اختصار تدرج lg] --> B[lg تدرج خطي]
A --> C[rg تدرج شعاعي]
B --> B1[lg اتجاه? + ألوان + نقاط توقف]
B1 --> B2[الاتجاه اختياري: left/right/top/bottom]
B1 --> B3[نقاط توقف لونية: #fff, #ccc 50%, #000]
C --> C1[rg + ألوان + نقاط توقف]
C1 --> C2[افتراضي من المركز للخارج]
D[التوسيع: 4 أسطر توافق عبر المتصفحات] --> D1[-webkit-linear-gradient]
D --> D2[-moz-linear-gradient]
D --> D3[-o-linear-gradient]
D --> D4[linear-gradient نسخة to]
B -.-> D
C -.-> D
style A fill:#3b82f6,color:#fff
style B fill:#10b981,color:#fff
style C fill:#8b5cf6,color:#fff
style D fill:#ef4444,color:#fff
style D1 fill:#fef3c7
style D2 fill:#fef3c7
style D3 fill:#fef3c7
style D4 fill:#fef3c7
نصيحة: اختصارات التدرجات في Emmet تستخدم كقيم لخصائص CSS — عادة داخل اختصارات
backgroundأوbackground-image(مثال:bg:lg(...)،bgc:lg(...)) ، أو تكتب مستقلة في سياق اختصار (مثال: سطر يحتوي فقطlg(...)). عند استخدامها كقيمة خاصية، يرث Emmet بذكاء اسم خاصية السطر الحالي (انظر اختصار الحرفbg+للتفاصيل).
4. التدرج الخطي lg(...): الاتجاه + نقاط التوقف اللونية
lg(...) هو اختصار لـ linear-gradient(...)، بهيكل المعاملات lg(اتجاه?، نقاط توقف لونية...).
(1) التدرج الخطي الأساسي: الاتجاه الافتراضي
عند حذف معامل الاتجاه، يفترض Emmet التدرج من الأعلى إلى الأسفل.
| الاختصار | محتوى التوسيع الرئيسي | الوصف |
|---|---|---|
lg(#fff,#000) |
-webkit-linear-gradient(top, #fff, #000);-moz-linear-gradient(top, #fff, #000);-o-linear-gradient(top, #fff, #000);linear-gradient(to bottom, #fff, #000); |
من الأعلى للأسفل (افتراضي) |
lg(#fc0,red) |
نفس الهيكل، الألوان #ffcc00 و red |
أي ألوان |
lg(#fff,#ccc,#000) |
تدرج ثلاثي الألوان | موزعة بالتساوي افتراضيًا |
(2) معامل اتجاه التدرج
معامل الاتجاه هو أول معامل اختياري لـ lg(...)، يستخدم كلمات CSS المفتاحية (left، right، top، bottom).
| الاختصار | محتوى التوسيع الرئيسي | الاتجاه |
|---|---|---|
lg(left,#fff,#000) |
-webkit-linear-gradient(left, #fff, #000);... linear-gradient(to right, #fff, #000); |
من اليسار لليمين |
lg(right,#fff,#000) |
-webkit-linear-gradient(right, #fff, #000);... linear-gradient(to left, #fff, #000); |
من اليمين لليسار |
lg(top,#fff,#000) |
-webkit-linear-gradient(top, #fff, #000);... linear-gradient(to bottom, #fff, #000); |
من الأعلى للأسفل |
lg(bottom,#fff,#000) |
-webkit-linear-gradient(bottom, #fff, #000);... linear-gradient(to top, #fff, #000); |
من الأسفل للأعلى |
نقطة أساسية: النسخ القديمة webkit/moz/o تستخدم اتجاه البداية (
left= يبدأ من اليسار)، بينما النسخة القياسية تستخدم اتجاه النهاية (to right= ينتهي عند اليمين = من اليسار لليمين). يتعامل Emmet تلقائيًا مع هذا التحويل ثنائي الاتجاه — تكتب فقط اتجاه البداية (left)، ويضيف Emmet بادئةtoمع الاتجاه المعكوس للنسخة القياسية.
(3) نقاط توقف متعددة الألوان مع معاملات الموضع
يمكن لكل نقطة توقف لونية تضمين معامل موضع (0% إلى 100%) يتحكم في مكان تواجد اللون في التدرج.
| الاختصار | محتوى التوسيع الرئيسي | الوصف |
|---|---|---|
lg(#fff,#000) |
موزعة بالتساوي (افتراضي 0% و 100%) | أساسي بلونين |
lg(#fff,#ccc 50%,#000) |
-webkit-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);... linear-gradient(to bottom, #fff 0%, #ccc 50%, #000 100%); |
3 ألوان + الأوسط عند 50% |
lg(left,#fc0 30%,red) |
... linear-gradient(to right, #fc0 30%, red 100%); |
يتحول للبرتقالي عند 30% |
lg(#fff 0%,#ccc 25%,#000 75%) |
ثلاثة ألوان، مواضع مخصصة | تحكم كامل بالموضع |
نصيحة: معاملات موضع نقاط التوقف اللونية اختيارية — عند حذفها، يوزعها المتصفح بالتساوي. لكن التحكم الدقيق (مثل "تغير مفاجئ في اللون عند 30%") يتطلب مواضع صريحة. استخدم مسافة (وليس شرطة) بين اللون وموضعه، لأن الشرطات تفسر كفواصل قيم بواسطة Emmet.
5. التدرج الشعاعي rg(...): من المركز للخارج
rg(...) هو اختصار لـ radial-gradient(...)، بهيكل مشابه لـ lg(...) لكن يفترض من المركز للخارج (شعاعي).
(1) التدرج الشعاعي الأساسي
| الاختصار | محتوى التوسيع الرئيسي | الوصف |
|---|---|---|
rg(#fff,#000) |
-webkit-radial-gradient(center, #fff, #000);-moz-radial-gradient(center, #fff, #000);-o-radial-gradient(center, #fff, #000);radial-gradient(circle at center, #fff, #000); |
من المركز للخارج |
rg(#fc0,#f00) |
نفس الهيكل، برتقالي إلى أحمر | تأثير إضاءة شعاعي |
(2) شكل وموضع التدرج الشعاعي
التدرجات الشعاعية تدعم معاملات شكل أكثر تعقيدًا (circle، ellipse) ومعاملات موضع (top left، center).
| الاختصار | محتوى التوسيع الرئيسي | الوصف |
|---|---|---|
rg(circle,#fff,#000) |
شعاعي دائري | الشكل الافتراضي |
rg(ellipse,#fff,#000) |
شعاعي بيضاوي | شكل بيضاوي |
rg(circle at top left,#fff,#000) |
دائرة عند الزاوية العليا اليسرى | موضع مخصص |
تحذير: معاملات التدرج الشعاعي المعقدة (
circle،ellipse،at) قد يكون لها اختلافات طفيفة في الدعم عبر نسخ Emmet. التدرجات الشعاعية الأساسية بلونين (rg(#fff,#000)) لديها أفضل توافق؛ اختبر المعاملات المعقدة في محررك أولاً.
6. أمثلة تطبيقية
تغطي الأمثلة الخمسة التالية السيناريوهات الأساسية لمولدات التدرجات المدمجة مع اختصارات CSS.
▶ مثال: تدرج خطي أساسي lg(#fff,#000) (الصعوبة ⭐)
التدرج الأكثر شيوعًا — أبيض إلى أسود، من الأعلى للأسفل، 4 أسطر توافق عبر المتصفحات تغطي 3 نسخ صياغة.
الاختصار:
lg(#fff,#000)
التوسيع:
background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
background: -moz-linear-gradient(top, #fff 0%, #000 100%);
background: -o-linear-gradient(top, #fff 0%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #000 100%);
الناتج:
TEXT 📖 للعرض فقطالشرح: في `lg(#fff,#000)`، `lg` هي الكلمة المفتاحية المختصرة لـ `linear-gradient`، و `#fff` و `#000` هما نقطتا توقف لونيتان (يعين Emmet تلقائيًا موضعي 0% و 100%). يتوسع Emmet إلى 4 أسطر توافق عبر المتصفحات: ① `-webkit-linear-gradient` (Chrome/Safari القديم)؛ ② `-moz-linear-gradient` (Firefox القديم)؛ ③ `-o-linear-gradient` (Opera القديم، مهمل)؛ ④ `linear-gradient` القياسي (نسخة اقتراح W3C، تستخدم `to bottom` بدلاً من `top`). هذه الأسطر الأربعة تغطي صيغة التدرج لجميع المتصفحات من 2010–2026. ملاحظة: يفترض Emmet اختصار `lg(...)` كقيمة لخاصية `background` (ويدعم أيضًا `background-image`).
▶ مثال: اتجاه التدرج lg(left,#fff,#000) (الصعوبة ⭐⭐)
تدرج أفقي — من اليسار لليمين، للتحقق من التحويل ثنائي الاتجاه لمعامل الاتجاه.
الاختصار:
lg(left,#fff,#000)
التوسيع:
background: -webkit-linear-gradient(left, #fff 0%, #000 100%);
background: -moz-linear-gradient(left, #fff 0%, #000 100%);
background: -o-linear-gradient(left, #fff 0%, #000 100%);
background: linear-gradient(to right, #fff 0%, #000 100%);
الناتج:
TEXT 📖 للعرض فقطالشرح: `left` هو معامل الاتجاه — في webkit/moz/o القديم يعني "يبدأ من اليسار" (يتقدم التدرج من اليسار لليمين)؛ في النسخة القياسية يجب تحويله إلى `to right` (ينتهي عند اليمين = من اليسار لليمين). يتعامل Emmet تلقائيًا مع هذا **التحويل الدلالي بين البداية والنهاية** — تكتب فقط اتجاه البداية (`left`، `right`، `top`، `bottom`)، ويضيف Emmet بادئة `to` ويعكس الاتجاه للنسخة القياسية. هذا التصميم يوفر عليك الاهتمام باختلافات النسخ. بعد التوسيع، يعرض المتصفح خلفية تدرج أفقي من الأبيض على اليسار إلى الأسود على اليمين.
▶ مثال: نقاط توقف متعددة الألوان lg(#fff,#ccc 50%,#000) (الصعوبة ⭐⭐)
تدرج ثلاثي الألوان مع موضع مخصص للون الأوسط — تحكم دقيق في نقطة انتقال اللون.
الاختصار:
lg(#fff,#ccc 50%,#000)
التوسيع:
background: -webkit-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: -moz-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: -o-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #ccc 50%, #000 100%);
الناتج:
TEXT 📖 للعرض فقطالشرح: في التدرج ثلاثي الألوان `#fff,#ccc 50%,#000`، `#fff` هو لون البداية (تلقائي 0%)، `#ccc 50%` هو اللون الأوسط (**موضوع صراحة عند 50%**)، و `#000` هو لون النهاية (تلقائي 100%). `50%` بعد `#ccc` هو **معامل الموضع** — يتحكم في مكان تواجد `#ccc` في التدرج. معامل الموضع واللون مفصولان بـ **مسافة** (وليس `-`)، لأن `-` هو بالفعل فاصل قيم في اختصارات CSS في Emmet. بعد التوسيع، يعرض المتصفح تدرجًا ثلاثي القطاعات: أبيض نقي عند 0% بالأعلى، رمادي فاتح عند 50% بالمنتصف، أسود نقي عند 100% بالأسفل. مواضع نقاط التوقف اللونية هي الأداة الأساسيةللمصممين لضبط تأثيرات التدرج بدقة — مثلاً، "تغير لوني مفاجئ في المنتصف عند الضغط على الزر" يتطلب مواضع صريحة.
▶ مثال: تدرج شعاعي rg(#fff,#000) (الصعوبة ⭐)
تدرج شعاعي — تدرج دائري من المركز للخارج، مثالي لتأثيرات الإضاءة والتظليل.
الاختصار:
rg(#fff,#000)
التوسيع:
background: -webkit-radial-gradient(center, #fff 0%, #000 100%);
background: -moz-radial-gradient(center, #fff 0%, #000 100%);
background: -o-radial-gradient(center, #fff 0%, #000 100%);
background: radial-gradient(circle at center, #fff 0%, #000 100%);
الناتج:
TEXT 📖 للعرض فقطالشرح: `rg(...)` هي الكلمة المفتاحية المختصرة لـ `radial-gradient(...)`، بهيكل مشابه لـ `lg(...)` لكن **يفترض التدرج من المركز للخارج**. `#fff` و `#000` هما نقطتا توقف لونيتان. يتوسع Emmet إلى 4 أسطر توافق عبر المتصفحات: ① `-webkit-radial-gradient(center, ...)` (webkit القديم)؛ ② `-moz-radial-gradient`؛ ③ `-o-radial-gradient`؛ ④ `radial-gradient(circle at center, ...)` القياسي (يستخدم `circle at center` للإشارة إلى شعاعي دائري عند المركز). التدرجات الشعاعية تستخدم عادة لتأثيرات الإضاءة والتظليل واستبدال الظلال — مثل "بقعة ضوء" عند تحويم البطاقة أو حد "تظليل" على الصور.
▶ مثال: تطبيق عملي لنمط زر كامل (الصعوبة ⭐⭐)
تمرين تطبيقي شامل — دمج جميع آليات اختصارات CSS من الدروس 11–13 (استنتاج الوحدات، الألوان، !، المطابقة التقريبية) لكتابة نمط زر كامل.
الاختصار:
bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700
التوسيع:
background-color: #2c3e50;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
الناتج:
TEXT 📖 للعرض فقطالشرح: 7 اختصارات مستقلة مكتوبة في سطر واحد، تغطي النمط الكامل للزر — `bgc#2c3e50` لخلفية زرقاء-رمادية داكنة (`#2c3e50` هو سداسي 6 أرقام محفوظ كما هو)؛ `c#fff` لنص أبيض (`#fff` يتوسع تلقائيًا إلى `#ffffff`)؛ `p10-20` لحشوة 10px أعلى/أسفل و 20px يسار/يمين؛ `bdrs4` لـ border-radius 4px؛ `tdn` مطابقة تقريبية لـ `text-decoration: none` (يزيل التسطير)؛ `fz16` لـ font-size 16px (`fz` هو اختصار font-size)؛ `fw700` لـ font-weight 700 (`fw` هو اختصار font-weight، 700 يعني غامق). الاختصار بالكامل 47 حرفًا، يتوسع إلى 7 أسطر CSS كاملة. من كتابة يدوية 7 أسطر × ~18 حرف متوسط = 126 حرفًا + 7 ضغطات Tab + 7 فحوصات فواصل منقوطة، إلى 47 حرفًا في سطر واحد. اختصارات CSS في Emmet تقلل عدد ضغطات المفاتيح بنسبة 60%، ومع اختصار التدرج بـ 4 أسطر توافق عبر المتصفحات، تتحسن الكفاءة الإجمالية 70–80 ضعفًا.
7. مثال كامل: زر متدرج + تأثير التحويم
ادمج مولد التدرجات واختصارات CSS والمطابقة التقريبية — "زر متدرج + تأثير تحويم" كامل.
▶ مثال: نمط زر متدرج كامل (الصعوبة ⭐⭐⭐)
الاختصار:
.bg:lg(left,#fff,#f0f0f0) c#333 p10-20 bdrs4 tdn fz16 fw700 curp
التوسيع:
background: -webkit-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to right, #fff 0%, #f0f0f0 100%);
color: #333333;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
cursor: pointer;
الناتج:
TEXT 📖 للعرض فقطالشرح: هذا المثال هو الختام الكبير للمرحلة 4 — يستدعي في آن واحد مولد التدرجات (`lg(left,#fff,#f0f0f0)` يتوسع إلى 4 أسطر توافق عبر المتصفحات)، استنتاج الوحدات (`p10-20` يضيف px تلقائيًا، `bdrs4` يضيف px تلقائيًا)، توسيع الألوان التلقائي (`c#333` 3 أرقام ← 6 أرقام)، المطابقة التقريبية (`tdn` ← text-decoration: none)، واختصارات الخصائص بحرف واحد (`fz` لـ font-size، `fw` لـ font-weight، `curp` لـ cursor: pointer). اختصار واحد بـ 60 حرفًا يتوسع إلى 11 سطر CSS كامل (4 أسطر تدرج + 7 أسطر أنماط أساسية). هذا "الزر المتدرج" هو أكثر مكونات واجهة المستخدم شيوعًا في صفحات هبوط SaaS ومواقع المنتجات — ضغط أنماطه في اختصار Emmet واحد هو شكل Emmet النهائي في عالم CSS. الاختصار بالكامل يقلل الكتابة اليدوية من 11 سطرًا × ~22 حرف متوسط = 242 حرفًا + 11 ضغطة Tab + 11 فحص فاصلة منقوطة إلى 60 حرفًا في سطر واحد. مع آلية بادئات المتصفح من الدرس 12 (`-bdrs4`)، يمكنك إضافة سطري webkit/moz border-radius إضافيين — لكن المتصفحات الحديثة جميعها تدعم `border-radius` أصلاً، لذا عادة تحذف عمليًا.
❓ أسئلة شائعة
lg(...) يتوسع فقط إلى 4 أسطر توافق عبر المتصفحات؟ هل يمكنني تقليله إلى 2؟lg(...)؟ هل يمكن حذف الاتجاه؟top (من الأعلى للأسفل). lg(#fff,#000) بدون اتجاه يتوسع إلى linear-gradient(top, ...) (قديم) أو linear-gradient(to bottom, ...) (قياسي) — كلاهما من الأعلى للأسفل. للاتجاهات الأخرى، يجب كتابتها صراحة: lg(left,...)، lg(right,...)، lg(bottom,...).bg+؟ كيف يختلف عن bgc؟bg+ هو اختصار توسيع الخلفية في Emmet — + تعني "مع قيمة نائبة افتراضية"، تتوسع إلى اختصار background مع عنصر نائب url() (مناسب لسيناريوهات خلفيات الصور). bgc هو فقط background-color، يتعامل مع لون الخلفية فقط. bg+ و bgi (background-image) أكثر استخدامًا مع تدرجات lg(...): bgi:lg(left,#fff,#000) يتوسع إلى صورة خلفية متدرجة كاملة. عمليًا، يوصى باستخدام bg + lg(...).transparent في اختصارات التدرجات؟lg(#fff,transparent,#000) يتوسع إلى تدرج ثلاثي الألوان يبدأ بـ #fff، شفاف في المنتصف، ينتهي بـ #000. transparent هي كلمة CSS مفتاحية قياسية — يخرجها Emmet كما هي. إذا أردت شفافية rgba، يمكنك استخدام دالة rgba(): lg(rgba(255,255,255,0),#000)، لكن دعم Emmet لاستدعاءات الدوال داخل rgba() محدود. يوصى باستخدام الألوان السداسية (مثال: #fff0) أو #fff00 (لون 4 أرقام، آخر رقمين هما ألفا).📖 ملخص
lg(...)اختصار التدرج الخطي: يتوسع تلقائيًا إلى 4 أسطر توافق عبر المتصفحات (webkit + moz + o + نسخة اقتراح W3C القياسية)rg(...)اختصار التدرج الشعاعي: نفس هيكلlg(...)، يفترض من المركز للخارج (دائرةcircle at center)- اتجاه التدرج:
left/right/top/bottomكأول معامل؛ القديم يستخدم اتجاه البداية، القياسي يضيف تلقائيًا بادئةtoمع اتجاه معكوس - نقاط توقف متعددة الألوان:
لون + مسافة + موضع%للتحكم الدقيق (#ccc 50%تعني#cccعند موضع 50%) - نمط زر كامل: 7 خصائص في سطر واحد (
bgc+c+p+bdrs+tdn+fz+fw)، تغطي الخلفية/النص/التباعد/الزوايا المدورة/الزخرفة/حجم الخط/وزن الخط - تطبيق عملي: زر متدرج + تأثير تحويم في اختصار Emmet واحد، يولد 11 سطر CSS
📝 تمارين
-
أساسي (الصعوبة ⭐): في ملف
.css، أدخل ثلاثة اختصارات تدرج:lg(#fff,#000)،lg(#fc0,red)، وrg(#fff,#000). اضغط Tab وسجل نتائج التوسيع (كل منها يجب أن يتوسع إلى 4 أسطر توافق عبر المتصفحات). احسب إجمالي الأسطر الموسعة وتحقق من أن كل سطر لديه بادئة المتصفح الصحيحة (webkit/moz/o + قياسي). -
متوسط (الصعوبة ⭐⭐): اكتب نمط زر بخلفية متدرجة باستخدام سطر اختصار Emmet واحد (8 خصائص على الأقل). المتطلبات: (أ) خلفية متدرجة باستخدام
bg:lg(left,#fff,#f0f0f0)أوbgi:lg(top,#3b82f6,#1e40af)(تدرج أزرق)؛ (ب) نص أبيضc#fff؛ (ج) حشوة 10-20؛ (د) border-radius 6px؛ (هـ) text-decoration: none؛ (و) font-size 16px؛ (ز) font-weight 600؛ (ح) cursor pointercurp(curpهو اختصار cursor: pointer). تحقق من التوسيع واشرح لماذا الخصائص الثمانية مفصولة بـ مسافات (وليس بشرطات). -
متقدم (الصعوبة ⭐⭐⭐): اكتب نمط CSS كامل "لبطاقة + تدرج + انتقال تحويم" (10 خصائص على الأقل). المتطلبات: (أ) خلفية متدرجة (
bg:lg4 أسطر توافق عبر المتصفحات)؛ (ب) border-radius 8px؛ (ج) ظل (bxsمطابقة تقريبية)؛ (د) حشوة 16-20؛ (هـ) نص رمادي داكن؛ (و) font-size 14px؛ (ز)transitionباستخدام اختصار بحرف واحد (trsأو-trs)؛ (ح)cursor: pointer؛ (ط) خاصية واحدة على الأقل تستخدم المطابقة التقريبية؛ (ي) خاصية واحدة على الأقل تنتهي بـ!important. اكتب كل شيء في سطر اختصار Emmet واحد، سجل نتيجة التوسيع (متوقع 15-20 سطر CSS)، واكتب تقرير مقارنة سرعة: "تدرج + اختصارات CSS تطبيق عملي" مقابل كتابة CSS يدويًا.
