يحدث طفحان المحتوى overflow عندما يكون حجم المحتوى أكبر من أن يتسع له العنصر، لهذا سنتعلم في هذا المقال عن ماهية الطفحان وكيفية إدارته.
ننصحك قبل المتابعة في قراءة هذه المقال أن:
- تطلع على أساسيات استخدام الحاسوب وتصفح الويب.
- تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات.
- تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML.
- تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS.
ما هو الطفحان؟
يُعد كل عنصر من وجهة نظر CSS بمثابة صندوق، ويمكن تحديد أبعاد هذا الصندوق باستخدام الخاصيتين width و height، أو الخاصيات المنطقية المرتبطة بها inline-size و block-size. يحدث الطفحان عندما يضم صندوق العنصر كميةً كبيرةً من المحتوى لا يمكن استيعابها، لهذا السبب تؤمن CSS أدوات مختلفة لإدارة طفحان المحتوى. ستصادف خلال مسيرة تعلمك لهذه اللغة وخاصة فيما يتعلق بالتخطيطات الكثير من حالات الطفحان.
تفادي CSS لخسارة البيانات
لنلق نظرةً على المثالين التاليين اللذين يعرضان السلوك الافتراضي للغة CSS في حالة الطفحان؛ إذ يعرض المثال الأول صندوقًا له ارتفاع محدد بالخاصية height، ونضيف إلى هذا الصندوق محتوًى يتجاوز المساحة المتاحة ضمنه. سيطفح المحتوى خارج الصندوق ويقع على الفقرة النصية التي تليه.
نضع في المثال التالي كلمةً واحدةً في الصندوق، وقد جُعل الصندوق صغيرًا جدًا لهذا ستخرج بعض حروفها خارج الصندوق:
قد تتساءل عن سبب هذا السلوك الفوضوي الذي تتبعه لغة CSS وهو عرض المحتوى خارج المساحة التي يُفترض أن تُعرض فيها. لماذا لا تُخفي ببساطة هذا المحتوى الفائض؟ لماذا لا تغير أبعاد الصندوق ليتسع للمحتوى؟
لا تخفي CSS المحتوى طالما أن هناك إمكانية لذلك، لأن ذلك سيسبب فقدان البيانات، وقد لا تعرف أن هناك بيانات مفقودة، فإذا اختفى زر "إرسال" في نموذج ويب، لن يتمكن أحد من إكماله وقد يسبب ذلك مشكلة كبيرة، لهذا تطفح البيانات في CSS كي تُرى، وهكذا قد يلاحظ الزائر غالبًا وجود مشكلة ما، وفي أسوأ الحالات سيخبرك بأن المحتوى متداخل في صفحتك.
إذا حددت حيّز width أو ارتفاع صندوق عنصر ما من خلال الخاصيتين width أو height، ستثق CSS بأنك تعرف ما تفعله، إذ تفترض أنك تدبرت مسبقًا أمر أي طفحان قد يحدث. يسبب غالبًا تحديد أبعاد الصندوق مشاكل عندما يحتوي العنصر نصًا، فقد يكون النص أكبر مما قدّرت عندما صممت الصفحة أو قد يكون حجم خط الكتابة أكبر (في الحالة التي يزيد فيها المستخدم حجم الخط).
إذا أردت عمومًا حجمًا بأبعاد محددة لصندوق العنصر، لا بد أن تتعلم كيفية إدارة الطفحان بنفسك وهذا ما سنراه تاليًا.
الخاصية overflow
تساعدك الخاصية overflow في التحكم بطريقة طفحان محتوى العناصر، إذ تملي هذه الخاصية على المتصفح كيفية التصرف عند حدوث الطفحان. القيمة الافتراضية لهذا الخاصية هي visible أي سيُعرض المحتوى حتى لو طفح خارج الصندوق.
إذا أردت اقتصاص المحتوى الذي يطفح يمكنك ضبط قيمة هذه الخاصية على overflow: hidden، فهي تخفي كما يوحي اسمها النص الذي سيطفح، لكن انتبه إلى اختفاء بعض البيانات في هذه الحالة، فلا تستخدم هذه القيمة إلا إذا كنت متأكدًا أن إخفاء هذه البيانات لن يسبب مشكلة.
قد تجد -بدلًا من ذلك- أن إضافة شريط تمرير إلى المحتوى عند الطفحان سيفى بالغرض، لهذا يمكنك استخدام القيمة overflow:scroll، وعندها سيعرض المتصفح دائمًا أشرطة تمرير حتى لولم يكن حجم النص كبيرًا ويسبب طفحان. تتيح هذه الطريقة ميزة المحافظة على تخطيط الصفحة بدلًا من إخفاء أو إظهار أشرطة التمرير وفقًا لحجم المحتوى.
جرّب أن تحذف بعض المحتوى في محرر الشيفرة التفاعلي التالي ولاحظ كيف يبقى شريطي التمرير حتى لو لم يكن هناك حاجة لوجودهما.
احتجنا في المثال السابق إلى شريط التمرير العمودي y فقط لكن كانت النتيجة ظهور شريطي التمرير، لهذا يمكنك استخدام الخاصية overflow-y بدلًا من overflow وإسناد القيمة scroll لها لتحصل على المطلوب:
يمكنك أيضًا تمرير المحتوى وفق المحور الأفقي x عبر استخدام الخاصية overflow-x على الرغم من أنها طريقة غير محبّذة لعرض أسطر طويلة، فلو كان لديك سطر طويل ضمن صندوق صغير، فكرّر باستخدام خاصيات أخرى، مثل word-break أو overflow-wrap. إضافةً إلى ذلك، ستجد في أساليب CSS المتبعة لتحديد أبعاد العناصر الكثير من الأفكار المناسبة لإنشاء صناديق تستوعب حجم المحتوى المتغير بطريقة أفضل، وهذا ما سنراه في مقالات تالية.
يسبب إذًا استخدام القيمة scroll عرض شريط تمرير بالاتجاه الذي تختاره أو بالاتجاهين سواءٌ طفح المحتوى وفق هذا الاتجاه أم لم يطفح.
ملاحظة: يمكنك أن تحدد باستخدام الخاصية overflow عرض كلا شريطي التمرير بتمرير القيمة scroll فقط، أو عرض أحدهما بتمرير قيمتين، فتُطبّق الأولى على شريط التمرير الأفقي أي تسند هذه القيمة إلى لخاصية overflow-x، أما الثانية فتُطبق على شريط التمرير العمودي. عندما تُضبط الخاصية على سبيل المثال على النحو التالي:
overflow: scroll hidden;
يعني هذا عرض شريط التمرير الأفقي وإخفاء العمودي.
وفي حال أخذت الخاصية overflow القيمة auto، عندها يُترك الأمر للمتصفح الأمر بعرض شريط التمرير المناسب في حالة طفحان المحتوى.
حاول من خلال المحرر التفاعلي إزالة بعض المحتوى حتى يتناسب مع حجم الصندوق وستلاحظ اختفاء شريط التمرير.
الطفحان والمحتوى المنسق كتليا
عندما تستخدم قيمًا لخاصية <overflow> مثل scroll و auto لتدبر أمر طفحان المحتوى فأنت تُنشئ في الواقع ما يُدعى بالمحتوى المنسّق كتليًا Block Formatting Context -أو اختصارًا BFC، وهو المحتوى الذي غيّرت قيمة الخاصية overflow له كي يحتويه التخطيط تلقائيًا، فلا يمكن للمحتوى الموجود خارج الحاوية أن يدخل إلى الحاوية، ولا يمكن لأي شيء أن يخرج من تلك الحاوية إلى التخطيط المحيط، وهذا ما يؤدي إلى ظهور سلوك التمرير كي يبقى المحتوى ضمن المكان المخصص له ولا يتداخل مع محتوى بقية العناصر وبالتالي الحصول على تجربة تمرير مستقرة.
الطفحان غير المرغوب في تصميمات الويب
تتدبر أساليب تخطيط صفحات الويب الحديثة أمر الطفحان، فهي تعمل دون أن تضع افتراضات مسبقة أو تكترث بحجم المحتوى الذي تضمه الصفحة.لكن لم يكن الوضع دائمًا هكذا.
بُنيت بعض المواقع سابقًا باستخدام حاويات ثابتة الارتفاع ليبقى أسفل الصناديق على نفس المستوى علمًا أن هذه الصناديق لا تربطها أية علاقة بالضرورة، وكان هذا الأسلوب ضعيفًا، فقد لوحظت في تطبيقات الويب القديمة تداخلات بين محتوى العناصر المختلفة، وهذا ناتج عن ظاهرة طفحان المحتوى كما تعلمنا. لهذا، يُفترض في هذه الحالة أن تعيد تخطيط الصفحة بطريقة مناسبة دون الاعتماد على فكرة الارتفاع المحدد أو الثابت.
ضع حالة الطفحان في حساباتك دائمًا عندما تطور موقع ويب، واختبر التصميم من خلال محتوى متغير الكمية وزد حجم خط الكتابة وتأكد عمومًا أن CSS تعمل على نحوٍ متين. حاول ألا تغيّر قيم الخاصية overflow لإخفاء المحتوى أو لإضافة أشرطة التمرير إلا في بعض الحالات الخاصة كأن تكون لديك نية في عرض أشرطة التمرير مثلًا.
الخلاصة
قدمنا في هذا المقال مفهوم طفحان المستوى وأشرنا إلى أن CSS تتحاشى أن تخفي المحتوى الذي يطفح خارج الحاوية، وتعلمنا كيفية إدارة حالات طفحان المحتوى التي قد تحدث، وأن عليك اختبار تصميمك لتتأكد من عدم حدوث طفحان خارج نطاق السيطرة.
ترجمة -وبتصرف- للمقال overflowing content.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.