all: unset – بازنشانی تمام استایل‌ها تنها با یک خط

احتمالاً بارها پیش آمده که به‌صورت دستی استایل‌های پیش‌فرض یک عنصر را پاک کرده‌اید؛ مثلاً به این شکل:

button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

حالا تصور کنید تمام این تنظیمات را بتوان فقط با یک خط جایگزین کرد:

button {
  all: unset;
}

و دقیقاً همان نتیجه را گرفت!

### ویژگی all: unset چیست؟

این ویژگی تمام استایل‌های اعمال‌شده را ــ حتی استایل‌های پیش‌فرض مرورگر ــ بازنشانی می‌کند،
در عین حال، ویژگی‌هایی که قابل ارث‌بری هستند (مانند color یا font-family) را از عنصر والد حفظ می‌کند.

در واقع، این ویژگی مانند فشردن دکمه «پاک کردن همه چیز» است؛
و بعد از آن، می‌توانید ظاهر دلخواه خود را از پایه و با کنترل کامل طراحی کنید.

### نمونه‌ی نهایی:

button {
  all: unset;
  background-color: blue;
  color: white;
  font-size: ۱۶px;
  padding: ۱۰px ۲۰px;
  border-radius: ۵px;
}

اکنون شما هستید که ظاهر دکمه را مشخص می‌کنید — بدون مزاحمت از سمت استایل‌های مرورگر.

### چه زمانی از all: unset استفاده کنیم؟

* زمانی که می‌خواهید تمام استایل‌های پیش‌فرض را حذف کنید؛
* هنگام طراحی مؤلفه‌های سفارشی (custom components) با ظاهر کاملاً خالص؛
* وقتی که می‌خواهید همه چیز دقیقاً از «صفر» شروع شود.

all: unset ابزاری قدرتمند برای بازنشانی استایل است —
اما باید با احتیاط از آن استفاده کنید،
چرا که ممکن است ناخواسته ویژگی‌هایی را نیز حذف کنید که قصد حفظ آن‌ها را داشتید.
در چنین مواردی، گاهی بهتر است به‌صورت انتخابی استایل‌ها را پاک کنید تا بعداً مجبور به بازگرداندن دستی آن‌ها نشوید.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

متوقف کردن یک Watcher

‏Watcher**هایی که به‌صورت هم‌زمان (synchronous) درون تابع `setup()` یا در قالب `<script setup>` تعریف می‌شوند، به نمونه (instance) کامپوننت مالک وابسته هستند و به‌طور خودکار هنگام **unmount شدن آن کامپوننت متوقف خواهند شد. در اغلب موارد، نیازی نیست نگران متوقف کردن دستی آن‌ها باشید.

نکته‌ی کلیدی در این‌جاست که Watcher باید به‌صورت هم‌زمان ایجاد شود؛ اگر Watcher در یک تابع غیرهم‌زمان (asynchronous) مانند setTimeout ایجاد گردد، دیگر به کامپوننت والد وابسته نخواهد بود و باید به‌صورت دستی متوقف شود تا از نشت حافظه (memory leak) جلوگیری شود. به مثال زیر توجه کنید:

<script setup>
import { watchEffect } from 'vue'

// این Watcher به‌صورت خودکار متوقف خواهد شد
watchEffect(() => {})

// ...اما این یکی نه!
setTimeout(() => {
  watchEffect(() => {})
}, ۱۰۰)
</script>

برای متوقف کردن دستی یک Watcher**، می‌توان از تابع بازگشتی استفاده کرد. این روش هم برای `watch` و هم برای `watchEffect` کاربرد دارد:

const unwatch = watchEffect(() => {})

// ...در زمانی دیگر، زمانی که دیگر نیازی نیست
unwatch()

توجه داشته باشید که تنها در موارد بسیار محدود نیاز به ایجاد **Watcher به‌صورت غیرهم‌زمان وجود دارد، و در هر زمان ممکن، بهتر است از ایجاد هم‌زمان استفاده شود.

اگر نیاز دارید منتظر داده‌ای غیرهم‌زمان بمانید، می‌توانید منطق Watcher خود را مشروط طراحی کنید:

// داده‌ای که به‌صورت غیرهم‌زمان بارگذاری می‌شود
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // انجام عملیات زمانی که داده بارگذاری شد
  }
})

#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد انواع روش‌های آپلود فایل و رمزگذاری Base64 [+لینک]

به بررسی روش‌های مختلف آپلود فایل‌ها به سرور از جمله استفاده از داده‌های فرم چندبخشی (Multi-Part Form Data) و رمزگذاری Base64 پرداخته شد. روش‌های مختلف مانند ارسال فایل‌ها به صورت متن ساده (Plain Text)، رمزگذاری URL و فرم داده چندبخشی به تفصیل بررسی شد. همچنین استفاده از رمزگذاری Base64 برای جاسازی تصاویر در ایمیل‌ها و صفحات HTML شرح داده شد. در نهایت، نکات مهم در مورد محدودیت‌ها و بهترین شیوه‌های استفاده از این تکنیک‌ها در دنیای واقعی بیان گردید.


🔗https://www.aparat.com/v/pqz7475
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

در حال پیاده‌سازی بارگذاری فایل همراه با نوار پیشرفت هستیم

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

بیایید به نحوه‌ی پیاده‌سازی آن بپردازیم:

در این پیاده‌سازی، از شیء XMLHttpRequest استفاده می‌کنم؛ این شیء وظیفه‌ی ارسال فایل به‌صورت غیرهم‌زمان به سرور را بر عهده دارد و مجموعه‌ای از رویدادها را برای کنترل دقیق‌تر این فرآیند در اختیار ما می‌گذارد.

در این میان، لازم است بدانیم که کنترل‌کننده‌ی استاندارد xhr.onprogress`، پیشرفت *دریافت پاسخ از سرور* را پیگیری می‌کند؛ اما آنچه ما نیاز داریم، پیشرفت *ارسال فایل به سرور* است. از این رو، از `xhr.upload.onprogress بهره می‌گیریم تا رویدادهایی را که در طول انتقال هر بخش از داده‌ها به سرور رخ می‌دهند، دریافت کرده و وضعیت بارگذاری را با دقت به کاربر نمایش دهیم.

const xhr = new XMLHttpRequest();

این شیء دارای مجموعه‌ای از رویدادهای مفید است که در اسلاید بالا به آن‌ها اشاره کرده‌ام. با ترکیب این رویدادها و محاسبات ساده‌ای که در آن‌ها:

* lengthComputable مشخص می‌کند آیا می‌توان اندازه‌ی کل داده را محاسبه کرد،
* loaded میزان بایت‌های ارسال‌شده را نشان می‌دهد،
* total نیز نشان‌دهنده‌ی حجم کلی داده‌های ارسالی است،

می‌توان نوار پیشرفتی طراحی کرد که به‌صورت درصدی، وضعیت بارگذاری را نمایش دهد.

نمونه کد جاوااسکریپت:

if (e.lengthComputable) {
  const percent = Math.round((e.loaded / e.total) * 100);
  // به‌روزرسانی رابط کاربری
}

به این ترتیب، یک نوار پیشرفت واکنش‌گرا خواهیم داشت که وضعیت لحظه‌ای بارگذاری را به‌روشنی به کاربر نمایش می‌دهد.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

وب کامپوننت‌ها چیستند؟
وب کامپوننت‌ها مجموعه‌ای از APIهای بومی مرورگر هستند که امکان ساخت عناصر رابط کاربری (UI) به‌صورت مستقل، قابل استفاده‌ی مجدد و به‌طور کامل کپسوله‌شده را فراهم می‌کنند — بدون نیاز به وابستگی به هیچ فریم‌ورکی.

این فناوری بر پایه‌ی سه مفهوم کلیدی بنا شده است:

* عناصر سفارشی (Custom Elements)
* دام سایه (Shadow DOM)
* قالب‌های HTML (HTML Templates)
پیش‌تر در یکی از پست‌هایم درباره‌ی آن نوشته بودم.

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

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

وب کامپوننت‌ها در طراحی سیستم‌های طراحی (Design Systems)، رابط‌های کاربری سازمانی، معماری میکرو-فرانت‌اند و کتابخانه‌های سفارشی UI کاربرد گسترده‌ای دارند.

برای شروع، کافی‌ست تگی ساده مانند <my-alert> بسازید — به‌سرعت متوجه خواهید شد که چقدر کد شما تمیزتر، پایدارتر و ساخت‌یافته‌تر خواهد شد، زمانی که کنترل رابط کاربری را یک کامپوننت واقعی بر عهده دارد.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

واحدهای CSS که اغلب فراموش می‌شوند — lh و rlh

هر دوی این واحدها به *ارتفاع خط* (line-height) مرتبط‌اند — یعنی ارتفاع یک سطر از متن. این واحدها به شما امکان می‌دهند که اندازه‌گیری‌ها را بر اساس ارتفاع خط تعیین کنید، نه بر پایهٔ پیکسل‌های ثابت یا درصدها.

### lh — ارتفاع خط محلی

واحد یک lh معادل ارتفاع خط عنصر جاری است.

p {
  line-height: ۲۴px;
  margin-top: ۲lh; /* معادل ۴۸px */
}

اگر عنصری دارای مقدار مشخصی برای line-height باشد، آنگاه lh معادل همان مقدار خواهد بود.
اگر line-height به‌طور مستقیم مشخص نشده باشد، مقدار به‌ارث‌رسیده استفاده می‌شود.
این واحد یک *واحد محلی* است؛ یعنی مقدار آن به عنصر فعلی بستگی دارد.

### rlh — ارتفاع خط ریشه

واحد یک rlh معادل ارتفاع خط عنصر ریشه (معمولاً html) است.

html {
  font-size: ۱۶px;
  line-height: ۱.۵; /* معادل ۲۴px */
}

.section {
  padding-top: ۲rlh; /* معادل ۴۸px */
}

این واحد یک *واحد جهانی* است، درست مانند rem که از font-size عنصر html پیروی می‌کند، اما در اینجا مبنا ارتفاع خط است، نه اندازهٔ فونت.
کاربرد آن بیشتر در ایجاد فاصله‌گذاری عمودی هماهنگ و یکپارچه در سراسر صفحه است.

### جمع‌بندی

با استفاده از lh و `rlh`، شما ابعاد و فاصله‌ها را به ارتفاع واقعی خطوط متن گره می‌زنید، نه به پیکسل‌های سخت یا درصدهای وابسته به اندازهٔ فونت.
نتیجهٔ این کار، سیستمی انعطاف‌پذیر، مقیاس‌پذیر و منسجم برای فاصله‌گذاری عمودی خواهد بود.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

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

۱. خوانایی
نام‌گذاری واضح برای متغیرها، توابع و کلاس‌ها (برای نمونه، استفاده از ‎`calculateTotalPrice()`‎ به جای ‎`calc()`‎).
یکپارچگی در سبک نگارش (هماهنگی در نام‌گذاری، تورفتگی‌ها و ساختار کلی کد).
استفاده از توضیحات (کامنت‌ها) تنها در مواقعی که منطق کد نامشخص است (بدون زیاده‌روی).

۲. ماژولار بودن و ساختارمند بودن
تفکیک کد به توابع، کلاس‌ها یا مؤلفه‌ها با رعایت اصل «مسئولیت یگانه».
وابستگی کم بین اجزای مختلف (Low Coupling) – اجزای سیستم کمترین وابستگی را به یکدیگر دارند.
انسجام بالا در درون هر ماژول (High Cohesion) – هر بخش از کد وظیفه‌ای مشخص و متمرکز دارد.

۳. قابلیت تست
پوشش مناسب تست‌ها – کد باید به‌آسانی از نظر صحت عملکرد بررسی‌پذیر باشد.
قابلیت ایزوله‌سازی – امکان جایگزینی وابستگی‌ها با اشیای شبیه‌سازی‌شده (mock).

۴. کارایی و بهره‌وری
استفاده از الگوریتم‌های بهینه (توجه به پیچیدگی زمانی و فضایی – O-Notation – بدون انجام بهینه‌سازی زودهنگام).
کاهش مصرف منابع (حافظه، پردازنده، درخواست‌های شبکه و...).

۵. انعطاف‌پذیری و توسعه‌پذیری
رعایت اصل باز/بسته بودن (Open/Closed Principle) – قابلیت افزودن امکانات جدید بدون نیاز به تغییر منطق موجود.
استفاده از الگوهای طراحی (Design Patterns) مانند Factory، Strategy و Observer.

۶. قابلیت اطمینان و تحمل خطا
مدیریت صحیح خطاها (استفاده مناسب از استثناها و ثبت رویدادها – logging).
بررسی و کنترل شرایط خاص و غیرعادی (Edge Cases و ورودی‌های نامعتبر).

۷. قابلیت نگهداری
مستندسازی حداقلی (مانند فایل README یا توضیحات داخلی کد – docstrings).
امکان بازسازی و بهبود کد (Refactoring) بدون نگرانی از بروز اشکال در عملکرد کلی.

۸. امنیت
محافظت در برابر آسیب‌پذیری‌هایی مانند تزریق SQL، XSS، CSRF و دیگر تهدیدهای رایج.
اعتبارسنجی دقیق داده‌های ورودی.

۹. سازگاری و قابلیت انتقال
پشتیبانی از اجرای میان‌پلتفرمی در صورت نیاز.
تعریف دقیق وابستگی‌ها با استفاده از ابزارهای مدیریت بسته مانند pip، pnpm یا maven.

۱۰. رعایت استانداردها و بهترین شیوه‌ها
پایبندی به اصطلاحات و سبک‌های رایج زبان برنامه‌نویسی (مانند Pythonic way، قراردادهای کدنویسی جاوا، سبک کدنویسی Vue و...).
ادغام با فرآیندهای CI/CD شامل اجرای خودکار تست‌ها و عملیات استقرار (Deployment).


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

شاخص جدید Tiobe برای زبان‌های برنامه‌نویسی
این رتبه‌بندی بر اساس تعداد مهندسان متخصص در سراسر جهان، دوره‌های آموزشی موجود و ارائه‌دهندگان شخص ثالث تنظیم می‌شود.

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

جهش زبان Python، به‌وضوح به دلیل رشد تقاضا در زمینه‌های مرتبط با هوش مصنوعی است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

⚫️ سالروز شهادت مظلومانه حضرت جوادالائمه(ع) تسلیت باد!

🔹معتصم به شکل دیگری [غیر از روش مامون] موجبات آزار امام را فراهم کرد، تا بالاخره سبب شد که همسر امام یعنی امّ‌الفضل امام را مسموم کرد، آنهم با یک وضع خیلی ناراحت‌کننده‌ای. چون برای همه مسموم‌کننده‌ها معلوم و محرز بود که دستور خلیفه بوده، جرأت این که بدن امام را دفن کنند، نداشتند.

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

🔹حالت ایشان از این جهت، تأسّی داشت به جدّ بزرگوارشان حسین بن علی(ع) که فرمود: مُلْقیً ثَلاثآ بِلاغُسْلٍ وَ لاکفَنٍ.

📝 آشنایی با قرآن،ج۱۲، ص۳۲-۳۱

🔗 [+لینک محتوی]
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

نسخه‌بندی معنایی (Semantic Versioning) چیست؟

نسخه‌بندی معنایی، که به اختصار SemVer نیز نامیده می‌شود، یک استاندارد برای شماره‌گذاری نسخه‌های نرم‌افزار است که اطلاعات دقیقی درباره‌ی نوع تغییرات ایجادشده در نسخه‌های مختلف ارائه می‌دهد. این استاندارد کمک می‌کند تا توسعه‌دهندگان و کاربران به‌سادگی متوجه شوند که یک به‌روزرسانی شامل چه نوع تغییراتی است.

فرمت پایه‌ی نسخه‌بندی معنایی به شکل زیر است:

نسخه: MAJOR.MINOR.PATCH
مثال: ۱.۲.۳

اجزای اصلی:
🔴 MAJOR (اصلی):
هنگامی افزایش می‌یابد که تغییری ناسازگار با نسخه‌های پیشین (Breaking API Change) در API ایجاد شود.
مثال: حذف یا بازنویسی توابع کلیدی.

🟠 MINOR (فرعی):
زمانی افزایش می‌یابد که قابلیت جدیدی افزوده شود بدون آن‌که ناسازگاری با نسخه‌های قبلی ایجاد شود.
مثال: اضافه شدن یک ویژگی جدید.

🟢 PATCH (وصله):
برای اصلاح اشکالات در نسخه‌ی موجود که به‌صورت سازگار با نسخه‌های پیشین انجام می‌شود.
مثال: رفع باگ‌های گزارش‌شده.



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد چگونه کامپوزِیبل‌های بهتری بنویسیم [+لینک]

یاد بگیرید چگونه با استفاده از تکنیک‌ها، اصول و الگوهای درست، کامپوزِیبل‌های درخشان و حرفه‌ای در Vue طراحی و پیاده‌سازی کنید.



🔗https://aparat.com/v/kmihlut
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

❤️‍🔥سالروز ازدواج حضرت امیرالمومنین علی علیه السلام و حضرت زهرا سلام الله علیها مبارک❤️‍🔥

👆ملاک‌های انتخاب همسر


🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

تابع attr()
بله، تابع attr در CSS به‌طور قابل‌توجهی بهبود یافته است! از این پس، تمامی ویژگی‌های HTML با پیشوند `data-`، بدون توجه به نوع داده‌ای آن‌ها، می‌توانند در هر ویژگی CSS مورد استفاده قرار گیرند. این پیشرفت، افق‌های تازه‌ای را برای استایل‌دهی پویا به عناصر گشوده و امکانات و انعطاف‌پذیری بیشتری را در اختیار توسعه‌دهندگان قرار می‌دهد.

با مشخص‌کردن نوع داده و در صورت نیاز تعیین یک مقدار پیش‌فرض، می‌توان به شکلی مؤثرتر نمایش محتوا و رفتار عناصر صفحه وب را مدیریت کرد.

مثال:

<div data-width="189"></div>
<div data-width="100"></div>

<style>
  div {
    width: attr(data-width px);
  }
</style>

در این مثال، مقدار ویژگی data-width به‌صورت مستقیم در ویژگی width هر عنصر استفاده شده و مقدار آن به پیکسل تفسیر می‌شود. این روش جدید، مسیرهای نوینی برای طراحی واکنش‌گرا و مبتنی بر داده فراهم می‌آورد.




#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع toggle()
درست است، تابع toggle در CSS امکان بسیار کاربردی و مناسبی را برای تغییر چرخشی مقادیر در عناصر یا فرزندان آن‌ها فراهم می‌کند؛ قابلیتی که نه‌تنها کدنویسی را ساده‌تر می‌سازد، بلکه موجب افزایش انعطاف‌پذیری در طراحی سبک‌ها نیز می‌شود.

اجازه دهید مثالی ارائه کنم: فرض کنید می‌خواهید در یک فهرست تو در تو به‌صورت ul > li > ul > li`، نوع علامت‌گذاری (`list-style-type) برای سطوح فرد به‌صورت «disc» و برای سطوح زوج به‌صورت «square» تعریف شود. به‌جای آنکه به‌صورت دستی برای هر سطح از تو در تویی استایل جداگانه تعریف کنید، می‌توانید به‌سادگی از دستور list-style-type: disc, square; استفاده نمایید. تابع toggle به‌صورت خودکار این مقادیر را به‌صورت چرخشی بین فرزندان اعمال می‌کند و از تکرار بی‌مورد کد جلوگیری کرده و مدیریت استایل‌ها را هوشمندانه‌تر و مؤثرتر می‌سازد.

مثال:

/*
اگر فهرست‌هایی به‌صورت تو در تو داشته باشیم:
- سطح نخست علامت‌گذاری به‌صورت disc خواهد بود.
- سطح دوم circle خواهد بود.
- سطح سوم square خواهد بود.
اگر تعداد سطوح بیشتر شود، این الگو به‌صورت چرخشی تکرار می‌گردد:
disc، circle، square، سپس دوباره disc، circle...
*/
ul {
  list-style-type: toggle(disc, circle, square);
}

این ویژگی جدید امکان طراحی سبک‌های منظم، خوانا و بدون تکرار اضافی را فراهم می‌کند و به بهینه‌سازی و زیبایی کد CSS کمک شایانی می‌نماید.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع‌های sibling-count() و sibling-index()
با معرفی توابع جدید در CSS که امکان کار با تعداد عناصر و ترتیب آن‌ها را فراهم می‌سازند، دیگر نیازی به تعریف استایل‌های سفارشی برای هر عنصر به‌صورت جداگانه یا استفاده از سلکتورهای پیچیده مانند nth-child نیست. این قابلیت‌ها فرایند استایل‌دهی را بسیار ساده‌تر کرده و کد را خواناتر، فشرده‌تر و نگه‌داری آن را آسان‌تر می‌سازند.

تابع sibling-count() تعداد عناصر هم‌سطح (خواهر یا برادر) را بازمی‌گرداند.
تابع sibling-index() موقعیت عنصر را در میان خواهر و برادرهایش مشخص می‌کند.

مثال:

/*
فرض کنید درون یک کانتینر، چهار عنصر div قرار دارند.
در این صورت:
- عرض هر div برابر خواهد بود با بیست و پنج درصد (یعنی صد درصد تقسیم بر چهار).
- ارتفاع آن‌ها به ترتیب برابر خواهد بود با صد، دویست، سیصد و چهارصد پیکسل.
*/

div {
  width: calc(۱۰۰% / sibling-count());
  height: calc(sibling-index() * ۱۰۰px);
}

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


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

تابع first-valid()
معرفی روش جدیدی با نام first-valid که آرگومان‌هایی را دریافت کرده و نخستین مقدار معتبر را انتخاب می‌کند، می‌تواند به‌طور قابل‌توجهی کار با متغیرهای CSS را ساده‌تر و قابل‌اعتمادتر کند. یکی از چالش‌های رایج در استفاده از متغیرها این است که حتی اگر مقدار آن‌ها نامعتبر باشد، همچنان به‌عنوان مقدار معتبر در نظر گرفته می‌شوند و در نتیجه، مقادیر پشتیبان (fallback) نادیده گرفته می‌شوند.

با بهره‌گیری از تابع `first-valid`، می‌توان مجموعه‌ای از مقادیر پشتیبان را به‌صورت زنجیره‌ای تعریف کرد. در این حالت، مرورگر نخستین مقدار معتبر را از میان آن‌ها انتخاب می‌کند و اگر مقدار اول معتبر نباشد، به ترتیب سراغ گزینه‌های بعدی می‌رود تا به یک مقدار معتبر برسد. این قابلیت باعث می‌شود کد CSS مقاوم‌تر و نگهداری آن آسان‌تر شود.

مثال:

/* بدون استفاده از مقدار پشتیبان مؤثر */
div {
  --a: ۴۰px;
  --b: red;
  background: golden;
  background: var(--a);
}

/* استفاده از مقدار معتبر با first-valid */
div {
  --a: ۵۰px;
  --b: green;
  background: red;
  background: first-valid(var(--a), var(--b));
}

در نمونه دوم، اگر مقدار نخست (مثلاً --a) به هر دلیلی نامعتبر باشد، مرورگر به‌طور خودکار از مقدار دوم (یعنی --b) استفاده خواهد کرد. این روش، رویکردی ساخت‌یافته و ایمن برای مدیریت مقادیر متغیرها فراهم می‌سازد.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript