۵ تکنیک مفید در CSS

تقریبا تمام توسعه‌دهندگان با اتفاقات ناگهانی آزار دهنده‌ای در CSS مواجه شده‌اند. مثلا شاید حتی روزها به صفحه‌ای که طراحی کرده‌اید نگاه بکنید و بگویید، خدای من! این المان من چرا پس زمینه بنفش گرفته و در سمت چپ پایین صفحه قرار گرفته است؟! مشکلاتی مانند این ممکن است واقعا شما را خسته کنند، میزان آزاردهندگی آن‌ها زمانی بالاتر می‌رود که تنها مشکل شما برای ارائه پروژه چنین مسائل کوچک اما مهمی باشند.

چنین مثال‌هایی بسیار بیشتر از آن هستند که در اینجا لیست‌شان کنم اما در این مطلب قصد دارم شما را با پنج مورد و همچنین راه‌حل‌های آن آشنا کنم. به شخصه بسیاری از اوقات با آن‌ها مواجه شده‌ام.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

۱- ترازبندی عمودی یک خط

تقریبا هر موقعی که می‌خواستم یک نوار منو درست کنم با چنین مشکلی مواجه شده‌ام. مشکل اینجاست که معمولا در ساخت منو من با یک خطوط یا فضاهای عمودی اضافه‌ای برخورد می‌کنم. خب راه‌حل این قضیه بسیار ساده‌تر از آن بود که به آن فکر کنم. کافی‌ست که ارتفاع المان و ارتفاع میان خطوط در آن المان را برابر همدیگر قرار دهم. به کدهای زیر نگاه کنید:

۲- تغییر اندازه تصاویر

گاهی اوقات با تصاویری برخورد می‌کنید که خصوصیات عجیب و غریبی دارند، مقیاس درستی ندارند، اندازه آن‌ها عجیب است و… . برای اینکه بتوانید در یک صفحه وب از این قضایا به دور باشید و بتوانید تصویر را بدون مشکل نشان دهید تنها کافی‌ست که مقدار max-width را برابر ۱۰۰درصد و مقدار height را برابر auto قرار دهید. بنابراین حال تصویر شما می‌تواند در دستگاه‌های مختلف و حالت‌های متفاوت به خوبی نمایش یابد. همچنین ارتفاق تصاویر نیز براساس عرض آن تغییر پیدا می‌کند. بنابراین حال دیگر نگرانی در رابطه با کشیده شدن یا باریک شدن تصاویر ندارید، همه چیز بسیار خوب نمایش خواهد یافت.

۳- بازنشانی استایل‌های پیشفرض مرورگر

معمولا این قضیه ساده همواره فراموش می‌شود اما خود این موضوع باعث خراب شدن یک سند استایل‌شیت در یک صفحه وب می‌شود. این بدان دلیل است که گاهی اوقات استایل‌های پیشفرض مرورگر می‌توانند استایل‌های شما را پشت سر بگذارند یا در اصطلاح override بکنند. مرورگر به صورت پیشفرض استایل‌هایی را برای لایه‌بندی وبسایت، فاصله‌ها، borderها و… در نظر می‌گیرد. نیاز است که تمام آن‌ها را غیر فعال بکنید. خبر خوب این است که انجام چنین کاری بسیار ساده‌تر از چیزی‌ست که به آن فکر می‌کنید. تنها نیاز است که از یک فایل استایلی Reset استفاده کنید. این فایل تمام استایل‌های پیشفرض مرورگر را پاک می‌کند و براساس استایل‌های شما جلو می‌رود. در این لینک می‌توانید یکی از این استایل‌ها را مشاهده کنید.

۴. برجسته کردن استایل‌ها

نیاز است که در این مرحله کمی احتیاط به خرج دهید. این تکنیکی است که تنها زمانی که واقعا نیاز است باید از آن استفاده شود. در غیر اینصورت دفعه بعدی که قصد بروزرسانی فایل استایل‌تان را داشته باشید با مشکلاتی همراه خواهید بود. هدف از این قسمت این است که شما یک استایل یا دستور خاص را مهمتر از بقیه جلوه دهید و به مرورگر بگویید که روی این قسمت از کد تمرکز بیشتری داشته باشد. این کار از طریق دستور !important انجام می‌شود. اگر بیش از حد از این دستور استفاده کنید منطق فایل استایل‌شیت خودتان را گم خواهید کرد و نمی‌دانید که مرورگر چگونه دستورها را مدیریت می‌کند. به یک مثال از این حالت توجه کنید:

۵. استفاده از ارتفاع درست برای صفحات عمودی

آیا تا به حال خواسته‌اید که یک صفحه را با یک المنت یا یک کلاس از المنت پر کنید؟ خب چنین کاری را با استفاده از واحد‌دهی height انجام دهید. راهی که این موضوع با آن کار می‌کند بدین شکل است که مقدار heigth را برابر مقدار درصدی از صفحه نمایشی که می‌خواهید آن را پر کند قرار دهید. البته یک موضوع دیگر نیز وجود دارد، چگونه می‌خواهید این موضوع را برای صفحات مختلف پیاده‌سازی کنید؟ خب راه‌حل به صورت زیر است:

امیدواریم که این مطلب کوتاه برای‌تان مفید بوده باشد. نظرات و پیشنهادات خود را می‌توانید از طریق قسمت نظرات با ما در میان بگذارید.