تاریخ انتشار: 20 می 2025
ویرایشگرهای کد مدرن با گرد هم آوردن ابزارها و اسناد مرجعی که برای ساخت کارآمد چیزها نیاز دارید، بهره وری بسیار زیادی را باز می کنند - این همان I در IDE است. یکی از بهبودهای بهرهوری در بسیاری از IDEها مانند Visual Studio Code (VS Code) نشان دادن اطلاعات اضافی درباره ویژگیهای وب در حالی که ماوس را روی آنها در ویرایشگر نگه میدارید. این اطلاعات به طور مفید شامل شرح ویژگی، مرورگرهای پشتیبانی شده، راهنمای نحو، و پیوندی برای کسب اطلاعات بیشتر در مورد MDN است.
اطلاعات سازگاری مرورگر بهویژه در زمینه یک IDE مفید است، زیرا میتوانید بازخورد فوری در مورد قابلیت همکاری یک ویژگی فقط با نگه داشتن ماوس روی آن دریافت کنید. میتوانید از این اطلاعات برای تصمیمگیری در مورد اینکه آیا یک ویژگی با اهداف پشتیبانی مرورگر شما مطابقت دارد یا خیر، نیاز به برداشتن گامهای دفاعی برای تقویت تدریجی یا چندپر کردن آن یا جلوگیری از استفاده کامل از آن استفاده کنید.

aspect-ratio
در نسخههای قبلی VS Code، با پشتیبانی مرورگر که بر حسب شماره نسخه بیان میشود:"Edge 88، Firefox 89، Safari 15، Chrome 88، Opera 74"
نسخههای قبلی VS Code این اطلاعات را بر حسب شماره نسخه مرورگر بیان میکردند، مشابه آنچه ممکن است در جداول سازگاری در سایتهایی مانند MDN، Can I Use یا اینجا در web.dev مشاهده کرده باشید. اما وجه مشترک همه این سایت ها این است که آنها همچنین شروع به خلاصه کردن چشم انداز پیچیده پشتیبانی مرورگر با استفاده از Baseline کرده اند. بنابراین، در تلاش برای تراز کردن VS Code با روشی که این منابع دیگر اطلاعات سازگاری مرورگر را منتقل میکنند، VS Code اکنون از Baseline نیز پشتیبانی میکند .
برای دریافت رابط کاربری پایه جدید، به VS Code نسخه 1.100 یا جدیدتر ارتقا دهید. همه چیز خارج از جعبه کار می کند—بدون نیاز به افزونه یا پیکربندی اضافی.

aspect-ratio
در آخرین نسخه VS Code، با پشتیبانی مرورگر که بر حسب Baseline بیان شده است:"به طور گسترده در مرورگرهای اصلی در دسترس است (Baseline از سال 2021)"
وقتی ماوس را روی یک ویژگی وب در آخرین نسخه VS Code نگه دارید، وضعیت پایه آن را خواهید دید. و برای اینکه بفهمید این ویژگی چه مدت پشتیبانی شده است، VS Code همچنین سالی را که به Baseline تبدیل شده است را به شما می گوید. یا، برای ویژگیهایی که هنوز خط پایه نیستند، به شما میگوید که این ویژگی در کدام مرورگرها هنوز به طور کامل اجرا نشده است.
در نسخههای قبلی VS Code، این کار چندان ساده نبود. نگاهی به فهرستی از نسخههای مرورگر پشتیبانیشده و بررسی اینکه کدام مرورگر وجود ندارد، کمی فکر میکند. شاید ساده ترین بخش برای فهمیدن این بود که چه مدت از این ویژگی در مرورگرها پشتیبانی می شود. برای آن، باید بدانید که هر نسخه چه زمانی منتشر شده است، که دقیقاً دانش عمومی نیست! خوشبختانه، همه اینها در وضعیت پایه و سال لحاظ می شود.

autocorrect
با دسترسی محدوداین نسخه همچنین شامل چیزی کاملاً جدید است. قبلاً، شما فقط می توانستید داده های پشتیبانی مرورگر را برای ویژگی های CSS جمع آوری کنید. این به ویژه با توجه به سرعت باورنکردنی که در آن ویژگیهای جدید CSS هر ساله ارسال میشود مفید بود. اما در HTML نیز نوآوری های زیادی در حال رخ دادن است! از این نسخه، VS Code همچنین شروع به نمایش اطلاعات پشتیبانی مرورگر برای عناصر و ویژگیهای HTML از نظر وضعیت پایه آنها میکند.
به عنوان مثال، ویژگی ورودی autocorrect
در اولین مرورگر خود، فایرفاکس، تنها چند ماه پیش ارسال شد. خوب است که بتوانید بازخورد فوری دریافت کنید که این ویژگی در دسترس محدود است، بنابراین میتوانید در مورد اینکه کجا کار میکند یا نمیکند اطلاعات بیشتری کسب کنید. در این مورد خاص، در مرورگرهای پشتیبانی نشده بی ضرر است، بنابراین آن را دنبال کنید!

dialog
گسترده در دسترس و ویژگیهای popover
جدید در دسترس قرار دهید سایر ویژگیهای HTML مانند عنصر dialog
به زیبایی autocorrect
کاهش نمییابد. بنابراین اطمینانبخش است که میتوانید از Hovercard dialog
استفاده کنید و ببینید که در واقع از سال 2022 پایه بوده است و بهطور گسترده در مرورگرهای اصلی در دسترس است. چیزی شبیه به این باید به شما اعتماد به نفسی بدهد تا ویژگیهایی را که در غیر این صورت فکر میکردید خیلی پیشرفته هستند را بپذیرید.
Popover API نمونه دیگری از ویژگی های HTML است که از سال 2024 شروع شده است، بنابراین هنوز به عنوان جدیداً در دسترس در نظر گرفته می شود. این بدان معناست که در حالی که توسط همه مرورگرهای اصلی پشتیبانی می شود، 2.5 سال مورد نیاز برای در دسترس شدن گسترده نبوده است. بنابراین ممکن است بخواهید قبل از ارسال این ویژگی برای همه کاربران خود، کمی احتیاط کنید.

autocorrect
هنوز خط پایه نیست، و آن هشدار را با یک نظر حذف می کندآماده بودن این اطلاعات در VS Code یک افزایش بهره وری عالی است. اما اگر حتی نیازی به نگه داشتن ماوس روی یک ویژگی برای مشاهده Baseline بودن آن نداشته باشید چه؟ که توسط یک ابزار جداگانه اما مرتبط امکان پذیر شده است: لینترها.
به عنوان مثال، پسوند ESLint برای VS Code میتواند فایلهای HTML و CSS شما را پردهی کند و به هر ویژگی که هنوز خط پایه نیست، زیرخطهای واضح اضافه کند. این توسط قوانین use-baseline
از پلاگین های HTML ESLint و ESLint برای CSS به تازگی اضافه شده است. قانون مشابهی برای Stylelint نیز وجود دارد، اگر این مورد شماست. البته، این تنها یکی از بسیاری از مزایای لینتترها است، اما نشان میدهد که چقدر آنها هاورکارتهای جدید با قابلیت Baseline را تکمیل میکنند.
اگر از کاربران VS Code هستید، امیدوارم که هاورکارت های جدید را امتحان کنید. و اگر کاربر VS Code نیستید، من یک خبر بسیار خوب دارم. بسیاری از IDE ها یا از Code - OSS (نسخه منبع باز کد VS) جدا شده اند یا به همان سرورهای زبانی متکی هستند که هاورکارت های HTML و CSS آن را تامین می کنند. این IDE های پایین دستی ممکن است هفته ها یا ماه ها طول بکشد تا به آخرین نسخه ارتقا پیدا کنند، اما وقتی این کار را انجام دادند، باید به طور خودکار رابط کاربری پایه جدید را به ارث ببرند:
- VSCodium
- استودیو Firebase
- مکان نما
- موج سواری
- زد
- کسوف تیا
- Trae
- فضاهای کد GitHub
- فضاهای کاری GitLab
- تکرار کنید
- StackBlitz (بولت)
JetBrains همچنین در تلاش است تا Baseline را با تمام IDE های مبتنی بر IntelliJ خود، از WebStorm ، یکپارچه کند. ما در یک پست وبلاگ جداگانه در مورد آن صحبت خواهیم کرد — با ما همراه باشید.
ابزارها و منابع توسعهدهنده بیشتر و بیشتر در حال اضافه کردن پشتیبانی Baseline هستند، و این یکپارچهسازیهای جدید IDE که توسط VS Code رهبری میشوند، بسیار هیجانانگیز هستند. ما زمان زیادی را در IDE های خود می گذرانیم، و داشتن این داده های پایه در دستان ما به شفافیت بیشتر و سازگاری با ابزارهای متقابل به گردش کار توسعه ما کمک می کند. برای کسب اطلاعات بیشتر در مورد Baseline و سایر ادغامهای ابزار مانند این، برای منابع بیشتر به راهنمای Baseline ما مراجعه کنید.