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

ترتيب محددات CSS حسب الخصوصية

تحدد خصوصية CSS أي تصريح متنافس يمكنه التغلب على غيره قبل النظر في ترتيب المصدر والأهمية، غير أن مقارنة قائمة طويلة من المحددات بصرياً تستغرق وقتاً وتعرض الحساب للخطأ.

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

شغّل الأداة مجانًا اطّلع على الـAPI

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

تستقبل هذه الأداة محددات CSS منفردة، وتتحقق من صحة بنيتها، وتحسب قيمة الخصوصية الثلاثية لكل منها، ثم تعيد القائمة كاملة مرتبة من الأدنى إلى الأعلى. وهي تفهم الفئات الزائفة الوظيفية الحديثة مثل :is() و:not() و:has() و:where() و:nth-child()، وتحافظ على ترتيب الإدخال الأصلي عندما يتساوى محددان في الوزن.

كيفية قراءة درجة الخصوصية الثلاثية

تستخدم كل نتيجة البنية المعروفة المؤلفة من المعرفات والفئات والأنواع. يحصي الرقم الأول محددات المعرف مثل <code>#checkout</code>. ويحصي الثاني الفئات ومحددات السمات والفئات الزائفة مثل <code>.active</code> و<code>[disabled]</code> و<code>:hover</code>. أما الثالث فيحصي محددات النوع والعناصر الزائفة مثل <code>button</code> و<code>::before</code>. لا تضيف المحددات العامة ولا عوامل الربط أي نقاط. تجري المقارنة ترتيبياً من اليسار إلى اليمين؛ فمعرف واحد يتغلب على أي عدد من القيم في العمودين الآخرين، وفئة واحدة تتغلب على أي عدد من محددات النوع عندما يتساوى عدد المعرفات. تلائم مصفوفة <code>specificity</code> المعالجة البرمجية، بينما تعرض <code>specificity_text</code> القيمة نفسها بصيغة موجزة واضحة. ترتب النتائج تصاعدياً، فتظهر القواعد القابلة لإعادة الاستخدام على نطاق واسع أولاً، وتأتي المحددات الأصعب في التجاوز أخيراً. إذا تساوت درجتان تماماً، تحافظ الأداة على ترتيب إدخالهما بدلاً من إنشاء معيار أبجدي ثانوي. يجعل هذا السلوك المستقر عمليات التشغيل المتكررة متوقعة، ويحفظ السياق المفيد الآتي من ورقة الأنماط أو قائمة المراجعة.

معالجة الفئات الزائفة الحديثة معالجة صحيحة

الفئات الزائفة الوظيفية هي الموضع الذي تكثر فيه أخطاء الحساب اليدوي. تسهم <code>:where()</code> دائماً بخصوصية مقدارها صفر، بما في ذلك المحددات الموجودة داخلها، ولذلك يمكنكم إضافة دقة بنيوية من دون جعل القاعدة أصعب في التجاوز. في المقابل، تسهم <code>:is()</code> و<code>:not()</code> و<code>:has()</code> بخصوصية الوسيطة الأعلى خصوصية، ولا تضيف نقطة مستقلة بصفتها فئة زائفة. تضيف صيغتا <code>:nth-child()</code> و<code>:nth-last-child()</code> نقطة فئة زائفة، إضافة إلى أعلى خصوصية في قائمة محددات اختيارية تلي <code>of</code>. وتدخل في الحساب أيضاً صيغ شجرة الظل مثل <code>:host()</code> و<code>::slotted()</code>. يتتبع المحلل الأقواس المتداخلة والأقواس المربعة والسلاسل المقتبسة ومحارف الإفلات، فلا يخلط بين الفواصل داخل دالة والفواصل التي تفصل عناصر المستوى الأعلى. يرجى إرسال كل عنصر في القائمة بوصفه محدداً واحداً. فالفاصلة في المستوى الأعلى تمثل عدة محددات قد تكون درجاتها مختلفة، ولذلك ترفض بدلاً من اختزالها في قيمة واحدة مضللة. تضمن هذه القاعدة الصريحة ارتباط كل عنصر إدخال بدرجة إخراج واحدة فقط.

تبسيط التتالي باستخدام القائمة المرتبة

يكون تقرير الخصوصية أنفع بوصفه أداة لإعادة الهيكلة، لا حافزاً لإنشاء محددات أشد قوة. الصقوا محددات ممثلة لمكوّن أو نظام تصميم أو ورقة أنماط قديمة، ثم افحصوا الطرف الأعلى من النتائج. تكشف القفزات الكبيرة غالباً عن معرفات أو حالات كثيرة القيود أو وسيطة قوية مخفية داخل <code>:is()</code> أو <code>:not()</code>. قد تجبر هذه المحددات الشيفرة اللاحقة على تكرار تفاصيل بنيوية لمجرد تجاوز تصريح واحد. يمكن استبدالها بفئة ذات غرض محدد، أو تخفيف السياق الاختياري بواسطة <code>:where()</code>، أو تنظيم الطبقات بحيث لا تعتمد الأولوية على تصاعد الدرجات. يفيد الطرف الأدنى أيضاً؛ إذ يسهل إعادة استخدام قواعد العناصر والأدوات الخفيفة عندما يكون دورها واضحاً. تستطيع العمليات المؤتمتة استدعاء API مقابل $0.002 للإبلاغ عن المحددات الجديدة التي تتجاوز الحد الذي اختاره فريقكم، أو تسجيل الخصوصية إلى جانب CSS المنشأ، أو عرض تشخيصات مرتبة أثناء المراجعة. يؤدي أي إدخال غير صالح إلى فشل الطلب كاملاً، وبذلك لا يخفي تقرير جزئي محدداً رديء البنية ينبغي إصلاحه أولاً. الحساب حتمي ولا يحتاج إلى اتصال بالشبكة، لذا ينتج الإدخال نفسه دائماً القيم والترتيب نفسيهما.

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

تدقيق ورقة أنماط قديمة

رتبوا المحددات حسب الوزن للعثور على المعرفات والقواعد كثيرة القيود التي تصعّب عمليات التجاوز المعتادة.

مراجعة CSS الخاص بالمكوّنات

قارنوا المحددات الجديدة بالاتفاقيات القائمة قبل دمج أي تغيير في نظام تصميم مشترك.

فرض حد أقصى للخصوصية

احسبوا الدرجات في فحص مؤتمت، وأبلغوا عن المحددات التي تتجاوز الحد الأقصى الذي اختاره فريقكم.

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

ماذا يعني كل رقم في قيمة الخصوصية؟

تحصي القيم الثلاث محددات المعرف، والمحددات الشبيهة بالفئات، والمحددات الشبيهة بالأنواع على الترتيب، وتجري مقارنتها من اليسار إلى اليمين.

كيف تحسب :where()؟

تسهم :where() وكل محتويات وسيطتها بخصوصية مقدارها صفر، مع استمرار التحقق من صحة بنية المحدد.

كيف تحسب :is() و:not() و:has()؟

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

هل يمكن أن يحتوي عنصر إدخال على فواصل؟

ليس في المستوى الأعلى. أرسلوا كل محدد منفرداً لأن أعضاء القائمة قد تكون لهم درجات خصوصية مختلفة. تقبل الفواصل المتداخلة داخل الفئات الزائفة الوظيفية المدعومة.

ماذا يحدث عندما يتساوى محددان في الخصوصية؟

يبقى ترتيب الإدخال الأصلي محفوظاً، فيكون الفرز مستقراً وحتمياً.

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

تكلفة كل طلب هي $0.002. وتعمل نسخة المتصفح محلياً مجاناً.

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/web/css-specificity-sort

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

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

curl -X POST https://api.kit.forhosting.com/web/css-specificity-sort \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"selectors":["button",".toolbar button:hover","#app .toolbar button"]}'

const res = await fetch("https://api.kit.forhosting.com/web/css-specificity-sort", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "selectors": [
      "button",
      ".toolbar button:hover",
      "#app .toolbar button"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/css-specificity-sort",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "selectors": [
        "button",
        ".toolbar button:hover",
        "#app .toolbar button"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-specificity-sort", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"selectors":["button",".toolbar button:hover","#app .toolbar button"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"selectors":["button",".toolbar button:hover","#app .toolbar button"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-specificity-sort", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "selectors": [
    "button",
    ".toolbar button:hover",
    "#app .toolbar button"
  ]
}

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

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

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

الأسعار

لكل طلب$0.002

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

الحدود

`max_items`	1000
`max_selector_length`	4096

الأخطاء

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

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