معرفی قابلیت‌های جدید HTML و CSS (به‌روزترین امکانات ۲۰۲۵)
۱. مقدمه: چرا باید امکانات جدید را یاد بگیریم؟
همه ما دوست داریم سایت‌هایی بسازیم که جذاب، سریع و حرفه‌ای باشن. HTML و CSS مدام در حال پیشرفت هستن و هر سال امکانات جدیدی اضافه میشه. اگر این قابلیت‌ها رو بلد باشیم:
- می‌تونیم سایت‌های مدرن‌تر بسازیم.
- کدهای کوتاه‌تر و خواناتر بنویسیم.
- از قابلیت‌های جدیدی استفاده کنیم که کار رو راحت‌تر و جالب‌تر می‌کنه.
۲. واقعیت نسخه‌های HTML6 و CSS7 (آیا واقعا وجود دارند؟)
شاید شنیده باشی بعضیا از HTML6 و CSS7 حرف می‌زنن؛ اما واقعیت اینه که تا الان به‌طور رسمی فقط HTML5 و CSS3 داریم.
ولی فراموش نکن! مرتب امکانات جدید به HTML و CSS اضافه میشه (بدون تغییر نام نسخه). این ویژگی‌ها اغلب در مرورگرهای جدید پشتیبانی میشن و ما می‌تونیم ازشون استفاده کنیم.
پس: ما درباره تازه‌ترین امکانات صحبت می‌کنیم که خیلی‌ها اونا رو به اسم HTML6 یا CSS7 می‌شناسن.
۳. جدیدترین قابلیت‌های HTML
در HTML، چند قابلیت خیلی کاربردی به‌تازگی اضافه شده که ارزش امتحان کردن رو داره:
الف) تگ <dialog>
این تگ به‌راحتی برای ساخت پنجره‌های مودال (Popup یا دیالوگ باکس) استفاده میشه.
مثال:
<dialog id="myDialog">
<p>سلام! این یک دیالوگ باکس جدیده.</p>
<button onclick="document.getElementById('myDialog').close()">بستن</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">باز کن!</button>ب) اتریبیوت (Attribute) loading="lazy"
این ویژگی باعث میشه عکس‌ها فقط زمانی که لازم شدن (مثلا کاربر به پایین صفحه اومد)، بارگذاری بشن. اینجوری سایت سریع‌تر بالا میاد.
مثال:
<img src="image.jpg" loading="lazy" alt="تصویر سریع">پ) تگ <template>
این تگ به شما اجازه می‌ده قطعه‌کدهای آماده رو مخفی نگه دارید و بعداً با جاوااسکریپت به صفحه اضافه کنید.
مثال ساده:
<template id="myTemplate">
<div class="card">
<h2>کارت جدید</h2>
<p>این یک نمونه است.</p>
</div>
</template>ت) اتریبیوت جدید inert
باعث میشه بخش‌هایی از صفحه موقع باز بودن یک مودال (مثلا دیالوگ یا منو) غیرقابل تعامل باشه. فعلاً فقط تو بعضی مرورگرها کار می‌کنه.
مثال:
<div id="mainContent" inert>
این بخش موقتاً غیرقابل کلیک است.
</div>۴. جدیدترین قابلیت‌های CSS
CSS هم امکانات معرکه‌ای پیدا کرده که ساختن طرح‌های جذاب و مدرن رو ساده‌تر می‌کنه.
الف) :has(selector)
انقلابی‌ترین انتخاب‌گر جدید! حالا می‌تونی والد رو براساس وجود فرزند استایل بدی (قبلاً فقط بلعکس ممکن بود).
مثال ساده:
.card:has(img) {
border: 2px solid green;
}اگر .card داخلش یک عکس داشته باشه براش خط سبز می‌کشه.
ب) Container Queries (@container)
یعنی می‌تونی داخل یک بخش خاص سایت، استایل رو تغییر بدی (قبلاً فقط روی کل صفحه یا ابعاد مرورگر می‌شد).
مثال ساده:
.container {
container-type: inline-size;
}
@container (min-width: 400px) {
.item {
font-size: 2rem;
}
}پ) accent-color
بخش‌های فرم (مثل چک‌باکس و رادیوباتن) رو به‌راحتی رنگی کن!
مثال:
input[type="checkbox"] {
accent-color: red;
}ت) انتخاب‌گرهای :is و :where
کدنویسی رو کوتاه‌تر و جذاب‌تر می‌کنن.
مثال:
:is(h1, h2, h3) {
margin-bottom: 1rem;
}ث) استفاده از متغیر رنگی: color-mix()
تغییر و ترکیب رنگ‌ها فوراً با CSS.
مثال:
h1 {
color: color-mix(in srgb, red 70%, blue 30%);
}ج) Subgrid در CSS Grid
به کمک ساب‌گرید، چینش المان‌های داخلی دقیق‌تر و راحت‌تر ممکن شده (در حال حاضر فقط توسط برخی مرورگرها پشتیبانی می‌شود).
۵. قابلیت‌های جدید در چه مرورگرهایی پشتیبانی می‌شوند؟
امکانات جدید معمولاً در نسخه‌های اخیر مرورگرها اجرا میشن:
- Chrome و Edge معمولاً اولین مرورگرهایی‌اند که پشتیبانی می‌کنن.
- Firefox بخش زیادی از امکانات رو داره.
- Safari کمی کندتر عمل می‌کنه.
برای اطمینان، سایت caniuse.com رو چک کن.
۶. چرا باید (یا نباید) از این قابلیت‌ها استفاده کنیم؟
- مزایا: کد کمتر، سرعت بیشتر، سایت مدرن‌تر، تجربه کاربری بهتر
- معایب: اگر کاربران زیادی از مرورگرهای قدیمی استفاده کنن، بعضی ویژگی‌ها براشون کار نمی‌کنه.
پیشنهاد: برای پروژه‌های جدید، تا جایی که مطمئنی کاربرانت مرورگر جدید دارن، از این امکانات استفاده کن.
۷. جمع‌بندی و سوالات متداول
امکانات HTML و CSS همیشه در حال پیشرفت هستن و یاد گرفتنشون سخت نیست! با همین مثال‌های ساده، می‌تونی پروژه هات رو مدرن کنی.
سوالات پرتکرار
۱. HTML6 و CSS7 واقعاً اومدند؟
خیر، اما تعداد زیادی ویژگی جدید اضافه شده که معمولاً به این اسم شناخته میشن.
۲. اگر امکان جدید کار نکرد چی؟
بررسی کن مرورگرت به‌روز است، یا با نسخه‌ای سازگارتر کدنویسی کن.
۳. چطور امکانات جدید رو یاد بگیرم؟
با جستجوی هر قابلیت در سایت‌هایی مثل MDN و caniuse.com، خیلی راحت آموزش و مثال پیدا می‌کنی!
