انواع Pseudo class ها در css3 🔵

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

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

1️⃣شبه کلاس invalid:

با استفاده از شبه کلاس invalid تو CSS میتونین برای عناصری که دارای مقدار نامعتبر (invalid) هستند، استایل دلخواه تعریف کنین.

input[type="email"]:invalid {
 border: 2px solid black;
 background-color:red;
 color:#fff;
}

2️⃣شبه کلاس first-child:

شبه کلاس first-child به شما این اجازه رو میده تا اولین فرزند هر پرنت رو بهش استایل بدید.

body p: first-child {
/*Write css codes*/
}

3️⃣شبه کلاس last-child:

برای مثال استفاده در تگ P ( یعنی تمامی تگ های P که آخرین فرزند از تگ والد ( پدرشون ) هستن رو انتخاب میکنه )

body p:last-child {
background-color:#1d7ce7;
color:#fff;
padding:5px;
}

4️⃣شبه کلاس nth-child:

می‌تونین به عنوان پارامتر، شماره اون فرزند رو وارد کنید و یا میتونین با استفاده از کلمات کلیدی ( odd یعنی فرد و even یعنی زوج ) معمولا و بیشتر در جدول ها استفاده میشه. ( مثلا گفتیم سطرهای فرد فلان رنگ زمینه و سطرهای زوج بهمان رنگ )

li:nth-child(3) {
 background-color:#e30730;
}

/* For odd tr */
table tr:nth-child(odd){
background-color:#f2f2f2;
}
 
/* For even tr */
table tr:nth-child(even){
background-color:#8AC007;
color:#fff;
}

5️⃣شبه کلاس not:

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

p:not(.free) {
background-color:green;
color:white;
text-align:center;
}

6️⃣شبه کلاس disable:

با استفاده از شبه کلاس disabled میتونین برای تگ هایی که غیرفعال هستن ( اگه از صفت disabled درون یک تگ استفاده کنیم اون تگ غیرفعال میشه ) ، استایل دلخواه تعریف کنید.

button:disabled {
background-color:red;
color: white;
}

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

#css #styling
@CodeModule

پردازشگر PostCSS چیه و چه کاربردی
داره؟ 🧐

خب PostCSS یک پردازشگر مدرن css هست که وابسته به پلاگین هاییه که با جاوا اسکریپت براش نوشته شده.
میشه گفت PostCss امکانات بیشتری نسبت به Preprocessor ها در اختیار ما قرار میده البته این نکته هم فراموش نشه که شما می تونید PostCss رو به همراه Preprocessor ها هم استفاده کنید.
البته توجه داشته باشید که PostCss یک preprocessor نیست.

برای مثال تو یک پروژه نیاز دارید توی css متغیر بنویسید ، برای این کار یک پلاگین به اسم postcss-simple-vars وجود داره که این امکان رو به css اضافه می کنه.

$dir:    top;
$blue:   #056ef0;
$column: 200px;

.menu_link {
    background: $blue;
    width: $column;
}
.menu {
    width: calc(4 * $column);
    margin-$(dir): 10px;
}

خروجی کد بالا که به css کامپایل شده:

.menu_link {
    background: #056ef0;
    width: 200px;
}
.menu {
    width: calc(4 * 200px);
    margin-top: 10px;
}

🔵در حال حاضر بیش از ۲۰۰ پلاگین برای PostCSS وجود داره که لیست اون هارو می تونید از تو Github یا سایت postcss.parts ببینید.


❓چرا باید از PostCSS استفاده کنیم؟


1️⃣سرعت: کامپایل سریعتر نسبت به Preprocessor ها.

2️⃣ماژولار: شما بر اساس نیاز پروژه می تونید پلاگین های مختلفی اضافه کنید.

3️⃣قدرت: وجود بیش از ۲۰۰ پلاگین که این ابزار رو قدرتمند و کاربردی تر می کنه.


⚡️سرعت کامپایل PostCss و در مقایسه با سایر ابزار ها میتونید مشاهده کنید ⬇️

PostCSS 5.0.11: 40 ms
PostCSS 5.0.10: 60ms (1.5 times slower)
Rework: 75 ms (1.9 times slower)
libsass: 76 ms (1.9 times slower)
Less: 147 ms (3.7 times slower)
Stylus: 166 ms (4.1 times slower)
Stylecow: 258 ms (6.4 times slower)
Ruby Sass: 1042 ms (26.0 times slower)


#css #styling
@CodeModule

واحد های اندازه گیری svh , dvh , vh و تفاوت هاشون در css 🔵

🔵در CSS، واحدهای اندازه‌گیری dvh، svh و vh به ترتیب به معنای "درصد ارتفاع نمای دید" (viewport height) هستن، اما هر کدوم کاربرد و رفتار خاص خودشون رو دارن.

1️⃣‏vh (Viewport Height) :

 این واحد به معنای 1 درصد از ارتفاع نمای دید (viewport) هست. به عنوان مثال، 100vh برابر با 100 درصد از ارتفاع نمای دیده.و اگر کاربر اندازه پنجره مرورگر رو تغییر بده، اندازه‌های مبتنی بر vh نیز به طور اتوماتیک تغییر میکنه.

2️⃣‏dvh (Dynamic Viewport Height) :

این واحد مشابه vh هست، اما به طور خاص برای نمای داینامیک طراحی شده. به این معنی که dvh به تغییرات ارتفاع نمای دید در حین نمایش محتوای پویا (مثل کیبورد موبایل) حساسه. به عنوان مثال، اگر کیبورد در دستگاه‌های موبایل باز بشه، dvh ممکنه کمتر از vh باشه چون ارتفاع قابل مشاهده کاهش پیدا می‌کنه.

3️⃣‏svh (Small Viewport Height) :

این واحد هم به ارتفاع نمای دید مربوط میشه، اما به ارتفاع کوچکترین حالت نمای دید اشاره داره. این به این معناست که svh همیشه برابر با کمترین ارتفاع نمای دیده که می‌تونه در هر زمان وجود داشته باشه. به عنوان مثال، اگه کاربر کیبورد رو باز کنه، svh ممکنه به اندازه‌ای کاهش پیدا کنه که فقط ارتفاع کوچکترین حالت رو نشون بده.

‼️تفاوت‌های این واحد های اندازه گیری :

تغییرات داینامیک: dvh و svh به تغییرات دینامیک در صفحه (مثل باز شدن کیبورد) حساس‌تر هستند، در حالی که vh ثابته.

✅و برای طراحی‌های واکنش‌گرا و بهینه‌سازی تجربه کاربری در دستگاه‌های موبایل، استفاده از dvh و svh می‌تونه مفیدتر باشه.

این واحدها به شما کمک می‌کنن تا تجربه کاربری بهتری رو در دستگاه‌های مختلف فراهم کنید.

#css #styling
@CodeModule