آموزش CSS مبتدی : محتوای سرریز شده
سرریز زمانی اتفاق میافتد که محتوای زیادی در یک کادر عنصر جا شود. در این درس، نحوه مدیریت سرریز با استفاده از CSS را خواهید آموخت.
هر چیزی در CSS یک جعبه است. شما میتوانید اندازه این جعبهها را با اختصاص مقادیری مانند عرض و ارتفاع محدود کنید. سرریز زمانی اتفاق میافتد که محتوای زیادی برای جا شدن در یک جعبه وجود داشته باشد. CSS ابزارهای مختلفی را برای مدیریت سرریز ارائه میدهد. هرچه در طرحبندی CSS و نوشتن CSS بیشتر پیش بروید، با موقعیتهای سرریز بیشتری روبرو خواهید شد.
CSS تلاش میکند از «از دست رفتن دادهها» جلوگیری کند
بیایید دو مثال را بررسی کنیم که رفتار پیشفرض CSS را هنگام وقوع سرریز نشان میدهند.
مثال اول شامل یک کادر است که با تنظیم ارتفاع محدود شده است. محتوای کادر از فضای موجود فراتر میرود، بنابراین از کادر سرریز میشود و در پاراگراف زیر قرار میگیرد.
مثال دوم شامل یک کلمه در یک کادر است. کادر برای کلمه خیلی کوچک ساخته شده است و بنابراین از کادر بیرون میزند.
شاید از خود بپرسید که چرا CSS به این شکل نامرتب کار میکند و محتوا را خارج از محفظهی مورد نظر خود نمایش میدهد. چرا محتوای سرریز شده را پنهان نمیکنیم؟ چرا اندازهی محفظه را متناسب با تمام محتوا تغییر نمیدهیم؟
در صورت امکان، CSS محتوا را پنهان نمیکند. این کار باعث از دست رفتن دادهها میشود. مشکل از دست رفتن دادهها این است که شما یا بازدیدکنندگان وبسایت شما ممکن است متوجه نشوید. اگر دکمهی ارسال در فرم ناپدید شود و هیچکس نتواند فرم را تکمیل کند، این میتواند یک مشکل بزرگ باشد! در عوض، CSS به روشهای قابل مشاهده سرریز میشود. احتمال بیشتری وجود دارد که متوجه شوید مشکلی وجود دارد. در بدترین حالت، یک بازدیدکنندهی سایت به شما اطلاع میدهد که محتوا همپوشانی دارد.
اگر یک کادر را با عرض یا ارتفاع محدود کنید، CSS به شما اعتماد میکند که میدانید چه کاری انجام میدهید. CSS فرض میکند که شما پتانسیل سرریز شدن را مدیریت میکنید. به طور کلی، محدود کردن ابعاد بلوک زمانی مشکلساز است که کادر حاوی متن باشد. ممکن است هنگام طراحی سایت متن بیشتری از آنچه انتظار داشتید وجود داشته باشد، یا متن ممکن است بزرگتر باشد (برای مثال، اگر کاربر اندازه فونت خود را افزایش داده باشد).
ویژگی overflow به شما امکان میدهد نحوه برخورد مرورگر با محتوای سرریز شده را مشخص کنید. مقدار پیشفرض نوع مقدار قابل مشاهده است. با این تنظیم پیشفرض، میتوان محتوا را هنگام سرریز شدن مشاهده کرد.
پنهان کردن محتوای سرریز شده
برای پنهان کردن محتوا هنگام سرریز شدن، میتوانید overflow را به صورت hidden تنظیم کنید. این دقیقاً همان کاری را انجام میدهد که میگوید: سرریز را پنهان میکند. مراقب باشید که این میتواند برخی از محتوا را نامرئی کند. فقط در صورتی باید این کار را انجام دهید که پنهان کردن محتوا مشکلی ایجاد نکند.
سعی کنید مثال بالا را ویرایش کنید تا مقدار overflow را روی visible تنظیم کنید، سپس آن را به hidden برگردانید تا ببینید چه تاثیری دارد.
در عوض، شاید بخواهید به کاربران خود اجازه دهید برای خواندن همه محتوا، آن را اسکرول کنند؟ وقتی را روی محتوای سرریز شده تنظیم میکنید، مرورگرهایی که نوارهای اسکرول قابل مشاهده دارند، همیشه آنها را نمایش میدهند - حتی اگر محتوای کافی برای سرریز شدن وجود نداشته باشد. این مزیت را دارد که طرحبندی را ثابت نگه میدارد، به جای اینکه نوارهای اسکرول بسته به مقدار محتوای موجود در کانتینر ظاهر یا ناپدید شوند.
بیایید این را در عمل ببینیم. مثال زیر را ویرایش کنید تا مقداری از محتوا را از کادر حذف کنید. توجه کنید که چگونه نوارهای اسکرول باقی میمانند، حتی اگر نیازی به اسکرول کردن نباشد:
قابلیت مشاهدهی نوار اسکرول به سیستم عامل بستگی دارد. برای اینکه نوارهای اسکرول همیشه در مثالهای زیر نمایش داده شوند، ممکن است مجبور شوید تنظیمات مرورگر خود را تغییر دهید تا همیشه نوارهای اسکرول را نشان دهند.
در مثال بالا، ما فقط باید روی محور y اسکرول کنیم، با این حال، نوارهای اسکرول را روی هر دو محور خواهیم داشت. برای اسکرول کردن فقط روی محور y، میتوانید از ویژگی overflow-y استفاده کنید و را تنظیم کنید. سعی کنید این ویژگی را در مثال بالا تنظیم کنید.
همچنین میتوانید با استفاده از overflow-x، پیمایش در امتداد محور x را فعال کنید، اگرچه این روش برای گنجاندن کلمات طولانی توصیه نمیشود! اگر یک کلمه طولانی در یک کادر کوچک دارید، استفاده از ویژگیهای word-break یا overflow-wrap را در نظر بگیرید. علاوه بر این، برخی از روشهای مورد بحث در بخش «اندازهبندی آیتمها در CSS» ممکن است به شما در ایجاد کادرهایی که با مقادیر مختلف محتوا بهتر مقیاسبندی میشوند، کمک کند.
همانند scroll، چه محتوای کافی برای ایجاد scrollbar وجود داشته باشد و چه نداشته باشد، در بُعد scrolling یک scrollbar دریافت میکنید.
میتوانید با استفاده از ویژگی overflow و با ارسال دو مقدار، scrolling محور x و y را مشخص کنید. اگر دو کلمه کلیدی مشخص شده باشند، اولی برای overflow-x و دومی برای overflow-y اعمال میشود. در غیر این صورت، هر دو overflow-x و overflow-y روی یک مقدار تنظیم میشوند. به عنوان مثال، ، overflow-x را برای scroll و overflow-y را برای hidden تنظیم میکند.
نمایش دادن اسکرول بار فقط درصورت نیاز
اگر میخواهید اسکرولبارها فقط زمانی نمایش داده شوند که محتوای بیشتری نسبت به آنچه در کادر جا میشود، وجود داشته باشد، از استفاده کنید. این به مرورگر اجازه میدهد تا تشخیص دهد که آیا باید اسکرولبارها را نمایش دهد یا خیر.
در مثال زیر، محتوا را تا زمانی که در کادر جا شود، حذف کنید. باید ببینید که اسکرولبارها ناپدید میشوند:
سرریز ناخواسته در طراحی وب
روشهای مدرن طرحبندی (که بعداً در ماژول طرحبندی CSS با آنها آشنا خواهید شد) سرریز را مدیریت میکنند. آنها عمدتاً بدون فرضیات یا وابستگی به میزان محتوای موجود در یک صفحه وب کار میکنند.
این همیشه یک هنجار نبود. در گذشته، برخی از سایتها با کانتینرهای با ارتفاع ثابت ساخته میشدند تا پایین جعبهها را تراز کنند. در غیر این صورت، این جعبهها ممکن است هیچ ارتباطی با یکدیگر نداشته باشند. این شکننده بود. اگر با جعبهای مواجه شدید که محتوا روی محتوای دیگر قرار دارد، اکنون متوجه خواهید شد که سرریز ممکن است علت این امر باشد. در حالت ایدهآل، طرحبندی را طوری اصلاح میکنید که به کانتینرهای با ارتفاع ثابت متکی نباشد.
هنگام توسعه یک سایت، همیشه سرریز را در نظر داشته باشید. طرحها را با مقادیر زیاد و کم محتوا آزمایش کنید. اندازه فونتها را حداقل دو مرحله افزایش و کاهش دهید. مطمئن شوید که CSS شما قوی است. تغییر مقادیر سرریز برای پنهان کردن محتوا یا اضافه کردن نوارهای پیمایش برای چند مورد استفاده خاص (به عنوان مثال، جایی که قصد دارید یک جعبه پیمایش داشته باشید) در نظر گرفته شده است.
