اختبار كتلة HTML/CSS على أحجام شاشة متعددة

كيف يعمل

يُجمع HTML وCSS اللذان تدخلهما في مستند مصغّر مستقل، يُحقن في وسم <iframe> عبر السمة srcdoc. يعمل هذا الإطار في وضع «sandbox»، أي معزولًا عن بقية الصفحة: لا يستطيع تنفيذ أي سكربت (لا يُسمح بأي <script>) ولا الوصول إلى بقية الموقع، مما يحمي من أي خطر حقن خبيث من المحتوى الملصق. اختر حجمًا جاهزًا (هاتف، لوحي، سطح مكتب) أو أدخل عرضًا وارتفاعًا مخصصين لملاحظة سلوك كتلتك المتجاوبة.

هل يُنفَّذ JavaScript في المعاينة؟

لا، وهذا مقصود: الإطار في وضع sandbox دون الإذن allow-scripts، ولذلك سيُتجاهل أي <script> موجود في HTML الملصق. تُعاين فقط عملية عرض HTML وتطبيق CSS.

هل يمكنني اختبار media queries في CSS؟

نعم: تُطبَّق قواعد @media الواردة في CSS الخاص بك بصورة طبيعية بحسب العرض المحدد للمعاينة (حجم جاهز أو قيمة مخصصة)، تمامًا كما في متصفح حقيقي تُغيَّر أبعاده.

لا يُرسل HTML ولا CSS الخاصان بك إلى أي خادم: يُولَّد العرض بالكامل داخل متصفحك محليًا.