9.5 KiB
تمرین بازسازی CSS
هدف
پروژه تراریوم خود را به استفاده از روشهای مدرن چیدمان CSS تبدیل کنید! روش موقعیتیابی مطلق فعلی را بازسازی کنید تا از Flexbox یا CSS Grid برای طراحی قابل نگهداریتر و پاسخگو استفاده کنید. این تمرین شما را به کارگیری استانداردهای مدرن CSS در حالی که جذابیت ظاهری تراریوم شما حفظ شود، به چالش میکشد.
درک زمان و نحوه استفاده از روشهای مختلف چیدمان، مهارت مهمی در توسعه وب مدرن است. این تمرین پلی است میان تکنیکهای موقعیتیابی سنتی و سیستمهای چیدمان مدرن CSS.
دستورالعمل تمرین
مرحله ۱: تحلیل و برنامهریزی
- کد تراریوم فعلی خود را بررسی کنید - مشخص کنید کدام عناصر در حال حاضر موقعیتیابی مطلق دارند
- روش چیدمان خود را انتخاب کنید - تصمیم بگیرید که Flexbox یا CSS Grid بیشتر با اهداف طراحی شما سازگار است
- ساختار چیدمان جدید خود را ترسیم کنید - برنامهریزی کنید که ظرفها و عناصر گیاهی چگونه سازماندهی خواهند شد
مرحله ۲: پیادهسازی
- نسخه جدیدی از پروژه تراریوم خود در یک پوشه جداگانه ایجاد کنید
- ساختار HTML را طبق نیاز بهروزرسانی کنید تا از روش چیدمان انتخابی پشتیبانی کند
- CSS را بازسازی کنید تا به جای موقعیتیابی مطلق، از Flexbox یا CSS Grid استفاده کند
- ثبات بصری را حفظ کنید - اطمینان حاصل کنید که گیاهان و جار تراریوم در همان موقعیتها قرار دارند
- رفتار پاسخگو را پیاده کنید - چیدمان شما باید به خوبی در اندازههای مختلف صفحه نمایش تطبیق یابد
مرحله ۳: تست و مستندسازی
- تست در مرورگرهای مختلف - اطمینان حاصل کنید که طراحی شما در Chrome، Firefox، Edge و Safari کار میکند
- تست پاسخگو - چیدمان خود را روی اندازههای صفحه موبایل، تبلت و دسکتاپ بررسی کنید
- مستندسازی - به CSS خود کامنت اضافه کنید و انتخابهای چیدمان خود را توضیح دهید
- عکسهای صفحه - تراریوم خود را در مرورگرها و اندازههای مختلف صفحه ثبت کنید
الزامات فنی
پیادهسازی چیدمان
- یک مورد را انتخاب کنید: یا Flexbox یا CSS Grid را پیاده کنید (نه هر دو برای همان عناصر)
- طراحی پاسخگو: از واحدهای نسبی (
rem،em،%،vw،vh) به جای پیکسل ثابت استفاده کنید - دسترسپذیری: ساختار معنایی HTML و متن alt را صحیح نگه دارید
- کیفیت کد: از نامگذاری یکنواخت و سازماندهی منطقی CSS استفاده کنید
ویژگیهای مدرن CSS که باید در نظر گرفته شوند
/* Example Flexbox approach */
.terrarium-container {
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
justify-content: center;
}
.plant-containers {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
}
/* Example Grid approach */
.terrarium-layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
gap: 1rem;
}
الزامات پشتیبانی مرورگر
- Chrome/Edge: دو نسخه آخر
- Firefox: دو نسخه آخر
- Safari: دو نسخه آخر
- مرورگرهای موبایل: iOS Safari، Chrome Mobile
موارد قابل تحویل
- فایل HTML بهروزشده با ساختار معنایی بهبود یافته
- فایل CSS بازسازیشده با استفاده از تکنیکهای چیدمان مدرن
- مجموعه عکسهای صفحه که سازگاری مرورگرها را نشان میدهد:
- نمای دسکتاپ (1920x1080)
- نمای تبلت (768x1024)
- نمای موبایل (375x667)
- حداقل ۲ مرورگر مختلف
- فایل README.md شامل:
- انتخاب چیدمان شما (Flexbox در برابر Grid) و دلایل آن
- چالشهای مواجه شده در هنگام بازسازی
- نکات سازگاری مرورگر
- دستورالعمل اجرای کد شما
معیار ارزیابی
| معیار | نمونه عالی (۴) | مسلط (۳) | در حال توسعه (۲) | ابتدایی (۱) |
|---|---|---|---|---|
| پیادهسازی چیدمان | استفاده استادانه از Flexbox/Grid با ویژگیهای پیشرفته؛ کاملاً پاسخگو | پیادهسازی صحیح با رفتار پاسخگو خوب | پیادهسازی پایه با مشکلات جزئی پاسخگو | پیادهسازی ناقص یا اشتباه چیدمان |
| کیفیت کد | CSS تمیز، سازمانیافته با کامنتهای معنادار و نامگذاری یکنواخت | سازماندهی خوب با چند کامنت | سازماندهی کافی با کامنتهای کم | سازماندهی ضعیف؛ سخت برای درک |
| سازگاری مرورگر | سازگاری کامل در تمام مرورگرهای مورد نیاز با عکسهای صفحه | سازگاری خوب با تفاوتهای کوچک مستندسازی شده | مشکلات جزئی سازگاری که عملکرد را خراب نمیکند | مشکلات عمده سازگاری یا عدم تست |
| طراحی پاسخگو | رویکرد عالی موبایل-اول با نقاط شکست نرم | رفتار پاسخگو خوب با نقاط شکست مناسب | ویژگیهای پاسخگو پایه با مشکلاتی در چیدمان | رفتار پاسخگوی محدود یا شکسته |
| مستندسازی | README جامع با توضیحات و دیدگاههای دقیق | مستندسازی خوب با پوشش همه اجزا | مستندسازی پایه با توضیحات کم | مستندسازی ناقص یا مفقود |
منابع مفید
راهنماهای روش چیدمان
ابزارهای تست مرورگر
ابزارهای کیفیت کد
چالشهای جایزه
🌟 چیدمانهای پیشرفته: هم از Flexbox و هم Grid در بخشهای مختلف طراحی خود استفاده کنید
🌟 ادغام انیمیشن: انتقالها یا انیمیشنهای CSS را که با چیدمان جدید شما کار میکنند اضافه کنید
🌟 حالت تاریک: سوئیچر تم مبتنی بر ویژگیهای سفارشی CSS پیاده کنید
🌟 کوئریهای ظرف: از تکنیکهای جدید کوئری ظرف برای پاسخگویی در سطح مؤلفه استفاده کنید
💡 به یاد داشته باشید: هدف فقط اجرای کار نیست، بلکه فهمیدن اینکه چرا روش چیدمان انتخابی بهترین راهحل برای این چالش طراحی خاص است!
توضیح مهم: این سند با استفاده از سرویس ترجمه هوش مصنوعی Co-op Translator ترجمه شده است. در حالی که ما برای دقت تلاش میکنیم، لطفاً توجه داشته باشید که ترجمههای خودکار ممکن است شامل خطاها یا نادرستیهایی باشند. سند اصلی به زبان بومی آن باید به عنوان منبع معتبر در نظر گرفته شود. برای اطلاعات حیاتی، استفاده از ترجمه حرفهای انسانی توصیه میشود. ما مسئول هیچگونه سوءتفاهم یا تفسیر نادرستی ناشی از استفاده از این ترجمه نیستیم.