تخطيط CSS بدون عرض ثابت

Question

أنا لست خبيرًا في CSS بأي شكل من الأشكال؛أعرف ذلك إلى حد ما ولكن ليس بعمق كبير؛تعويم وIE6 يجعلني أبكي.لذلك أنا متحمس دائمًا لرؤية ما يمكن أن يفعله الناس به.

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

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

أو ربما لا أفهم ذلك ويمكنك إنشاء تخطيطات تشبه الجدول في CSS - والتي تعمل في IE6 - دون الكثير من الألم في المؤخرة؟هل هناك أمثلة على مثل هذه المواقع؟

تحديث:نعم أعرف عن فصل المحتوى والأسلوب.في الواقع، أنا مهووس بـ DRY وSRP وغيرها من الأشياء التي يجب القيام بها في التصميم.لهذا السبب حاولت حقًا القيام بأشياء في CSS؛ولكن إذا كان الأمر أصعب بكثير وغير موثوق به من الجداول، لدرجة أنه مكتوب في كتب مثل المذكورة أعلاه، فلماذا نحاول جاهدين؟أنا لا أقول إن كل شيء يجب أن يتم في الجداول؛ولكن إذا كان حقا أسهل بدلاً من CSS - لماذا أفضّل CSS على الحل البسيط الذي يمكن التنبؤ به؟

وهذا يعني أنني لا أقول أنه يجب عليك استخدام الجداول دائمًا.ضع في اعتبارك تخطيط الصفحة الرئيسية - فهو مستقل ولا يؤثر على الصفحات الأخرى، ويمكنني التبديل من CSS إلى الجداول والعودة خلال 20 دقيقة (في الواقع لقد فعلت ذلك بالفعل) دون أي مشكلة - لماذا يجب أن ألتزم بـ CSS على الرغم من أن الجداول موجودة لا ضرر؟

تحديث:لقد وجدت أن هذا ملخص جيد جدًا لما كنت أحاول قوله: http://www.flownet.com/ron/css-rant.html.والمناقشة http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments.

ولمن يهمه الأمر، إليك مقالة أفضل: http://kv5r.com/articles/dev/layouttables1.asp

Answer 1

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

عند استخدام الجداول للتخطيط، تأكد من استخدام الأنماط width: 100%; table-layout: fixed (و <col> مع النمط width) حتى تتمكن المتصفحات من وضع الجدول بشكل صحيح من البداية (مما يعمل على إصلاح إحدى مشكلات سهولة الاستخدام التي واجهتها تخطيطات الجدول)، وحتى لا تعتمد على تخمين عرض التخطيط التلقائي السيئ إلى حد ما في IE.

على الرغم من أنني أفضل بالتأكيد CSS للتخطيط حيثما كان ذلك ممكنًا، ويمكن تحقيق معظم تخطيطات الموقع البسيطة بشكل معقول باستخدام CSS فقط (خاصة الآن IE5 ونموذج Quirky Box الخاص به)، هناك بعض الحالات التي لا يمكن فيها اختراق CSS والجداول.والحالة الشائعة هي الأشكال المعقدة ذات عرض السائل.

المشكلة الأكثر أهمية هي عدم القدرة على قول أشياء مثل width: 100%-10em للحصول على عمود يمثل عرض إطار العرض مطروحًا منه الحجم الثابت لعمود آخر.بالنسبة للحالات البسيطة، يمكنك التغلب على ذلك باستخدام الهوامش وتقسيم القسم المجمّع، ولكن بمجرد البدء في إعادة ترتيب العناصر الموجودة على صفحتك وإضافة أغلفة متعددة فقط لتشغيل تخطيط CSS، فإنك تخلط بالفعل بين العرض التقديمي و المحتوى:لا تختلف كثيرًا عن الجداول.

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

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

Answer 2

القي نظرة على يامل و السوائل 960 جرام.كلاهما يساعدك كثيرًا في التخطيطات عبر المتصفحات.تخطيطات الجدول ليست الحل وسوف يختفي IE6 عاجلاً أم آجلاً.

Answer 3

هناك سبب يجعل جداول HTML سيئة لأي شيء آخر غير البيانات الجدولية.HTML هي لغة ترميزية لمحتوى البيانات، وبالتالي يجب أن تحتوي على مجموعات من البيانات الفعلية، وليس تخطيط تلك البيانات.من المفترض أن يكون CSS مخصصًا بالكامل لأغراض التخطيط والأسلوب؛ومن هنا اسمها.لذلك، يجب أن يحتوي CSS على الشكل والمظهر الكامل لصفحة الويب بينما يحتوي HTML على بنية البيانات؛وأبدا يجب أن يلتقيا.

إن القيام بكل شيء في الجداول أمر سيء لسبب ما.

يجب أن تفكر في الأمر على أنه التجريد بين الأسلوب والمحتوى ويمكنك الحصول على ملخص جيد من هنا: http://www.alistapart.com/articles/separationdilemma/

أيضًا في الإجابة المباشرة على سؤالك، انتقل إلى "A List Apart" وابحث في مقالاتك.إنها تصف نوعًا ما الرحلة التي أنت على وشك القيام بها هنا: http://www.alistapart.com/articles/journey/

لماذا يجب أن أفضّل CSS على الحل البسيط والمتوقع؟

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

Answer 4

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

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

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

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

أنت على حق في أن CSS له عيوبه.ولكن الجداول لديها الكثير، والتي هي أسوأ من ذلك بكثير.

Answer 5

السبب وراء عدم رغبتك في إنشاء علامات تستخدم الجداول كتخطيط هو الفصل بين التصميم والمحتوى.

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

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

Answer 6

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

لقد قمت بإنشاء نموذج (تدفق من أعلى إلى أسفل بصريًا):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

ثم أراد العميل أنبوبًا أكثر تنظيماً مثل هذا:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

نظرًا لأنني لا أستخدم جدولًا من النوع TR TD، فيمكنني بسهولة (تقريبًا) تحويل البنية باستخدام تعديل CSS وتغييرات طفيفة في علامات HTML.