ForHosting KIT · قراءة المواقع ومراقبتها

التحقق من نطاق خصائص CSS المخصصة

تتوفر خاصية CSS المخصصة على العنصر الذي صُرّح بها فيه، وعلى العناصر المتفرعة منه ما لم ينقطع التوارث.

● Betaمجاني · داخل متصفحك

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

تقارن هذه الأداة المحدد الذي يعرّف المتغير بالمحدد الذي يستخدمه. وهي تتحقق من صحة السلسلتين، وتتعامل مع قوائم المحددات، وتبين ما إذا كان كل فرع استخدام مشمولاً بنيوياً بفرع تعريف واحد على الأقل. تساعدكم النتيجة على اكتشاف سبب شائع لاختفاء رموز التصميم قبل فحص الأنماط المحسوبة في المتصفح.

حددوا موضعي التعريف والاستخدام

أدخلوا في حقل التعريف محدد القاعدة التي تصرّح بالخاصية المخصصة، ثم أدخلوا في حقل الاستخدام محدد القاعدة التي تستدعي <code>var()</code>. فعلى سبيل المثال، يتوفر الرمز المعرّف عند <code>.theme-dark .card</code> للاستخدام عند <code>.theme-dark .card > .title</code>، لأن العنوان محدد تحت البطاقة التي تتلقى التصريح. ويُعامل التعريف عند <code>:root</code> بوصفه عاماً، لأن العنصر الجذر سلف لمحتوى المستند. يمكن أن يحتوي كلا الحقلين على قوائم محددات تفصل بينها فواصل. تقيّم الأداة كل فرع استخدام على حدة، وتشترط شمول جميع الفروع لكي تكون الإجابة الإجمالية صحيحة. كما تعرض فرع التعريف الذي طابق كل فرع استخدام مشمول، مما ييسر تدقيق القوائم الطويلة. هذا فحص للعلاقة بين المحددات، ولذلك لا تحتاجون إلى لصق ورقة أنماط أو كتلة تصريحات أو اسم الخاصية أو قيمتها. يؤدي تقديم المحددين المعنيين فقط إلى إبقاء النتيجة مركزة على نطاق التتالي، بدلاً من خلطها بترتيب المصدر أو صياغة القيمة.

افهموا قرار النطاق البنيوي

تمثل الأداة الجزء الذي يمكن استنتاجه من المحددات وحدها بشأن توفر الخاصية المخصصة. فهي تسأل عما إذا كان محدد التعريف يستطيع تعيين العنصر نفسه الذي يعيّنه محدد الاستخدام، أو أحد أسلاف ذلك العنصر. وتُحترم الشروط المركبة؛ فلا يُفترض أن تعريفاً عند <code>.card.featured</code> يشمل استخداماً لا يذكر سوى <code>.card</code>. يجب أن تظل موصلات الابن موصلات ابن، في حين يمكن لعلاقة التفرع أن تمتد عبر مركبات إضافية في محدد الاستخدام. تعمل قوائم المحددات بدائل في جانب التعريف والتزامات في جانب الاستخدام. يمنع هذا النهج المتحفظ عمداً الادعاء بأن المتغير متوفر حين لا تظهر العلاقة في نص المحددين. وقد تظل ظروف وقت التشغيل قادرة على تغيير التتالي الفعلي. لا تدخل في هذين الحقلين أمور مثل ترتيب المصدر والقواعد الشرطية وحدود Shadow DOM والأنماط المضمنة والطبقات والخصوصية وإعادات الضبط الصريحة وشجرة المستند الفعلية. اعتبروا النتيجة الصحيحة تأكيداً للاحتواء البنيوي، واستعينوا بالأنماط المحسوبة في المتصفح عندما تحتاجون إلى إثبات القيمة النهائية في مستند معروض بعينه.

عالجوا المدخلات الملتبسة بواسطة أخطاء التحقق

يُحلل كل محدد قبل المقارنة. تؤدي الفروع الفارغة في قائمة المحددات، والأقواس غير المتطابقة، والموصلات غير المكتملة، وعلامات ترقيم التصريحات، ورموز الفئة أو المعرّف أو المحدد الزائف غير المكتملة، وغيرها من الصيغ المعيبة، إلى خطأ إدخال بدلاً من نتيجة مخمّنة. يهم هذا الفرق في الأتمتة: تعني النتيجة الخاطئة أن المحددات المقدمة صالحة، لكن الاستخدام المطلوب غير مشمول بنيوياً؛ أما الخطأ فيعني أنه لم يُستنتج حكم بشأن النطاق. أبقوا الحقلين مقتصرين على المحددات. لا تضمنوهما الأقواس المعقوفة أو الفواصل المنقوطة أو تصريح خاصية مخصصة أو قاعدة CSS كاملة. تبقى المحارف المهروبة وقيم السمات المقتبسة ومحددات السمات والفئات الزائفة الدالية مجمعة أثناء التقسيم، حتى لا تُفهم الفواصل والموصلات بداخلها بوصفها صياغة في المستوى الأعلى. الخوارزمية حتمية، ولا تجري طلبات شبكة، ولها حد ثابت لطول الإدخال. لذلك يمكنكم استخدامها ضمن مرحلة lint أو مراجعة تغيير أو برنامج لترحيل رموز التصميم والحصول على النتيجة نفسها للزوج نفسه دائماً. وإذا عبّرت محددات علائقية متقدمة عن حقائق لا يحسمها إلا DOM حي، ففسروا نتيجة عدم الشمول بحذر وتحققوا منها في الترميز المستهدف.

حالات الاستخدام

تدقيق رموز السمة

تأكدوا من بقاء محددات المكونات التي تستخدم متغيرات السمة تحت المحدد الذي يفعّل تلك السمة.

مراجعة إعادة هيكلة المكونات

اكتشفوا متى يفقد محدد مكوّن أُعيدت تسميته أو نقله البادئة البنيوية المالكة لخصائصه المخصصة.

التحقق من توثيق الرموز

راجعوا أمثلة المحددات في نظام التصميم حتى تتوافق الاستخدامات الموثقة مع نطاق التعريف المعلن.

الأسئلة الشائعة

ماذا تعني النتيجة الصحيحة؟

يكون كل فرع صالح من محدد الاستخدام مساوياً بنيوياً لفرع واحد على الأقل من محدد التعريف أو واقعاً تحته.

هل تفحص الأداة HTML أو الأنماط المحسوبة لديكم؟

لا. فهي تقارن المحددات فقط؛ ولا تشمل النتيجة حالة المستند أو ترتيب المصدر أو الطبقات أو Shadow DOM أو تجاوزات القيم الصريحة.

كيف تُعالج قوائم المحددات؟

فروع التعريف بدائل. ويجب أن يطابق كل فرع استخدام مفصول بفاصلة فرع تعريف واحداً على الأقل لكي تكون النتيجة الإجمالية صحيحة.

لماذا تلقيتم خطأ إدخال بدلاً من نتيجة خاطئة؟

كان محدد واحد على الأقل معيباً من ناحية الصياغة. تُحجز النتيجة الخاطئة للمحددات الصالحة التي لا تُظهر علاقة النطاق المطلوبة.

هل يشمل التعريف عند :root جميع الاستخدامات؟

نعم. تعامل الأداة :root وhtml والمحدد العام بوصفها نطاقات تعريف عامة.

ما تكلفة طلب API؟

تبلغ تكلفة كل طلب API مقدار $0.002. تعمل نسخة المتصفح محلياً من دون إرسال طلب API.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/css-custom-property-scope-check

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/css-custom-property-scope-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"definition_selector":".theme-dark .card","usage_selector":".theme-dark .card > .title"}'

const res = await fetch("https://api.kit.forhosting.com/web/css-custom-property-scope-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "definition_selector": ".theme-dark .card",
    "usage_selector": ".theme-dark .card > .title"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/css-custom-property-scope-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "definition_selector": ".theme-dark .card",
    "usage_selector": ".theme-dark .card > .title"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-custom-property-scope-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"definition_selector":".theme-dark .card","usage_selector":".theme-dark .card > .title"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"definition_selector":".theme-dark .card","usage_selector":".theme-dark .card > .title"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-custom-property-scope-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "definition_selector": ".theme-dark .card",
  "usage_selector": ".theme-dark .card > .title"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.css_custom_property_scope_check",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←