✨ مجموعه‌ای از کدهای کوتاه ولی کاربردی CSS
۶ تکه کد که هر برنامه‌نویس وب باید داشته باشه!

۱️⃣ مرکز کردن آیتم‌ها در گرید

.container {
    display: grid;
    place-items: center;
}

یه خط ساده که همه چیز رو وسط میاره! هم عمودی، هم افقی.

۲️⃣ پدینگ چپ و راست (با logical properties)

.button {
    padding-inline: 1rem;
}

به جای padding-left و padding-right — یه دونه بنویس!

نکته: همین ترفند رو میتونی برای margin و border هم استفاده کنی:
• margin-inline / border-inline → چپ و راست
• padding-block / margin-block → بالا و پایین

۳️⃣ ستون‌های هم‌عرض در گرید

.container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

هر تعداد ستون که داشته باشی، همه هم‌عرض میشن! عالی برای layoutهای داینامیک.

۴️⃣ استایل همزمان hover و focus

button:is(:hover, :focus) {
    /* استایل خودت رو اینجا بنویس */
}

یه بار بنویس، برای هر دو حالت کار کنه! هم برای موس، هم برای کیبورد (accessibility).

۵️⃣ دایره کامل

.circle {
    width: 2rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

هرچیزی رو تبدیل به دایره می‌کنه! با aspect-ratio مطمئن میشی که همیشه square بمونه.

۶️⃣ حذف فاصله اضافی بین آیتم‌های گرید

.container {
    gap: 0;
}

یا برای فاصله دلخواه:

.container {
    gap: 1rem;
}

💡 چرا اینا کاربردی ان؟
• کوتاه و مینیمال — هر کدوم یه خطه
• مدرن — از قابلیت‌های جدید CSS استفاده می‌کنن
• کاربرد روزمره — توی هر پروژه‌ای بهشون نیاز داری

💎 @Htmlcss_channels | #HTML #css #JavaScript

؛CSS Houdini چیست؟
یه API قدرتمند که بهت اجازه می‌ده مستقیماً با CSS نقاشی بکشی! 🎨

۵ مرحله‌ای که تصاویر نشون می‌دن:
۱️⃣ ساخت Paint Worklet

class DotsPainter {
  paint(ctx, geom, props) {
    ctx.fillStyle = 'pink';
    for (let y = 0; y < geom.height; y += 20) {
      for (let x = 0; x < geom.width; x += 20) {
        ctx.beginPath();
        ctx.arc(x, y, 5, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
}
registerPaint('dots', DotsPainter)

یه کلاس جاوااسکریپت می‌نویسی که روی canvas رسم می‌کنه.

۲️⃣ ثبت Worklet

CSS.paintWorklet.addModule('paint.js');

فایل جاوااسکریپت رو به مرورگر معرفی می‌کنی.

۳️⃣ استفاده در CSS

.box {
  background: paint(dots);
}

حالا می‌تونی مثل background معمولی استفاده کنی!

۴️⃣ شخصی‌سازی با متغیرها

ctx.fillStyle = props.get('--dot-color') || 'pink';

.box {
  background: paint(dots);
  --dot-color: blue;
}

رنگ رو از CSS تغییر بده!

۵️⃣ نتیجه
• ✅ بدون عکس
• ✅ بدون پلاگین
• ✅ فقط CSS خالص
• ✅ روی compositor thread اجرا می‌شه (سریع)



💎 @Htmlcss_channels | #HTML #css #JavaScript