مقدمة في عرض CSS التقديمي - الجزء الأول

ملخص

تتمحور لغة CSS الحديثة (2026) حول استعلامات الحاوية (Container Queries)، ومحدد :has()، وطبقات التتابع (Cascade Layers)، والتداخل الأصلي (native nesting). تظل Grid و Flexbox هما أساس التخطيط. تدير خصائص CSS المخصصة رموز التصميم (design tokens). يضيف Tailwind CSS 4 التداخل الأصلي وتحسينات في الأداء، ولكن يمكن لـ CSS العادية الآن القيام بالكثير مما يفعله Tailwind.

إذا كان آخر تعمق لك في CSS منذ بضع سنوات، فاستعد للمفاجآت. لقد تطورت CSS بشكل كبير. اللغة التي كانت تبدو محدودة ذات يوم — "مجرد تنسيق" — أصبحت الآن تتعامل مع تعقيدات التخطيط، والمنطق (:has())، ورموز التصميم، والتكيف المتجاوب الذي كان يتطلب سابقاً JavaScript أو أدوات بناء.

يغطي هذا الدليل أساسيات CSS الحديثة لعام 2026: أدوات التخطيط الأساسية التي احتجتها دائماً (Grid، Flexbox)، والميزات الثورية (استعلامات الحاوية)، وتحسينات الصيغة (التداخل الأصلي) التي تجعل كتابة CSS أكثر متعة. سواء كنت تبدأ من الصفر أو تحاول اللحاق بالركب، فإن فهم هذه الأساسيات يفتح لك آفاق البقية.

CSS Grid و Flexbox: أساس التخطيط

Grid و Flexbox ليسا ميزتين متقدمتين — بل هما أساسيتان. يستخدم كل تخطيط حديث أحدهما أو كليهما.

Flexbox: تخطيط أحادي الأبعاد

يقوم Flexbox بترتيب العناصر في اتجاه واحد (صف أو عمود).

/* Navigation bar: items in a row */
.nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between; /* Space between nav items and logo */
  align-items: center; /* Vertically centered */
}

/* Form: items in a column */
.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Responsive: row on desktop, column on mobile */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

الخصائص الرئيسية:

• flex-direction: row | column
• justify-content: يتحكم في التباعد على طول المحور الرئيسي (اتجاه الصف/العمود)
• align-items: يتحكم في المحاذاة العمودية على المحور الرئيسي
• flex-wrap: يلف العناصر إلى أسطر متعددة
• gap: المسافة بين العناصر

CSS Grid: تخطيط ثنائي الأبعاد

يقوم Grid بترتيب العناصر في صفوف و أعمدة في وقت واحد.

/* Dashboard layout */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr 300px; /* Sidebar, main, aside */
  grid-template-rows: auto 1fr auto; /* Header, content, footer */
  gap: 1rem;
  height: 100vh;
}

.header {
  grid-column: 1 / -1; /* Span all columns */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2;
  grid-row: 2;
}

.footer {
  grid-column: 1 / -1;
}

الفرق: متى تستخدم كل منهما

التخطيط	Flexbox	Grid
شريط التنقل	✓
قائمة المنتجات (عمود واحد)	✓
مدخلات النموذج	✓
لوحة التحكم (2D)		✓
شبكة بطاقات مع subgrid		✓
شريط جانبي + محتوى رئيسي		✓

تستخدم معظم التخطيطات المعقدة كليهما:

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
}

يتولى Grid هيكل الصفحة، بينما يتولى Flexbox تخطيط المكونات الفردية.

خصائص CSS المخصصة (المتغيرات)

تخزن الخصائص المخصصة قيماً قابلة لإعادة الاستخدام. وهي ديناميكية (يمكن أن تتغير في وقت التشغيل) على عكس متغيرات SASS/LESS.

الاستخدام الأساسي

:root {
  --color-primary: #0066ff;
  --color-text: #333;
  --spacing-base: 1rem;
  --radius: 0.5rem;
}

button {
  background: var(--color-primary);
  padding: var(--spacing-base);
  border-radius: var(--radius);
  color: white;
}

التنسيق الديناميكي

/* Light theme (default) */
:root {
  --bg: #ffffff;
  --text: #000000;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #ffffff;
  }
}

/* User-selected dark mode */
body.dark-mode {
  --bg: #1a1a1a;
  --text: #ffffff;
}

body {
  background: var(--bg);
  color: var(--text);
}

المتغيرات المحدودة النطاق

.card {
  --card-bg: #f5f5f5;
  --card-padding: 1.5rem;
}

.card-header {
  background: var(--card-bg);
  padding: var(--card-padding);
}

/* Different card style */
.card.featured {
  --card-bg: #ffd700;
  --card-padding: 2rem;
  /* Header automatically uses new values */
}

استعلامات الحاوية: المكونات تتكيف مع السياق

سابقاً، كانت توجد استعلامات الوسائط (media queries) فقط — وهي تقيس نافذة العرض. أما استعلامات الحاوية (Container Queries) فتقيس حاوية المكون نفسه.

/* Define a container context */
.card-container {
  container-type: inline-size;
}

/* Query the container's width */
@container (min-width: 400px) {
  .card-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container (max-width: 300px) {
  .card-content {
    display: block;
  }
}

المكون الموجود داخل شريط جانبي بعرض 250 بكسل يظهر كعمود واحد. نفس المكون في منطقة رئيسية بعرض 800 بكسل يظهر كعمودين. نفس الكود، سياقات مختلفة.

هذا أمر ثوري لأن المكونات أصبحت الآن قابلة لإعادة الاستخدام حقاً وواعية بالسياق.

محدد :has()

يختار محدد :has() العناصر بناءً على أبنائها أو أشقائها. إنه "اختيار الأب" — وهو أمر لم تكن CSS قادرة على فعله من قبل.

/* Select card if it contains an image */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
}

/* Select form if it has an error */
.form:has(.error) {
  border: 2px solid red;
}

/* Select heading followed by text */
h2:has(+ p) {
  margin-bottom: 0.5rem;
}

/* Style based on input state */
form:has(input:invalid) {
  background: #ffe0e0;
}

/* Dark mode: if user prefers dark, select background */
@media (prefers-color-scheme: dark) {
  body:has(.dark-mode-toggle:checked) {
    --bg: #1a1a1a;
  }
}

يسمح :has() بسلوك متجاوب باستخدام CSS فقط دون الحاجة لاستعلامات الوسائط.

طبقات التتابع وتداخل CSS

طبقات التتابع

تحكم في تعارضات الخصوصية باستخدام الطبقات:

/* Define layer order */
@layer reset, base, theme, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}

@layer base {
  body { font-family: system-ui; }
}

@layer theme {
  --color-primary: blue;
}

@layer components {
  .button { background: var(--color-primary); }
}

@layer utilities {
  .text-center { text-align: center; }
}

/* Utilities override components override theme—determined by layer order */

تمنع الطبقات حروب الخصوصية. فئة الخدمة (utility class) في طبقة utilities ستتجاوز دائماً مكوناً في طبقة components، بغض النظر عن الخصوصية.

تداخل CSS الأصلي

لا مزيد من تكرار المحددات:

/* Before: repetition */
.card { border: 1px solid #ccc; }
.card-header { background: #f5f5f5; }
.card-body { padding: 1rem; }

/* After: native nesting */
.card {
  border: 1px solid #ccc;

  & .header {
    background: #f5f5f5;
  }

  & .body {
    padding: 1rem;
  }

  /* Hover state */
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  /* Media query inside */
  @media (max-width: 600px) {
    flex-direction: column;
  }
}

يشير محدد & إلى الأب. هذه الصيغة أصبحت الآن جزءاً أصلياً من CSS (لا حاجة لـ Sass).

انتقالات العرض (View Transitions) API

تحريك الانتقال بين حالات الصفحة:

.modal {
  view-transition-name: modal;
}

@supports (view-transition-name: modal) {
  ::view-transition-new(modal) {
    animation: slideUp 0.5s;
  }

@keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
  }
}

عند الانتقال إلى حالة نافذة منبثقة (modal) جديدة، يقوم المتصفح تلقائياً بتحريك الانتقال بين الحالتين القديمة والجديدة.

document.startViewTransition(() => {
  updateDOM(); // Change the DOM
  // Browser automatically animates the transition
});

يخلق هذا انتقالات سلسة دون الحاجة لمنطق تحريك يدوي بـ JavaScript.

Tailwind CSS 4 مقابل CSS العادية

يدعم Tailwind CSS 4 (الذي صدر في 22 يناير 2025) الآن:

• التداخل الأصلي
• متغيرات CSS للتخصيص
• تقليل حجم المخرجات مع تحسين التخلص من الكود غير المستخدم (tree-shaking)

متى تستخدم Tailwind:

• النماذج الأولية السريعة (أدوات مساعدة متجاوبة جاهزة)
• توحيد معايير الفريق (تباعد وألوان متسقة)
• الاحتياجات المتجاوبة المعقدة (مع دعم استعلامات الحاوية)

متى تكون CSS العادية كافية:

• المواقع البسيطة والثابتة
• أنظمة التصميم التي نادراً ما تتغير
• عندما تبدو أدوات البناء مبالغاً فيها
• الفرق التي ترتاح للعمل مع CSS

مثال: نفس المكون في Tailwind مقابل CSS العادية:

Tailwind:

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
  <div className="border rounded-lg p-4 hover:shadow-lg">
    <h3 className="text-lg font-bold mb-2">Title</h3>
    <p>Content</p>
  </div>
</div>

CSS العادية مع الميزات الحديثة:

<div className="card-grid">
  <article className="card">
    <h3>Title</h3>
    <p>Content</p>
  </article>
</div>

<style>
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1rem;
  }

  .card {
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    padding: 1rem;

    &:hover {
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
  }
</style>

كلاهما خياران صالحان. اختر بناءً على احتياجات المشروع، وليس بناءً على الضجة المثارة.

@starting-style للانتقالات

تحريك العناصر عند ظهورها لأول مرة:

.toast {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 0.3s;
}

@starting-style {
  .toast {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

عندما يظهر إشعار (toast)، فإنه ينتقل من قيم @starting-style إلى القيم العادية.

ما ستتعلمه

تتعامل CSS الحديثة (2026) مع ما كان يتطلب سابقاً JavaScript أو أدوات بناء:

1. Grid و Flexbox: أتقنهما لأي تخطيط.
2. الخصائص المخصصة: رموز تصميم ديناميكية ومحدودة النطاق.
3. استعلامات الحاوية: أنماط مكونات واعية بالسياق.
4. محدد :has(): منطق CSS فقط بناءً على العناصر الأبناء.
5. التداخل الأصلي: صيغة أنظف وأكثر اختصاراً.
6. طبقات التتابع: إدارة الخصوصية.
7. انتقالات العرض API: انتقالات سلسة بين الحالات.
8. @starting-style: حركات الدخول.

لم تعد CSS مجرد تنسيق. إنها لغة قوية للتخطيط والمنطق والتفاعل. كلما تعلمت المزيد عن CSS الحديثة، قل احتياجك لـ JavaScript في العرض التقديمي.