تصویر نویسنده

۱۱ شهریور ۱۳۹۹

0

نکات مهم css که برای شروع باید بدانیم

آموزش

من چگونگی ساخت وب سایت را به شیوه قدیمی یاد گرفتم: نگاهی به سورس وب سایتها می انداختم و سعی در تکرار چیزهایی که دیدم داشتم.

 کتابهای عجیب و غریب را برای چیزهایی که نتوانستم ببینم (مانند PHP/MySQL) خواندم، و در حال پیشرفت بودم.

این موضوع به سال ۱۹۹۹ باز می گردد، وقتی چیزهایی مانند < font size=”4″ color=”#00000″ > می نوشتیم و DHTML رایج بود.

وقتی CSS رایج شد رویکرد من برای یادگیری تغییر نکرد. اما من واقعاً آرزو می کنم که ای کاش وقت زیادی را برای یادگیری صحیح CSS صرف می کردم: چیزهای اساسی زیادی وجود داشت که آن ها را نادیده گرفتم.

در ادامه این مطلب برخی نکات مهم CSS را که آرزو میکردم هنگام شروع CSSمی دانستم برای شما آورده ام.

block، inline و inline-block

با این که من این ویژگی ها را می شناختم، به مدت طولانی آنها را درک نکردم.

این هم یک توضیح:

  • عناصر block به صورت افقی گسترش می یابند تا یک خط کامل (مانند عنوان) را در دست بگیرند. ما می توانیم margin عمودی را برای این عناصر اعمال کنیم.
  • عناصر inline به اندازه کافی، افقی گسترش می یابند تا محتوای آنها (مانند عناصر strong یا em) را شامل شوند. ما نمی توانیم margin عمودی را برای آنها اعمال کنیم و آنها معمولاً باید درون یک عنصر بلوک قرار گیرند.
  • عناصر inline-block مانند عناصر inline هستند، اما می توانیم margin عمودی را برای آنها اعمال کنیم. (که برای مثال در طراحی دکمه ها بسیار مفید واقع خواهند شد.)

در مثال زیر، عنصر block دارای یک مرز آبی، عنصرinline  دارای پس زمینه نارنجی و عنصر inline-block دارای یک مرز قرمز می باشد.

تصاویر inline هستند

inline بودن تصاویر به صورت پیش فرض مشکلی ندارد اما می تواند هنگام تعیین موقعیت آنها یا اضافه کردن margin عمودی باعث سردرگمی شود.

اگر تنظیم مجدد CSS شما این موارد را شامل نمی شود، من پیشنهاد می کنم دستور زیر را اضافه کنید:

img {
    display: block;
}

این باعث می شود رفتار آنها قابل پیش بینی تر باشد. همچنین ممکن است بخواهید max-width: 100%; را برای جلوگیری از خروجشان از نگهدارنده آن اضافه کنید.

چگونگی محاسبه ارتفاع و عرض

به طور پیش فرض ، عرض/ارتفاع یک جعبه با جمع کردن ابعاد زیر محاسبه می شود:

  • منطقه محتوا
  • منطقه Padding
  • منطقه border

این معمولاً برای ارتفاع یک عنصر مشکلی ایجاد نمی کند: ما معمولاً برای نحوه نمایش محتوا به صورت عمودی خیلی اذیت نمی شویم. این مشکلات معمولاً هنگام محاسبه عرض عنصر بوجود می آیند ، به ویژه اگر بیش از یک عنصر در یک ردیف وجود داشته باشد.

اگر CSS زیر را داشتیم:

.some-class {
    width: 50%;
    padding: 2em;
    border: 0.1rem;
}

مجموع عرض محاسبه شده برای .some-class خواهد بود:

۵۰% + ۴em + 0.2rem

این به دلیل خاصیتی به نام  box-sizing  است که مقدار پیش فرض content-box را دارد. این مقدار به این معنی است که ویژگی عرض در content area اعمال می شود.

با دستور زیر می توانیم این را برای همه عناصر تغییر دهیم:

* {
    box-sizing: border-box;
}

برگردیم به مثال ما ، عنصر width اکنون در border اعمال می شود ، بنابراین کل عرض عنصر ما ۵۰٪ خواهد بود.

چه اتفاقی برای border و padding می افتد؟ آن خصوصیات/مقادیر هنوز هم اعمال می شوند، اما بر مجموع عنصر عرض تأثیر نمی گذارند: آنها در محدوده مشخص قرار می گیرند.

مثال زیر را برای دیدن این موضوع در عمل ببینید:

حاشیه
ما در اینجا در مورد حاشیه صحبت نکرده ایم زیرا حاشیه فضای بین عناصر است. به همین دلیل، هرگز بخشی از این محاسبه نیست.

Padding و Margin یکی نیستند

اگر یک عنصر background یا border نداشته باشد، ممکن است به نظر بیاید که padding و margin یکی هستند اما اینطور نیست.

  • margin فضای بین عناصر است.
  • padding فضای داخل یک عنصر است.

padding برای عناصری که background دارند، کارآمد است. گاهی مواقع ما نمیخواهیم که محتوا به لبه باکس عنصر نزدیک باشد و padding ما را در رسیدن به این مهم یاری می کند.

به هم ریختن حاشیه ها

این مشکل مدت طولانی است که مزاحم مبتدیان CSS بوده. راسل اندرو این رفتار را اینگونه توصیف می کند:

هنگامی که حاشیه ها به هم می ریزند، به گونه ای ترکیب می شوند که فضای بین دو عنصر بزرگتر از دو حاشیه شود. حاشیه کوچکتر اساساً به داخل بزرگتر کشیده می شود.

اگر دو عنصر بلوک به طوری که یکی margin-bottom: 1em و دیگری بلافاصله در زیرش به صورت margin-top: 1.5em باشد، مجموع فضای بین دو عنصر ۱.۵em خواهد بود.

به اینجا توجه کنید:

هنگامی که دو حاشیه به هم می رسند، حاشیه بزرگتر حاشیه کوچکتر را فرا می گیرد. اگر حاشیه ها یک مقدار باشند، یکدیگر را فرا می گیرند.

هنگامی که این را بدانیم، محاسبات margin آسانتر می شود. همچنین می تواند رویکرد ما نسبت به مدیریت آن ها تغییر دهد.

توجه: حاشیه ها هنگامی که عنصر parent روی display: grid  یا  display: flexتنظیم شده باشد، به هم نمی ریزند.

مرورگرها یک شیوه نامه پیش فرض دارند

CSS مخفف عبارت انگلیسی Cascading Style Sheets به معنی شیوه نامه آبشاری است. بنابراین جای تعجب ندارد که آبشار یکی از مفاهیم اساسی CSS است.

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

استایل های ظاهرشده با توجه به مرورگر متفاوت هستند، اما علت این هستند که به طور پیش فرض:

  • عناوین اندازه متفاوتی دارند.
  • متن سیاه است.
  • لیست ها دارای نقاط گلوله ای هستند. (ستاره دار)
  • عناصر ویژگی display را دارند. (مثل block یا inline)

و خیلی چیز های دیگر.

حتی اگر یک وب سایت فقط یک شیوه نامه خاص داشته باشد ، آن شیوه نامه همیشه با شیوه نامه پیش فرض مرورگر ادغام می شود.

در همه جا از واحدهای مربوط استفاده کنید

استفاده از پیکسل وسوسه کننده است چون درکشان آسان است: بنویسید font-size: 24px و متن ۲۴ پیکسل خواهد بود.

اما این کار یک تجربه کاربری عالی به ویژه برای کاربرانی که محتوا را در سطح مرورگر تغییر اندازه می دهند یا زوم می کنند، ارائه نمی دهد.

من زودتر از این ها شروع به استفاده از em ( و بعد ها rem) برای اندازه فونت کردم. مدت خیلی بیشتری طول کشید که به استفاده از em و rem برای سایر چیز ها مانند padding، margin، letter-spacing و border عادت بکنم.

فهمیدن تفاوت بین em و rem برای مدیریت صحیح واحد ها حیاتی است. برای مثال برای درخواست های media@ و حاشیه های عمودی از em ولی برای border-width باید از rem استفاده کنیم.

مزایای استفاده همه اندازه ها در جای مناسب ارزش اندکی تامل را دارد.

::before و  ::afterبه محتوا نیاز دارند

شبه عناصر ::before  یا  ::afterبه ویژگی content نیاز دارند، هر چند اگر خالی بماند.

اگر آن را اضافه نکنیم، شبه عنصر نشان داده نمی شود.

.some-class::before {
    content: '';
}

واحد ch

واحد ch (کاراکتر) مفید است ، به خصوص برای تنظیم عرض یک عنصر تقریبا بر اساس تعداد کارکترهای یک متن.

از نظر فنی ، واحد ch تعداد کاراکترها در یک خط را حساب نمی کند.

ch بر اساس عرض  کارکتر ʘ است. اریک مایر گفته است:

معمولاً هر ch از پهنای متوسط کاراکتر، در حدود ۲۰ تا ۳۰٪ عریض تر است.

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

روند عادی

این اصطلاحی بود که زیاد شنیدم اما مدت طولانی آن را کامل نفهمیدم. “روند عادی” بدان معنی است که عناصر همانطور که در کد منبع ظاهر می شوند، در صفحه ظاهر شوند.

برای مثال، اگر نوشتیم:

<h2>Heading</h2>
<p>Paragraph text.</p>

انتظار داریم که <h2>Heading</h2> قبل یا بالای <p>Paragraph text.</p> ظاهر شود. روند عادی یعنی این.

اگر عنصری از روند عادی خارج شود، به این معنی است که در این جا ظاهر نمی شود. عناصر شناور و کاملاً مستقر نمونه خوبی از این موضوع هستند.

طراحی حالت های :focus

من بار اول شبه سلکتور های :hover, :focus  و  :active را در زمینه طراحی لینک آموختم. در آن زمان ، تمام نمونه هایی که من دیده ام ، شبیه به این موارد بود:

a {
    color: black;
}
a:hover,
a:focus,
a:active {
    color: red;
}

هر چند بهتر است که حالت های :focus را متفاوت طراحی کنیم.

:focus حالتی است که کاربر روی عناصر قابل تمرکز در یک صفحه (مانند پیوندها) تب را می زند. وقتی کاربر دکمه [تب] را فشار می دهد ، نمی داند فوکوس به کجا جا بجا خواهد شد.

علاوه بر این ، اگر یک کاربر یک مورد را از قبل انتخاب کند، نمی داند که فوکوس کجاست.

به خاطر همه این ها، بهتر است :focus را یک جور دیگر با hover : و  :active طراحی کنیم. برای مثال:

a:hover,
a:active {
    /* styles */
}
a:focus {
    /* styles */
}

:nth-child()

این مثال را ببینید:

توجه کنید که چگونه سطر های فرد دارای پس زمینه اند. با توجه به این که از سلکتور (p:nth-child(even)) استفاده کردیم، انتظار داشتیم سطر های زوج پس زمینه داشته باشند.

در حالی که سلکتور :nth-child() تمامی عناصر یکسان را می شمارد. مشخص کردن یک عنصر در سلکتور ( مثل p:nth-child()) باعث نمی شود که سلکتور از اولین عنصر از آن نوع شروع به شمارش کند.

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

اگر مثالمان را به p:nth-child(odd) تغییر دهیم، خواهیم دید که:

  • h1 با این که یک عنصر یکسان فرد هست، هایلایت نمی شود.
  • عناصر p که شامل ضوابط می شوند (پاراگراف ۲،۴ و ۶) هایلایت شده اند.

برگردیم به مثال اولمان، فرض کنیم که می خواهیم عناصر p زوج یک پس زمینه داشته باشند. در این صورت، بهتر است از یک شبه سلکتور متفاوت استفاده کنیم: p:nth-of-type(even)

این یک تفاوت کلیدی بین :nth-child()  و  :nth-of-type()را آشکار می سازد که پنهان است اما دانستن آن کمک می کند تا دچار سردرگمی نشوید.

جمع بندی

آشنایی با اصول CSS آسان است، اما درک چگونگی و چرایی موضوعات برای نوشتن CSS بهتر بسیار مهم است.

وقت گذاشتن برای یادگیری این موارد نه‌ تنها به من کمک کرد تا CSS را سریعتر بنویسم ، بلکه به کارآمدتر و انعطاف پذیرشدن کد من نیز کمک کرده است.

منبع : cssfordesigners

۰ ۰ vote
Article Rating