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

إنشاء وسم meta لنظام الألوان وخاصية CSS

يحوّل هذا المولّد اختياركم لدعم الألوان إلى تصريحين جاهزين للنسخ: عنصر meta بلغة HTML المخصّص لرأس المستند، وخاصية color-scheme المطابقة في CSS.

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

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

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

اختاروا الفاتح عندما لا تدعم الصفحة سوى الواجهة الفاتحة، والداكن عندما لا تدعم سوى الواجهة الداكنة، أو كليهما عندما تكون جميع المكوّنات مصممة للمظهرين. تكون النتيجة حتمية وموحّدة وجاهزة للقوالب وأوراق الأنماط والمواقع الثابتة ومكتبات المكوّنات ومسارات البناء.

صرّحوا فقط بأنظمة الألوان المدعومة فعلياً

يمثل تصريح color-scheme وعداً بشأن الصفحة، وليس أداة تحول السمة تلقائياً. اختاروا الفاتح فقط عندما تظل عناصر التحكم والخلفيات والنصوص والحدود والصور وحالات التركيز قابلة للاستخدام في العرض الفاتح. واختاروا الداكن عندما تكون العناصر نفسها معدّة للعرض الداكن. اختاروا كليهما عندما تعمل الواجهة كاملة في النظامين. يحوّل المولّد هذا الاختيار إلى <code>light dark</code>، مع وضع الفاتح أولاً بوصفه المفضّل. الدقة مهمة لأن المتصفح قد يستخدم هذه المعلومة عند عرض عناصر التحكم الأصلية وأشرطة التمرير وخلفية المستند. قد يؤدي تصريح أوسع من الواقع إلى عناصر غير متناسقة أو ومضات غير مقروءة. راجعوا الحقول المعطلة والتعبئة التلقائية ورسائل التحقق وتحديد النص وكتل الشفرة والأدوات والأيقونات ذات الألوان الثابتة. أفضل قيمة هي أضيق وصف صادق لما يدعمه المنتج المنشور. تنسّق الأداة ذلك الوصف بصورة ثابتة، أما التصميم والاختبار فيثبتان صحته.

ضعوا HTML وCSS الناتجين في موضعهما الصحيح

ضعوا عنصر meta داخل <code><head></code> في المستند، ويفضل أن يكون مبكراً بما يكفي ليقرأه المتصفح قبل رسم جزء كبير من الواجهة. يكون الوسم الناتج كاملاً، ولذلك يمكن إدراجه في مستند HTML ثابت أو تخطيط معروض على الخادم أو إعدادات الرأس في مولّد المواقع. ضعوا تصريح CSS في القاعدة التي تمثل النطاق المقصود. يكون ذلك عادة <code>:root</code> للمستند كله، بينما يمكن للمكوّن تطبيق الخاصية على جذره. يعيد المولّد التصريح من دون محدد كي يصلح مع CSS العادي والمعالجات المسبقة ووحدات CSS وكائنات الأنماط. تستخدم نتيجتا HTML وCSS القيمة الموحّدة نفسها، فتمنعان التعارض بين البيانات الوصفية والأنماط. يمكن استعمالهما معاً لتوفير إشارة مبكرة وقيمة صريحة في التدرج، أو استعمال النتيجة التي تتطلبها البنية فقط. بعد الإدراج، افحصوا المصدر النهائي وCSS المجمّع، فقد تغيّر أطر العمل ومديرو الرأس وأدوات التصغير والتصريحات المكررة القيمة التي تصل إلى المتصفح فعلياً.

افصلوا بين إعلان الدعم واختيار السمة

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

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

إعداد رأس صفحة جديدة

أنشئوا عنصر meta صحيحاً لصفحة ثابتة أو تخطيط يعرضه الخادم من دون حفظ الصياغة الدقيقة.

توحيد CSS والبيانات الوصفية

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

أتمتة الهيكل الأولي للسمات

استخدموا النتيجة الحتمية في مولّد المشاريع أو التوثيق أو قوالب المكوّنات أو عمليات البناء القابلة للضبط.

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

ما الذي ينتج عند اختيار النظامين؟

ينتج القيمة light dark ووسم meta يحمل هذا المحتوى وتصريح CSS مطابقاً لخاصية color-scheme.

هل تنشئ هذه الأداة سمة داكنة؟

لا. إنها تعلن الأنظمة المدعومة؛ ولا يزال عليكم إعداد الألوان والمواد والحالات واستراتيجية اختيار السمة.

هل أستخدم وسم meta أم خاصية CSS أم كليهما؟

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

هل يمكن حذف النظام والاعتماد على قيمة افتراضية؟

لا. الاختيار مطلوب لأن القيمة الضمنية قد تصف دعم الصفحة بصورة غير صحيحة.

كم تبلغ تكلفة استدعاء API؟

تبلغ تكلفة كل طلب API مقدار $0.002. ويمكن لتجربة الويب تشغيل المنطق الحتمي نفسه محلياً.

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/web/color-scheme-meta-generate

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

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

curl -X POST https://api.kit.forhosting.com/web/color-scheme-meta-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"scheme":"both"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-scheme-meta-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "scheme": "both"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-scheme-meta-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "scheme": "both"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-scheme-meta-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"scheme":"both"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"scheme":"both"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-scheme-meta-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "scheme": "both"
}

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

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_scheme_meta_generate",
  "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 الكامل ←