جدید در کروم 118

آدریانا خارا

در اینجا چیزی است که شما باید بدانید:

من آدریانا خارا هستم. بیایید وارد آن شویم و ببینیم چه چیز جدیدی برای توسعه دهندگان در Chrome 118 وجود دارد.

قانون CSS @scope .

@scope at-rule به توسعه‌دهندگان اجازه می‌دهد تا قوانین سبک را به یک ریشه محدوده معین، و عناصر را با توجه به نزدیکی آن ریشه محدوده، سبک‌دهی کنند.

با @scope می‌توانید سبک‌های مبتنی بر مجاورت را نادیده بگیرید، که با سبک‌های معمول CSS که فقط بر اساس ترتیب و ویژگی منبع اعمال می‌شوند، متفاوت است. در مثال زیر دو موضوع وجود دارد.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

بدون دامنه، سبک اعمال شده آخرین مورد اعلام شده است.

بدون @scope 
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

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

با scope می‌توانید عناصر تودرتو داشته باشید و سبکی که اعمال می‌شود برای نزدیک‌ترین اجداد است.

با @scope 
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

دو پیوند، اولی «صورتی روشن هستم!» را می‌خواند، پیوند دوم «صورتی متفاوت» را می‌خواند، پیوند دوم صورتی تیره‌تر است، زیر پیوندها متن نزدیک‌ترین اجداد است و یک علامت سبز در کنار آن دارد.

Scope همچنین شما را از نوشتن نام کلاس های طولانی و پیچیده نجات می دهد و مدیریت پروژه های بزرگتر و جلوگیری از تداخل نامگذاری را آسان می کند.

بدون @scope 
<div class="first-container">
  <h1 class="first-container__main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1>
</div>

.first-container__main-title {
  color: grey;
}

.second-container__main-title {
  color: mediumturquoise;
}
با @scope 
<div class="first-container">
  <h1 class="main-title"> I'm the main title</h1>
</div>

<div class="second-container">
  <h1 class="main-title"> I'm the main title, but somewhere else</h1>
</div>

@scope(.first-container){
  .main-title {
   color: grey;
  }
}
@scope(.second-container){
  .main-title {
   color: mediumturquoise;
  }
}

با استفاده از scope، می‌توانید یک جزء را بدون استایل دادن به چیزهای خاصی که درون آن قرار دارند، استایل دهید. به نحوی که می‌توانید «حفره‌هایی» داشته باشید که در آن سبک محدوده اعمال نمی‌شود.

مانند مثال زیر، می‌توانیم استایل را به متن اعمال کنیم و کنترل‌ها را حذف کنیم یا برعکس.

نمایش html بالا، با کلمات در محدوده در کنار div اول و سوم و کلمه حذف شده در کنار div دوم و چهارم.

<div class="component">
  <div class="purple">
    <h1>Drink water</h1>
    <p class="purple">hydration is important</p>
  </div>
  <div class="click-here">
    <p>not in scope</p>
    <button>click here</button>
  </div>

  <div class="purple">
    <h1 class="purple">Exercise</h1>
    <p class="purple">move it move it</p>
  </div>

  <div class="link-here">
    <p>Excluded from scope</p>
    <a href="#"> link here </a>
  </div>
</div>

@scope (.component) to (.click-here, .link-here) {
  div {
    color: purple;
    text-align: center;
    font-family: sans-serif;
  }
}

برای اطلاعات بیشتر ، مقاله را با CSS @scope at-rule محدود کنید .

ویژگی رسانه ای prefers-reduced-transparency

ما از پرسش‌های رسانه‌ای برای ارائه تجربیاتی برای کاربر استفاده می‌کنیم که با ترجیحات کاربر و شرایط دستگاه سازگار است. این نسخه Chrome یک مقدار جدید اضافه می‌کند که می‌تواند برای تطبیق تجربه کاربر استفاده شود: prefers-reduced-transparency .

مقدار جدیدی که می‌توانید با درخواست‌های رسانه آزمایش کنید prefers-reduced-transparency است که به توسعه‌دهندگان اجازه می‌دهد محتوای وب را با اولویت‌های انتخابی کاربر برای کاهش شفافیت در سیستم‌عامل، مانند تنظیم کاهش شفافیت در macOS، تطبیق دهند. گزینه های معتبر reduce یا no-preference هستند.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

و، می توانید با DevTools بررسی کنید که چگونه به نظر می رسد:

برای اطلاعات بیشتر، اسناد ترجیحی-کاهش شفافیت را بررسی کنید.

تصحیح: نسخه قبلی این مقاله به یک ویژگی جدید رسانه scripting در این نسخه اشاره داشت. در واقع در نسخه 120 خواهد بود.

بهبود پانل منابع در DevTools

DevTools پیشرفت‌های زیر را در پنل Sources دارد: ویژگی فضای کاری سازگاری را بهبود بخشیده است، به ویژه با تغییر نام پنجره Sources > Filesystem به Workspace به همراه سایر متن‌های UI، Sources > Workspace همچنین به شما امکان می‌دهد تغییراتی را که در DevTools ایجاد می‌کنید مستقیماً با خود همگام‌سازی کنید. فایل های منبع

همچنین، اکنون می‌توانید با کشیدن و رها کردن، پانل‌ها را در سمت چپ پانل Sources مرتب کنید، و پانل Sources اکنون می‌تواند جاوا اسکریپت درون خطی را در انواع اسکریپت زیر چاپ کند: module ، importmap ، speculationrules و نحوی از importmap و speculationrules برجسته کنید. انواع اسکریپت که هر دو دارای JSON هستند.

قبل و بعد از چاپ زیبا و برجسته سازی نحوی نوع اسکریپت قوانین حدس و گمان.

برای اطلاعات بیشتر در مورد به‌روزرسانی‌های Chrome 118 DevTools ، موارد جدید در DevTools را بررسی کنید.

و بیشتر!

البته چیزهای بیشتری وجود دارد.

در ادامه مطلب

این فقط برخی از نکات کلیدی را پوشش می دهد. برای تغییرات بیشتر در Chrome 118 پیوندهای زیر را بررسی کنید.

مشترک شوید

برای به‌روز ماندن، در کانال YouTube Developers Chrome مشترک شوید و هر زمان که ویدیوی جدیدی را راه‌اندازی کنیم، یک اعلان ایمیلی دریافت خواهید کرد.

Yo soy Adriana Jara، و به محض اینکه Chrome 119 منتشر شد، من اینجا خواهم بود تا به شما بگویم چه چیزهای جدیدی در Chrome وجود دارد!