محرر HTML أونلاين
اكتب في جهة، وشاهد في الأخرى

ماذا يفعل محرر HTML أونلاين

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

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

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

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

كيف تبقى المعاينة منفصلة عن هذه الصفحة

لا تُلصق المعاينة داخل هذه الصفحة. بدلًا من ذلك، يرسمها المحرر داخل shadow root، وهو يعمل مثل حديقة مسوّرة داخل المتصفح.

يفصل shadow root التنسيقات في الاتجاهين، كما تصف مواصفة HTML. لذلك لا تصل قاعدة h1 الخاصة بك إلى العنوان الذي فوقها، ولا تستطيع ورقة أنماطنا أن تسحق البطاقة التي تبنيها.

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

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

لماذا لا تعمل السكربتات هنا

يوقف المحرر السكربتات. هذا اختيار، لا نقص. فهو يزيل وسوم script، ويحذف onclick وكل سمة حدث أخرى، ويرفض روابط javascript:.

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

لذا يسرد التقرير كل معالج وكل وسم script أزاله. ونتيجة لذلك، لا تتساءل أبدًا لماذا لم يفعل زر شيئًا.

إن كنت تحتاج إلى بيئة لتجربة JavaScript، فهذه ليست الصفحة المناسبة. بدلًا من ذلك، ابنِ البنية والتنسيقات هنا، ثم أضف السلوك في محرر الأكواد الخاص بك.

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

اختبار التخطيط بثلاثة عروض

يستخدم المحرر عرضًا، لا اسم جهاز. تغطي الإعدادات الجاهزة 375 بكسل للهاتف، و768 للجهاز اللوحي، و1280 لسطح المكتب. إضافة إلى ذلك، يقبل الحقل المخصص أي عرض بين 200 و2560.

تستجيب استعلامات الوسائط لهذا العرض. يحوّل المحرر كل قاعدة @media لا تنظر إلا إلى العرض إلى container query على صندوق المعاينة. لذلك تعمل نقطة توقف عند 600 بكسل حين يكون العرض 600 بكسل، حتى لو كانت هذه الصفحة أعرض.

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

ومع ذلك تتسع الصفحة العريضة لشاشتك. يصغّرها المحرر إلى المساحة المتاحة، لكنه يحتفظ بعرض التخطيط الحقيقي. لذلك يبدو النص صغيرًا عند 1280، لكنه يلتف تمامًا كما يلتف على سطح المكتب.

ما الذي تسرده لوحة التقرير

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

أولًا تأتي الأعداد: كم عنصرًا في الصفحة، وكم قاعدة CSS. ثم تأتي قائمة القواعد التي لم تطابق شيئًا. فالخطأ المطبعي في اسم صنف يفشل بصمت، لأن المتصفح يتخطى القاعدة ببساطة. لذا تعطيك اللوحة اسم المحدِّد.

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

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