جاري التحميل...

استعلامات الميزات في CSS

استعلامات الحاوية تسأل عن عرض الأب. استعلامات الوسائط تنظر إلى viewport. استعلامات الميزات تطرح سؤالاً مختلفاً تماماً: هل يفهم هذا المتصفّح هذا الـ CSS؟ مع @supports تُرسل أساساً موثوقاً، ثم تفتح التخطيط أو المحدّدات الحديثة فقط حيث تعمل.

تحسين تدريجي، لا مقامرة

استعلام الميزات بوابة قدرة. لا تحذف الأنماط القديمة — تحتفظ بتخطيط يعمل في كل مكان، ثم تضيف طبقة أغنى داخل @supports عندما يستطيع المحرّك تحليل الميزة التي تحتاجها (مثلاً display: grid أو gap على flex).

الشكل الأساسي لـ `@supports`

الشكل الشائع يختبر زوج خاصية–قيمة. إذا تعامل المتصفّح مع ذلك الإعلان، تُطبَّق القواعد المتداخلة:

Unlock Grid only when Grid is understood

css

.card-list {
display: block;
}

.card-list .card {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}

@supports (display: grid) {
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

.card-list .card {
margin-bottom: 0;
}
}

خارج الكتلة تتراص البطاقات بهامش بسيط. داخل @supports (display: grid) تصبح نفس القائمة شبكة متجاوبة — المحرّكات القديمة تبقي التكديس؛ الحديثة تحصل على الشبكة.

دمج الشروط: `and` و`or` و`not`

يمكنك طلب عدة ميزات معاً، أو قبول بدائل، أو عكس الاختبار:

and, or, and not in feature queries

css

@supports (display: grid) and (gap: 1rem) {
.toolbar {
display: grid;
grid-auto-flow: column;
gap: 0.75rem;
align-items: center;
}
}

@supports (display: flex) or (display: grid) {
.cluster {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
}

@supports not (display: grid) {
.card-list .card {
max-width: 36rem;
}
}

and يضيّق البوابة (يجب أن يمرّ الاثنان). or يوسّعها. not يصمّم مسار عدم الدعم — مفيد لبديل متعمّد، بشرط أن يبقى ذلك البديل صادقاً وواضحاً.

اختبر المحدّدات بـ `selector()`

بعض الميزات محدّدات وليست خصائص. لفّها داخل selector() ليسأل الاستعلام: «هل تستطيع تحليل هذا المحدّد؟»

Gate styles that need :has()

css

.nav a {
color: #0f172a;
text-decoration: none;
}

@supports selector(:has(*)) {
.nav:has(a:focus-visible) {
outline: 2px solid #2563eb;
outline-offset: 4px;
}

.card:has(img) .title {
font-weight: 700;
}
}

بدون selector()، وضع :has() عارياً داخل @supports ليس النمط الموثوق. معه، المتصفّحات التي تفتقد :has() تتخطى القواعد المحسّنة فقط وتُبقي أنماط الروابط الأساسية.

من يسأل أي سؤال؟

📊 Media, container, and feature queries

السؤال الذي تطرحه	الأفضل لـ	الأداة المعتادة
ما عرض viewport / سياق الجهاز؟	غلاف الصفحة، نقاط التوقف	`@media (…)`
ما عرض هذا الأب حول المكوّن؟	بطاقات في خانات غير متساوية	`@container (…)` بعد `container-type`
هل يدعم المتصفّح هذا الـ CSS؟	التحسين التدريجي	`@supports (…)` / `selector(…)`

هذه الأدوات تتراص بوضوح: الوسائط للصفحة، الحاوية للخانة، @supports للقدرة. لا تستخدم @supports لتقليد نقطة توقف، ولا @media لتقليد فحص ميزة.

الأساس أولاً، ثم التحسين

نمط عملي يُبقي المظهر المشترك خارج البوابة، ثم يرقّي التخطيط داخلها:

Shared skin outside; enhanced layout inside

css

.feature-panel {
padding: 1.25rem;
border-radius: 0.75rem;
background: #f8fafc;
color: #0f172a;
}

.feature-panel .lead {
margin: 0 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5;
}

.feature-panel .actions {
display: block;
}

.feature-panel .actions a {
display: inline-block;
margin: 0.25rem 0.5rem 0.25rem 0;
padding: 0.5rem 0.875rem;
border-radius: 0.5rem;
background: #e2e8f0;
color: inherit;
text-decoration: none;
}

@supports (display: flex) and (gap: 0.5rem) {
.feature-panel .actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.feature-panel .actions a {
margin: 0;
}
}

كل متصفّح يحصل على الحشو والطباعة والروابط القابلة للنقر. Flex وgap يظهران فقط عندما يُفهم الاثنان — بلا فجوة فارغة إن غاب أحدهما.

Nesting مع `@supports`

قطع Modern Toolkit تتجمّع. Nesting ينظّم المحدّدات؛ @supports ما زال يملك بوابة القدرة:

Nesting inside a support block

css

.pricing {
padding: 1rem;
border: 1px solid #e2e8f0;
}

@supports (display: grid) {
.pricing {
display: grid;
gap: 1rem;

& .tier {
padding: 1rem;
background: #fff;
}

& .tier .price {
font-size: 1.5rem;
font-weight: 700;
}
}
}

إن لم يُدعم nesting نفسه، أبقِ معادلاً مسطّحاً في الخارج أو اقبل أن الشكل المتداخل جزء من مسار التحسين — نفس عقلية التحسين التدريجي.

جرّب بنفسك

صمّم قائمة كتكديس عمودي بسيط، ثم لفّ تخطيط Grid داخل @supports (display: grid).
اطلب gap مع and حتى لا يُطبَّق تباعد flex/grid نصفاً.
أضف @supports not (display: grid) مع بديل max-width واضح — تأكد أن المسارين يبدوان مقصودين.
اقفل قاعدة :has() بـ @supports selector(:has(*)).
قاوم نقل كل الأنماط البصرية داخل @supports؛ اترك لون العلامة والطباعة في الأساس.

أخطاء شائعة

وضع الوحيد تخطيطاً صالحاً داخل @supports بلا أساس — المتصفّحات غير الداعمة ترى صفحة مكسورة
كتابة @supports (display) بلا قيمة — استعلامات الميزات تحتاج زوج خاصية–قيمة (أو selector(…))
استخدام @supports حيث مكان @media (أو العكس) — القدرة ≠ عرض viewport
اختبار خاصية يعتمد عليها الأساس أصلاً — اقفل التحسين فقط
أكوام عميقة من @supports المتداخل لمكاسب صغيرة — فضّل طبقة تحسين واحدة واضحة

ملخّص

@supports يقفل CSS حسب قدرة المتصفّح (استعلامات الميزات)
اختبر بـ (property: value)، ادمج بـ and / or / not، واستخدم selector() للمحدّدات
أبقِ أساساً متيناً؛ حسّن عندما يوجد الدعم
تذكّر الثلاثي: @media → viewport، @container → حجم الأب، @supports → القدرة
Modern Toolkit ينتهي هنا — الوحدة التالية: إمكانية الوصول والختام (accessibility)

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة