عارض HTML
الصق شيفرة HTML؛ تُعايَن حيًّا وفورًا في إطار معزول وآمن (sandbox). يُعالَج المحتوى بالكامل في متصفحك ولا يُرسَل إلى الخادم. ولأجل الأمان لا تُشغَّل الـ scripts — يُعرَض HTML وCSS فقط.
آخر تحديث:
معاينة حيّة
أدخل HTML في الحقل المجاور؛ تظهر المعاينة هنا.
تُحمَّل المعاينة داخل إطار مقيَّد بسمة sandbox: فالـ scripts والنماذج والوصول إلى الصفحة الأمّ معطّلة. ويُقيَّم HTML وCSS فقط.
متى يفيدك هذا العارض
قبل لصق مقتطف غريب في موقعك
المكوّنات الجاهزة المنسوخة من الويب تحمل أحيانًا وسومًا زائدة أو scripts غير مرغوبة. عرضها أولًا في إطار لا يشغّل الشيفرة يجعل الفحص والتنظيف يجريان بعيدًا عن صفحاتك الحية.
عند ضبط اتجاه النص العربي
أسرع مختبر لسلوك RTL: مستند المعاينة معزول ولا يرث اتجاه موقعك، فيكشف فورًا ما إذا كان مقتطفك يحمل اتجاهه بنفسه. المثال المحسوب أدناه مبني على هذه الخاصية.
عند معاينة قالب بريد
دورة عدّل-أرسل-انتظر-افتح تستهلك دقائق لكل تجربة. اللصق هنا يقصّرها إلى ثوانٍ، ويحاكي عملاء البريد في نقطة جوهرية: لا JavaScript هناك أيضًا. وغياب أنماط موقعنا عن الإطار يجعل ما تراه أقرب إلى عارض بريد حقيقي.
مثال محسوب: لماذا ينهار التخطيط العربي عند النقل
جرّب هذه الخطوات الخمس في الحقل المجاور؛ إنها أقصر درس عملي في محمولية الاتجاه.
- الصق قائمة أو جدولًا عربيًا بسيطًا من دون أي سمة اتجاه.
- لاحظ المحاذاة: النص إلى اليسار والترقيم في الجهة الخطأ، لأن مستند المعاينة افتراضه ltr ولا يرث شيئًا من موقعنا.
- أضف dir="rtl" إلى الوسم الجذر في مقتطفك.
- تنقلب المحاذاة والحواف وموضع الترقيم فورًا إلى وضعها العربي الصحيح.
- ما رأيته في الخطوة الثانية هو بالضبط ما سيحدث حين يُلصق مقتطفك في أي صفحة مضيفة لا تضبط الاتجاه.
المقتطف العربي المحمول يجب أن يحمل اتجاهه معه لا أن يستعيره من الصفحة المضيفة. والعزل الذي يمنع scripts هنا هو نفسه الذي يجعل المعاينة صادقة: لا ثيم موقعنا ولا اتجاهه يتسللان إلى شيفرتك، فترى سلوكها المجرّد كما ستراه صفحة محايدة تمامًا.
أربعة أخطاء متكررة
توقّع تشغيل JavaScript
مكوّن يبني محتواه بالسكربت سيظهر هنا هيكلًا فارغًا؛ فالإطار يمنع التنفيذ عمدًا. هذا قرار تصميم لا عطل: الأداة عارض شيفرة لا مشغّلها.
الاعتماد على مسارات نسبية
لا عنوان أساس لمستند المعاينة، فلن يُحلّ ./style.css ولا ../logo.png إلى أي شيء. ضمّن الأنماط في <style> واستخدم روابط مطلقة للصور؛ هذا تفسير المربعات الفارغة مكان الصور.
نسيان سمة الاتجاه في المقتطفات
كما في المثال أعلاه: مقتطف عربي بلا dir يعمل مصادفةً داخل موقع RTL وينكسر خارجه. اجعل السمة جزءًا من المقتطف نفسه حتى يصمد في أي بيئة.
اعتبار المعاينة اختبار توافق نهائيًا
ما يظهر هنا هو تفسير محرك متصفحك وحده. المحركات الأخرى وعملاء البريد قد يرسمون الإخراج مختلفًا؛ المعاينة تسرّع التكرار ولا تلغي الفحص الأخير في البيئات المستهدفة.
أدوات تُستعمل إلى جانبها
- مُرمّز/مُفكّك HTML / Entity رمّز النص إلى كيانات HTML أو فُكّ ترميزه. اهرب المحارف الخاصة لمنع XSS؛ في المتصفح، دون تسجيل.
- محلّل JWT حلّل قسمَي الترويسة والحمولة في JSON Web Token، وشاهد المطالبات القياسية ومدة الصلاحية. لا يغادر الـ token المتصفح.
- حاسبة ميزانية موارد Kubernetes احسب عدد العُقد التي تحتاجها وكفاءة التعبئة والتكلفة الشهرية التقديرية بناءً على طلبات الحاوية وحجم العُقدة.
- مولّد UUID ولّد UUID v4 آمنًا تشفيريًا وv7 المرتّب زمنيًا. توليد دفعي وخيارات تنسيق.
- مُرمّز/مُفكّك Base64 رمّز النص إلى Base64 أو فُكّ ترميزه. متغيّر قياسي وآمن للروابط (base64url)؛ متوافق مع UTF-8، في المتصفح.
الأسئلة الشائعة
هل يُرسَل الـ HTML الذي ألصقه إلى الخادم؟
لا. تُعايَن شيفرة HTML بالكامل في متصفحك عبر كتابتها في srcdoc لإطار؛ ولا تُرسَل إلى الخادم ولا تُخزَّن في أي مكان. وعند إغلاق الصفحة لا يبقى أثر.
لماذا لا تعمل JavaScript في المعاينة؟
تُحمَّل المعاينة في إطار مقيَّد بسمة sandbox. وهذا يمنع عمدًا تشغيل الـ scripts وإرسال النماذج والوصول إلى الصفحة الأمّ. وبذلك يصبح لصق HTML مجهول آمنًا — فالأداة عارض وليست مشغّل شيفرة.
فيمَ تفيد هذه الأداة؟
لرؤية قوالب البريد ومقاطع HTML وتخطيطات CSS والمكوّنات الساكنة بسرعة. تعدّل الترميز وترى النتيجة فورًا دون إعداد مشروع كامل.
هل تُحمَّل ملفات CSS والصور الخارجية؟
تُحمَّل الأنماط والصور المُعطاة بروابط مطلقة (https://) بقدر ما تسمح به سياسات أمان المتصفح والصفحة. ولا تعمل المسارات النسبية (./style.css) لأن المعاينة بلا عنوان أساس — وأفضل طريقة هي تضمين الأنماط داخل <style>.
لماذا تكون خلفية المعاينة بيضاء دائمًا؟
إطار المعاينة مستند معزول لا يتأثّر بثيم الموقع الفاتح/الداكن. وبذلك يظهر HTML بأنماطه الخاصّة وافتراضات المتصفح (خلفية بيضاء) — وهذه أقرب نتيجة لما سيظهر في النشر الفعلي.