ترفندهای حرفه ای CSS ProTips (جلسه 1) : مقدمه و CSS Reset

- visibility ٢ mode_comment

در این مطلب و مطالب بعدی قصد داریم تعدادی ترفند و روش حرفه ای برای CSS خدمتتون عرض کنیم. با مطالعه و یادگیری این موارد سطح کدنویسی CSS شما بالاتر خواهد رفت و میتونین کدهای حرفه ای تری رو برای سایت خودتون قرار بدین. برای هر ترفند یا روش یا آموزش، نمونه هایی هم قرار داده میشه تا بتونین به خوبی اونا رو درک کنید.css protips

مواردی که در این دوره بیان خواهند شد:

  • 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 کردن رو قرار بدین. کد زیر رو در نظر بگیرید:

البته کتابخانه های reset و Normilize تفاوتهایی هم با هم دارن و اهدافشون با هم فرق میکنه. بصورت ساده میشه گفت که reset همه مقادیر رو 0 میکنه و یا به حالت اولیه برمیگردونه اما Normilize کاری میکنه که یک المنت در همه مرورگرها به یک صورت نمایش داده بشه و تفاوت ظاهری نداشته باشن. همونطور که در کد بالا دیدید برای همه المنتها یا *، margin و padding رو برابر با 0 قرار دادیم و همچنین با استفاده از ویژگی box-sizing کاری کردیم که به راحتی بتونیم از CSS Box Model استفاده کنیم و محاسبات از border المنت انجام بشه. در ترفند بعدی به موردی اشاره میکنیم که در اون استفاده از box-sizing بهینه تر خواهد شد.

پس با استفاده از css reset کاری میکنیم که استایلهایی که مرورگر بصورت پیش فرض برای المنتها در نظر گرفته، کنسل بشه و ما میتونیم با یک پایه شسته و رفته، کدهای CSS خودمون رو بنویسیم. برای مشاهده مثال استفاده از css reset میتونین به این لینک مراجعه کنید.

در جلسات بعدی با ادامه ترفندها در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
Masoud Azimi

ممنون بابت این بخش…
حتماً بخش کاربردی و مفیدی خواهد بود 🙂

سلام
بله حتما همینطور خواهد بود
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.