در این مطلب و مطالب بعدی قصد داریم تعدادی ترفند و روش حرفه ای برای CSS خدمتتون عرض کنیم. با مطالعه و یادگیری این موارد سطح کدنویسی CSS شما بالاتر خواهد رفت و میتونین کدهای حرفه ای‌تری رو برای سایت خودتون قرار بدین. برای هر ترفند یا روش یا آموزش، نمونه هایی هم قرار داده میشه تا بتونین به خوبی اونا رو درک کنید.
مواردی که در این دوره بیان خواهند شد:
- Use a CSS Reset
- Inherit box-sizing
- Use :not() to Apply/Unapply Borders on Navigation
- Add line-height to body
- Vertically-Center Anything
- Comma-Separated Lists
- Select Items Using Negative nth-child
- Use SVG for Icons
- Use the "Lobotomized Owl" Selector
- Use max-height for Pure CSS Sliders
- Equal-Width Table Cells
- Get Rid of Margin Hacks With Flexbox
- Use Attribute Selectors with Empty Links
- Style "Default" Links
- Consistent Vertical Rhythm
- Intrinsic Ratio Boxes
- Style Broken Images
- Use rem for Global Sizing; Use em for Local Sizing
- Hide Autoplay Videos That Aren't Muted
- Use :root for Flexible Type
- Set font-size on Form Elements for a Better Mobile Experience
استفاده از CSS Reset
استفاده از CSS Reset کمک میکنه که استایل و کدهای شما در همه مرورگرها به یک صورت نمایش داده بشن و رفتار یکسانی داشته باشن. شما میتونین از کتابخانه‌های موجود در این زمینه شبیه به reset و Normilize استفاده کنید یا میتونین خودتون یک کد ساده برای reset کردن رو قرار بدین. کد زیر رو در نظر بگیرید:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
البته کتابخانه‌های reset و Normilize تفاوتهایی هم با هم دارن و اهدافشون با هم فرق میکنه. بصورت ساده میشه گفت که reset همه مقادیر رو 0 میکنه و یا به حالت اولیه برمیگردونه اما Normilize کاری میکنه که یک المنت در همه مرورگرها به یک صورت نمایش داده بشه و تفاوت ظاهری نداشته باشن. همونطور که در کد بالا دیدید برای همه المنتها یا *، margin و padding رو برابر با 0 قرار دادیم و همچنین با استفاده از ویژگی box-sizing کاری کردیم که به راحتی بتونیم از CSS Box Model استفاده کنیم و محاسبات از border المنت انجام بشه. در ترفند بعدی به موردی اشاره میکنیم که در اون استفاده از box-sizing بهینه‌تر خواهد شد.
پس با استفاده از css reset کاری میکنیم که استایلهایی که مرورگر بصورت پیش فرض برای المنتها در نظر گرفته، کنسل بشه و ما میتونیم با یک پایه شسته و رفته، کدهای CSS خودمون رو بنویسیم. برای مشاهده مثال استفاده از css reset میتونین به این لینک مراجعه کنید.
در جلسات بعدی با ادامه ترفندها در خدمتتون هستیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق و پیروز باشید.
یا علی
ممنون بابت این بخش…
حتماً بخش کاربردی و مفیدی خواهد بود 🙂
سلام
بله حتما همینطور خواهد بود
موفق باشید