أدوات المطورين · محرر HTML WYSIWYG
الأنماط المضمنة مقابل الفئات: قراءة HTML الذي ينتجه المحرر المرئي
· كيف يعمل
أتش تي أم أل المغلق contenteditable
يشرح كيف تتحول خيارات التنسيق المرئي إلى علامات أو أنماط مضمنة أو لا شيء على الإطلاق، وكيفية تكييف هذا الإخراج مع موقع يعتمد على ورقة الأنماط.
يبدو المقتطف صحيحًا حتى يتوافق مع ورقة الأنماط الخاصة بك - يتم فتحه بمخرجات المحرر التي تتعارض مع الموقع CSS
يمكن أن يبدو الجزء صحيحًا في التطبيق المصدر لأن سمة النمط الخاصة به تفوز محليًا، ثم تتعارض مع سمة الوجهة أو تفقد تلك السمة أثناء النشر. اختار ToolAcre عدم إجراء عرض تقديمي مضمن. تسقط القائمة المسموح بها النمط والفئة في كل مكان، تاركة العناصر الهيكلية والدلالية المدعومة للوجهة للأسلوب.
هذه السياسة تجعل المعاينة متواضعة عن عمد. يظل من الممكن التعرف على العنوان أو القائمة أو العبارة القوية، لكن الألوان والخطوط والمسافات وفئات نظام التصميم المنسوخة اختفت. من الأسهل التفكير في المقتطف المنظف، على الرغم من أنه لا يمكنه إعادة إنتاج كل مظهر مصدر أو يعمل كمكون نمطي مستقل بذاته.
توجد ثلاثة تمثيلات بشكل عام؛ يحتفظ هذا المحرر بالعلامات الدلالية ويزيل النمط والفئة
يمكن لـ HTML التعبير عن المعنى باستخدام العناصر، أو العرض التقديمي المحلي باستخدام سمات النمط، أو العرض التقديمي القابل لإعادة الاستخدام مع أسماء الفئات التي يتم تفسيرها بواسطة ورقة أنماط. هذه الآليات ليست قابلة للتبديل. العنصر القوي يقول شيئًا عن الأهمية؛ النمط الأحمر يحدد اللون فقط؛ الفصل يعني فقط ما تحدده ورقة أنماط معينة.
يحتفظ هذا المحرر بمجموعة فرعية دلالية ويرفض قناتي العرض التقديمي. حتى الفئة غير الضارة تكون غير معروفة للقائمة المسموح بها، لأن الموقع المتلقي - وليس ToolAcre - يمتلك تعريفات الفئة. يقوم تقرير الإزالة بتسمية السمة المهملة حتى يتمكن الكاتب من التمييز بين التنظيف المتعمد والتغيير المرئي غير المبرر.
لماذا يرفض هذا المحرر الأنماط المضمنة بدلاً من الحفاظ على العرض التقديمي القائم بذاته
يحتفظ العديد من المحررين بالأنماط المضمنة لأن تلك الإعلانات تنتقل مع جزء ملصق دون الحاجة إلى ورقة أنماط خارجية. ToolAcre تقوم بالعكس: سمة النمط واسعة بما يكفي لإنشاء عرض غير متوقع وأسطح URL تحمل CSS، بينما تحتاج أداة الصياغة هذه إلى نص منظم فقط.
تتضمن الاختبارات قيمة نمط تحتوي على JavaScript على شكل URL وتثبت اختفاء سمة النمط بأكملها. وهذا دليل على عامل التصفية الضيق، وليس ادعاءً بأن كل حمولة CSS المحتملة قد تم تصنيفها بشكل مستقل. يؤدي عدم إدراج أي نمط في القائمة المسموح بها على الإطلاق إلى تجنب الحفاظ على معقم جزئي CSS في هذه الوحدة.
مثال عملي: التنسيقات التي يقدمها شريط الأدوات هذا بالفعل
يوفر شريط الأدوات نوعين من القوائم بالخط العريض والمائل وتنسيقًا واضحًا وخيارات الحظر والروابط وإلغاء الارتباط. يتم تطبيع الإخراج الغامق والمائل نحو القوي و em. تتضمن اختيارات الكتل الفقرة، ومن h1 إلى h4، والاقتباس، وما قبل. لا يوجد منتقي الألوان أو محدد الخط أو إجراء المحاذاة أو حقل الفئة.
قم بتطبيق عناصر التحكم هذه على فقرة نموذجية وافحص المصدر. المقارنة المفيدة هي بين المعنى المقصود والعناصر المنبعثة: يجب أن يصبح الاقتباس عبارة عن اقتباس، ويمكن استخدام التباعد الشبيه بالرمز قبل، ويجب أن يكون العنوان عنوانًا. لا تستنتج دعمًا للعلامات المسطرة أو المرتفعة أو غيرها من العلامات المسموح بها لمجرد أن الوضع المصدر قد يحتفظ بها.
تكييف الإخراج يعني تصميمه في الوجهة؛ لا يمكن تأليف الطبقات هنا
يبدأ التكيف CMS بعد التصدير. أضف فئات الوجهة في CMS، أو قالب مكون أو تحويل تمت مراجعته حيث تكون تعريفاتها معروفة. لا يمكن لـ ToolAcre ترجمة الإعلانات المضمنة غير المعروفة إلى رموز مميزة خاصة بالمشروع، ولا يمكنه التحقق من وجود فئة ما في ورقة أنماط الإنتاج الخاصة بك.
احتفظ بالعلامات الدلالية حيث تتطابق مع المحتوى. تؤدي إزالة البنية القوية أو البنية الرأسية فقط لجعل كل عقدة ذات امتداد محدد إلى عكس فائدة التنظيف. يجب أن تحدد الطبقة الوجهة المظهر، بينما تحمل المسودة الفقرات والتسلسل الهرمي والقوائم والاقتباسات والتعليمات البرمجية والروابط التي تظل ذات معنى بدون موضوع.
قد تناسب الأنماط المضمنة مسارات عمل أخرى، لكن لا يتم إخراجها بواسطة هذه الأداة
يمكن أن تكون الأنماط المضمنة ضرورية في الأنظمة التي لا تحتفظ بورقة أنماط مشتركة أو تقوم بتحميلها، خاصة بعض مسارات إنتاج البريد الإلكتروني. ومع ذلك، لا يوفر هذا المستودع أي معالج توافق للبريد الإلكتروني ولا يصدر أي سمة نمط. يجب على الكاتب ترجمة المسودة النظيفة من خلال سير عمل خاص بالبريد الإلكتروني واختباره لاحقًا.
يمكن أن تحتوي عمليات التضمين لمرة واحدة على قيود مماثلة، لكن هذا لا يؤدي إلى توسيع عقد هذا المحرر. يتضمن المستند الذي تم تنزيله ورقة أنماط معاينة ثابتة من تأليف ToolAcre حول علامات الجسم المعقمة؛ لا يؤدي نسخ الجزء إلى نسخ هذا الغلاف أو CSS الخاص به. فحص القطعة الأثرية الدقيقة التي يتم تسليمها إلى الوجهة.
ما لا يغطيه هذا — CSS تصحيح الأخطاء المحددة، أو رموز التصميم المميزة، أو أدوات التحويل التلقائية
لا تقوم هذه المقالة بتصحيح أخطاء خصوصية CSS أو الرموز المميزة لتصميم الخريطة أو الأنماط المضمنة تلقائيًا أو التعهد بتكافؤ وحدات البكسل. كما أنه يتجنب القول بأن العلامات الدلالية تفرض إعلانًا معينًا لقارئ الشاشة أو ترتيب البحث. تعمل الدلالات على تحسين البنية، في حين يظل العرض والتفسير الفعليان يعتمدان على البيئة الاستهلاكية.
إن المعاينة في وضع الحماية عبارة عن سطح فحص معروض، وليست نموذجًا لورقة الأنماط المباشرة الخاصة بك. يتم تثبيته على سمة مستند خفيفة ولا يمنح أي نصوص برمجية أو نماذج أو وصول من نفس الأصل. لا يمكن للمعاينة ذات المظهر النظيف أن تثبت أن نفس الجزء آمن أو صحيح بصريًا في كل نظام نشر.
الوجبات الجاهزة: اقرأ المخرجات، ثم قرر - يلخص الاختيار وكيف يتيح لك محرر ToolAcre HTML WYSIWYG رؤية العلامات قبل تحديد ما تريد الاحتفاظ به
اقرأ المخرجات، ثم قرر الوجهة. ToolAcre يحول المواد الملصقة ذات النمط عمدًا إلى مفردات دلالية أصغر، ويسجل عمليات الإزالة ويعرض المصدر للمراجعة. يمنع سير العمل هذا العرض المضمّن العرضي من أن يصبح دينًا تقنيًا غير مرئي مع قبول احتمال انخفاض الدقة المرئية.
اختبر باستخدام محتوى تمثيلي بدلاً من حملة غير منشورة بأكملها. تأكيد العناوين والقوائم والتأكيدات والروابط؛ ثم قم بتطبيق الفصول المعتمدة حيث سيعيش المحتوى. إذا كان النقل المتطابق مع وحدات البكسل هو المطلب، فإن سياسة عدم النمط الخاصة بهذه الأداة تعتبر غير متطابقة، وليست ميزة مخفية في انتظار التمكين.