نکات CSS برای توسعه وب بهتر

ek3nk4r 2023-02-23

0 30 خواندن این مطلب 11 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

CSS بیش از 25 سال است که وجود داشته است و تعداد زیادی ویژگی و انتخابگر برای ایجاد وب سایت ها و برنامه های عالی به دست آورده است. در این مقاله، ترفندهای محبوب و منحصربه‌فرد را برای متمایز کردن وب‌سایت‌تان، به‌علاوه ترفندهای قدیمی‌تر که هنوز هم کار می‌کنند، بررسی می‌کنیم.

برخی ممکن است بی اهمیت به نظر برسند، اما ممکن است برای افراد خاصی مناسب نباشند.

ما همچنین پیاده سازی های مختلف چیدمان، اسکرول اسنپ، اشکال تصویر و ترفندهای انیمیشن را بررسی خواهیم کرد. بیایید غواصی کنیم و برخی از ترفندهای CSS را که باید بدانید!

فهرست مطالب

چرخ فلک های صاف کره ای با `scroll-snap`

می‌توانید چرخ‌فلک‌های یکنواخت محصول را با اسکرول اسنپ ایجاد کنید. استیو چندی پیش ویدیوی فوق العاده ای در این مورد انجام داد.

💡 در مورد آن در MDN بیشتر بدانید.

در اینجا یک نسخه ی نمایشی نشان می دهد که چگونه این کار را در هر دو انجام دهید x-axis یا y-axis:

چیدمان

سرصفحه و پاورقی چسبناک

راه های مختلفی برای پیاده سازی هدرها و پاورقی های چسبنده وجود دارد.

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

2 رویکرد مستقیم وجود دارد که من آنها را دوست دارم:

استفاده كردن position: sticky;

/* The Essential bit  */

header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}

با CSS Grid:

/* The Essential bit  */

body {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header"
  "main"
  "footer";
}

header {
 grid-area: header;
}

main {
 grid-area: main;
}

footer {
  grid-area: footer;
}

ممکن است درک موقعیت چسبنده برایتان آسان‌تر باشد، بالاخره این در نام آن است.

با این حال، یک چیز شسته و رفته در مورد اجرای شبکه، این است که اگر آن را حذف کنید overflow: auto ویژگی، محتوای اصلی پاورقی را به پایین فشار می دهد.

این در مورد مثال چسبنده نیز صادق است، فقط آن را حذف کنید position: sticky از footer و همین کار را خواهد کرد.

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

2 ستون چسبنده اسکرول

به تام کمک می کند تا درک و پیاده سازی این مفهوم را آسان کند.

<body>
 <header>
  On top
 </header>
 <section>
  <div class="title-section">
   On Left
  </div>
  <div class="c-sections">
   <div class="content-section">content</div>
   <div class="content-section">on right side</div>
   <div class="content-section">to scroll through</div>
  </div>
 </section>
 <footer></footer>
</body>

/* The Essential bits  */

/* make the content cover the viewport */
header,
.title-section, 
.content-section {
  height: 100vh;
}

/* create 2 colums for the section element */
section {
 display: grid;
 grid-template-columns: 1fr 1fr;
}

/* make the left side stick to the top which allows the right side to scroll */
.title-section {
 position: sticky;
 top: 0;
}

انیمیشن با ویژگی های سفارشی CSS

اخطارهایی برای استفاده از vars CSS در سیستم های طراحی شما وجود دارد. اما به طور کلی، آنها یک تغییر دهنده بازی در توسعه وب بوده اند.

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

:root {
  --color-primary: dodgerblue;
}

/* Then we could use it, like so: */
.my-class {
    color: var(--color-primary);
}

/* We could also add a fallback. 
     Here, we have forgot to declare --color-secondary, 
     so the background color would be hotpink.
  */
.my-class {
    background-color: var(--color-secondary, hotpink);
}

این `animation-delay` فوت و فن

شما می توانید با متغیرهای CSS کارهای فوق العاده ای مانند کنترل انیمیشن های پیچیده انجام دهید.

در دمو زیر، عنصر مخفی سه مورد است:

animation-delay با یک مقدار منفی، باعث می شود انیمیشن بلافاصله شروع شود.
animation-play-state در ابتدا روی paused تنظیم کنید تا فقط زمانی شروع شود که ما بخواهیم/نیاز داریم.
این --progress ویژگی سفارشی برای اجازه کنترل بر روی انیمیشن.

/* The essentials */

.my-element {
  /* Setup */
  animation-name: spin;
  animation-timing-function: linear;

  /* Here's the magic */
  animation-play-state: paused;
  animation-duration: 1s;
  animation-delay: calc(var(--progress) * -1s);

  /* These clean up some weirdness */
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

توجه داشته باشید که در دمو زیر، ویژگی های سفارشی بیشتری وجود دارد که تغییرات رنگ کادر را کنترل می کند و البته کمی جاوا اسکریپت برای تنظیم ما --progress سبک روی عنصر:

const root = document.querySelector("main");
const input = root.querySelector("input");
const animated = root.querySelector("#animated");
input.addEventListener("input", (event) => {
  const min = Number(event.target.getAttribute("min"));
  const max = Number(event.target.getAttribute("max"));
  const value = Number(event.target.value);
  const progress = (value - min) / max;
  animated.style.setProperty("--progress", `${progress}`);
});

این نسخه ی نمایشی دیگری است که این روش را در عمل نشان می دهد، اما به سبک اختلاف منظر با یک شنونده اسکرول JS:

افکت های شناور با `box-shadow`

چند کلید برای این ترفند وجود دارد:

box-shadow مقادیر عبارتند از: [inset?] [top] [left] [blur] [size] [color];
برای به دست آوردن پر کردن جامد، blur باید باشد 0
استفاده كردن inset اجازه می دهد تا عنصر خود را “پر” کنیم
ارزش‌های منفی تغییر می‌کنند top / left به bottom / right و بالعکس
سایه های متعددی را می توان انباشته کرد
هنگام متحرک سازی چندین سایه، برای دستیابی به یک انیمیشن صاف – همان تعداد سایه ها را در حالت شناور/فوکوس به اندازه غیر شناور/فوکوس نگه دارید.

در اینجا یک انیمیشن «پر در شناور» به نظر می رسد:

<button class="fill">Fill In</button>


.fill {
  --color: #a972cb;
  --hover: #cb72aa;
}

.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

button {
  color: var(--color);
  transition: 0.25s;
}
button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}

button {
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}

چند انیمیشن جالب دیگر با این روش را اینجا ببینید:

رفع شعاع مرزی تو در تو با محاسبات

وس باس Syntax.FM چندین ویدیوی عالی را در TikTok انجام داده است. او در یکی از ویدیوهای خود، شعاع مرزی عکس‌های نمایه جدید توییتر را برای عناصر تودرتو با این ترفند بسیار خوب اصلاح کرد:

.card-outer {
    --radius: 20px;
  --border: 5px;
  /* Outer = Inner + space between */
  border-radius: calc(var(--radius) + var(--border));
}

.card-inner {
  margin: var(--border);
  border-radius: var(--radius);
}

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

22:39 – 01 ژوئن 2022

وسط یک عنصر به صورت افقی و عمودی

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

روش قدیمی

قبل از معرفی flex-box راه رسیدن به این هدف با استفاده از موقعیت یابی مطلق بود.

ترفند کلی به این صورت است:

<div class="parent">
  <div class="child">Center me</div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

راه رایج (اکنون)

Flex-box قوی‌ترین راه برای دستیابی به مرکز امروزه است، حتی اگر به MDN نگاه کنید، این مثالی است که می‌بینید.

<div class="parent">
  <div class="child">Center me</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

فلکس باکس اینگونه کار می کند که مسئول خوابیدن بچه هایش است. تنها کاری که باید برای وسط آن انجام می‌دادیم این است که از ویژگی‌هایی استفاده کنیم که به آن می‌گویند کودک را در مرکز افقی قرار دهد justify-content و مرکز عمودی با align-items.

این روش بسیار تمیزتر از روش قدیمی است، اما یک راه جدیدتر نیز وجود دارد.

مرکزیت هیپستر با استفاده از شبکه

این ممکن است کوتاه ترین راه برای رسیدن به این شاهکار باشد.

<div class="parent">
  <div class="child">Center me</div>
</div>

.parent {
 display: grid;
 place-content: center;
}

هنگامی که والد به عنوان a اعلام می شود grid ما این ویژگی خوب را داریم (place-content) که فقط به مرورگر می گوید که کودک را در مرکز قرار دهد. اگر خواهر و برادری را در کنار خود اضافه کنیم <div> همچنین در مرکز قرار می گیرد و درست زیر آن قرار می گیرد.

طرح‌بندی شبکه‌ای امروزه در همه مرورگرهای اصلی پشتیبانی می‌شود، پس چرا آن را امتحان نمی‌کنید؟

فیلترهای پس زمینه

فیلترهای پس زمینه خنک هستند و می توان از آنها برای افکت شیشه ای نئومورفیسم استفاده کرد backdrop-filter: blur که ظاهراً دیگر جالب نیست.

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

مدیریت سبک های تصویر

تصاویر در وب راه طولانی را پیموده اند، اما چند ویژگی خوب باید بدانید:

object-fit – همانطور که در اینجا مشاهده می شود، به باز نشدن تصاویر کمک می کند.
[aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) – همانطور که از نام پیداست، نسبت تصویر ترجیحی را برای جعبه ها تنظیم می کند. میتونی به دستش بیاری 16 / 9 یا 3 / 4 جعبه‌های بدون هک نسبت ابعادی ole padding. باز هم، Wes Bos یک ویدیوی عالی دارد که این و موارد دیگر را به نمایش می گذارد.

شکل ها

چند راه برای ایجاد اشکال در CSS وجود دارد. رایج ترین راه با حاشیه ها و استفاده از آن است :before و :after کلاس های شبه

شما می توانید استفاده کنید clip-path برای برش اشکال روی هر عنصر.

به عنوان مثال، می توانید یک شکل ستاره با حاشیه ایجاد کنید:

#star-five {
  margin: 50px 0;
  position: relative;
  display: block;
  color: red;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(35deg);
}
#star-five:before {
  border-bottom: 80px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);
}
#star-five:after {
  position: absolute;
  display: block;
  color: red;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid red;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

یا می توانید با آن به همان دست یابید clip-path:

#star-five {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

وقتی خودم را به شکلی نیاز می‌بینم، معمولاً از این CSS Clip-path maker استفاده می‌کنم بنت فیلی.

svg معادل دارد <clipPath> عنصری که می توانید برای نتایج مشابه مانند این نسخه نمایشی استفاده کنید:

اشکال زدایی CSS

دانستن نحوه برخورد با اشکال زدایی بسیار مهم است. در واقع، این توییت چیزی است که الهام بخش این پست است:

console.log CSS چیست؟

10:00 صبح – 05 فوریه 2023

Console.log در CSS

راه های کلیدی که از پاسخ ها به دست آمد عبارت بودند از:

/* 1 */ 
.element {
  border: 1px solid red;
}

/* 2 */ 
.element {
    background-color: red;
}

/* 3 */ 
.element {
    outline: 1px solid red;
}

من از 2 و 3 استفاده می کنم، زیرا اولی یک پیکسل به اندازه عنصر اضافه می کند. چرا قرمز؟ ¯_(ツ)_/¯

ابزارهای توسعه دهنده روز

ابزارهای توسعه‌دهنده در همه مرورگرهای اصلی از زمان Firebug بسیار بهبود یافته است. می توانید اشکال زدایی کنید z-index مشکلات مربوط به پنجره لایه ها تغییر CSS در مرورگر، همراه با تکمیل خودکار، هرگز آسان‌تر نبوده است. چند ویژگی جالب دیگر عبارتند از:

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

هر کدام سزاوار یک پست خاص خود هستند، اما اگر می‌خواهید بیشتر بدانید، اسناد Google Chrome Devtools را بررسی کنید.

امتیاز: به console.log خود سبک دهید

آیا می دانستید که می توانید ویژگی های CSS را به جاوا اسکریپت خود اضافه کنید console.log?

اینطوری باید انجام اش بدی:

console.log(
  // What comes after %c is what the styles will apply to
  "This is %cMy stylish message",
  // you can add multiple properties:
  "color: yellow; font-style: italic; background-color: blue;padding: 2px"
);

خروجی ها:

// You could also style different parts of the console with multipule %c's:
console.log(
  "Multiple styles: %cred %corange",
  // style for first %c
  "color: red",
  // style for second %c
  "color: orange",
  // for every %c you can add more styles with ","

  "Additional unformatted message"
);

خروجی ها:

💡 اطلاعات بیشتر در اینجا

انتخابگرها

اخیراً برخی از انتخابگرهای جدید واقعاً عالی به مشخصات CSS اضافه شده اند.

3 محبوب ترین و هیجان انگیز ترین عبارتند از:

[is:](https://developer.mozilla.org/en-US/docs/Web/CSS/:is) – استیو در اینجا به جزئیات این موضوع پرداخت.
[where:](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) – به شدت در پلاگین تایپوگرافی Tailwind برای دستیابی به قالب بندی تقریباً هر HTML استفاده می شود و می تواند برای انتخاب چندین فرزند در انتخابگر والدین مفید باشد.
[has:](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) – یک تابع انتخابگر بسیار پیش بینی شده که می تواند به عنوان انتخابگر والد گریزان استفاده شود. ما همچنان منتظر فایرفاکس در این مورد هستیم.

به غیر از جدیدترین و بهترین، به خاطر سپردن چند انتخابگر مفیدتر مانند انتخابگر ویژگی، مفید است. nth-child، قادر به گروه بندی انتخابگرها با,“، و ترکیب کننده های متخلف را درک کنید.

ویژگی های MDN بسیاری دیگر برای اضافه کردن به کارنامه شما.

فقط به یاد داشته باشید که انتخابگرهایی که انتخاب می کنید ممکن است هزینه عملکردی داشته باشد.

چند نکته دیگر برای یادآوری

100vh در واقع تمام نمای در تلفن همراه نیست. هنگامی که واحدهای نمای جدید پشتیبانی می شوند، این راه حل خواهد بود.
همانطور که در برخی از نمونه های انیمیشن دیده ایم احتمالاً برای انیمیشن ها به جاوا اسکریپت نیاز خواهید داشت. برای یک API تمیز و عملکرد عالی با یک بسته کوچک، Motion One را بررسی کنید (وانیلی JS معادل Reacts Framer-Motion، واقعیت جالب: آنها توسط یک شخص نوشته شده اند).
اگر با CSS خوب هستید، می‌توانید چیزهای شگفت‌انگیزی مانند کارت‌های معلق در زیر ایجاد کنید، که چیزی نیست جز CSS بسیار ساخته شده توسط شخصی که چیزهای آنها را می‌داند.

نتیجه

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

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

امیدوارم چیزی از همه این ترفندها به شما چسبیده باشد و شاید چیز جدیدی یاد گرفته باشید.

اگر می خواهید با برخی از منابع و وبلاگ های عالی که CSS را پوشش می دهند همراه باشید، در اینجا برخی از آنها وجود دارد که من از آنها لذت برده ام: