ورقة مساعدة لتقنيات وحيل CSS العملية

مرجع منسق لتقنيات CSS العملية، وتحسينات الخطوط والطباعة عبر مختلف المتصفحات، وحيل تنسيق الشاشات المحمولة.

وضوح الخطوط والروابط الخطية (Ligatures)

تفعيل أزواج التباعد (kerning) والروابط الخطية الاختيارية للعناوين الرئيسية:

h1, h2, h3 {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

---

تأثير تدرج الألوان على النصوص (Gradient Text)

تطبيق تدرج لوني خطي داخل الحروف والخطوط مباشرة:

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

---

مخطط حدود النص الخارجي (Text Stroke)

إضافة حدود ملونة خارجية لأحرف النص:

.stroked-heading {
  -webkit-text-stroke: 1.5px #111;
  color: white;
}

---

تحسينات اللمس ومحرك WebKit على الهواتف

تعطيل تأثير التمييز الرمادي الافتراضي عند النقر وإلغاء قوائم السياق عند الضغط المطول:

* {
  /* إزالة إطار التمييز اللمسي على الهواتف */
  -webkit-tap-highlight-color: transparent;
  /* تعطيل قائمة سياق iOS عند الضغط المطول */
  -webkit-touch-callout: none;
}

/* إزالة إطار التركيز عند النقر بالماوس مع الحفاظ عليه عند استخدام لوحة المفاتيح */
a:focus:not(:focus-visible) {
  outline: none;
}

---

التمرير السلس المتسارع عتاديا (Momentum Scrolling)

.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* تمرير سلس ذو زخم حركي على متصفحات Safari القديمة */
  overscroll-behavior-y: contain;    /* منع ارتداد السحب لتحديث الصفحة */
}