ویژگی های پایه که امروز می توانید استفاده کنید

فقط با برخی از ویژگی هایی که بخشی از Baseline هستند آشنا شوید.

Mariko Kosaka

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

در حالی که این تکامل و انطباق مداوم مفید است، می تواند سردرگمی نیز به همراه داشته باشد. پیمایش همه این به‌روزرسانی‌ها ممکن است دشوار باشد. به‌عنوان توسعه‌دهندگان، ما سؤالاتی مانند «چه زمانی همه موتورهای مرورگر از این ویژگی جدید پشتیبانی می‌کنند؟» داریم؟ "چه زمانی می توانم واقعاً استفاده از این ویژگی ها را در کد تولید خود شروع کنم؟" "برای چه مدت باید از مرورگرهای قدیمی پشتیبانی کنیم؟"

پاسخ واقعی «بستگی دارد» است. آنچه مورد نیاز است و قابل استفاده است واقعاً به پایگاه کاربر، پشته فناوری، ساختار تیم شما و دستگاه های پشتیبانی شده بستگی دارد. اما، یک چیزی که همه ما موافقیم، این است که چشم انداز فعلی وب می تواند تصمیم گیری را دشوار کند.

تیم کروم با سایر موتورهای مرورگر و جامعه وب همکاری می‌کند تا وضوح بیشتری را ارائه کند. این شامل کار ما بر روی پروژه هایی مانند Interop 2023 است که به بهبود قابلیت همکاری مجموعه ای از ویژگی های کلیدی کمک می کند. اما در مورد ویژگی هایی که در چند سال گذشته فرود آمدند چه می توان گفت؟ آیا ویژگی‌های آزمایشی که دو سال پیش درباره آن‌ها آموختیم، آماده استفاده هستند؟

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

عنصر گفتگو

عنصر <dialog> یک عنصر جدید HTML برای ایجاد اعلان‌های گفتگو مانند پنجره‌های بازشو و مدال است.

پشتیبانی مرورگر

• 37
• 79
• 98
• 15.4

منبع

برای استفاده از آن، عنصر modal را تعریف کنید، سپس با فراخوانی متد showModal() روی عنصر گفتگو، دیالوگ را باز کنید.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

به عنوان یک عنصر HTML بومی، ویژگی‌هایی مانند مدیریت فوکوس، ردیابی برگه‌ها، و حفظ بافت پشته‌سازی تعبیه شده‌اند. برای اطلاعات بیشتر، ساختن مولفه گفتگو را بخوانید.

خصوصیات تبدیل CSS فردی

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

پشتیبانی مرورگر

• 104
• 104
• 72
• 14.1

منبع

برای توضیح عمیق این تغییر، کنترل دانه‌بندی دقیق‌تر روی تبدیل‌های CSS با ویژگی‌های تبدیل فردی را بخوانید.

واحدهای نمای جدید

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

پشتیبانی مرورگر

• 108
• 108
• 101
• 15.4

کپی عمیق در جاوا اسکریپت

در گذشته، برای ایجاد یک کپی عمیق از یک شی بدون ارجاع به شی اصلی، یک هک محبوب JSON.stringify همراه با JSON.parse بود. این یک هک معمولی بود که V8 (موتور جاوا اسکریپت کروم) عملکرد این ترفند را به شدت بهبود بخشید. اما، شما دیگر به این هک با structuredClone نیاز ندارید.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

پشتیبانی مرورگر

• 98
• 98
• 94
• 15.4

منبع

لطفاً برای جزئیات بیشتر به کپی عمیق در جاوا اسکریپت با استفاده از structuredClone مراجعه کنید.

شبه کلاس :focus-visible

به‌عنوان توسعه‌دهندگان وب، همه ما با آن «حلقه فوکوس» آشنا هستیم که وقتی صفحه‌ای را با صفحه‌کلید پیمایش می‌کنید یا روی عناصر ورودی کلیک می‌کنید ظاهر می‌شود. این یک ویژگی ضروری برای دسترسی است اما گاهی اوقات مانع طراحی بصری برای کاربران مختلف می شود. شبه کلاس :focus-visible CSS بررسی می کند که آیا مرورگر معتقد است که فوکوس باید قابل مشاهده باشد. اکنون می‌توانید سبک‌ها را فقط برای زمانی که فوکوس باید قابل مشاهده باشد، مشخص کنید.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

پشتیبانی مرورگر

• 86
• 86
• 85
• 15.4

منبع

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

رابط TransformStream

رابط TransformStream در Streams API این امکان را فراهم می کند که جریان ها را به یکدیگر لوله کنید.

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

پشتیبانی مرورگر

• 67
• 79
• 102
• 14.1

منبع

جمع کنید

ویژگی های بسیار بیشتری وجود دارد که اخیراً برای استفاده در پلت فرم وب قابل استفاده و پایدار شده اند. در ادامه ما با گروه جامعه WebDX کار خواهیم کرد تا وضوح بیشتری را به مجموعه ویژگی های Baseline بیاوریم. لطفاً برای جزئیات ادامه دار web.dev/baseline را بررسی کنید.

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

ما همیشه کنجکاو هستیم که آیا کاری که انجام می‌دهیم به شما کمک می‌کند یا به انواع مختلف پشتیبانی نیاز دارید، بنابراین لطفاً با ما در WebDX Community Group تماس بگیرید.