جدید در کروم 90

پیت لی پیج

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

  • مقدار جدیدی برای ویژگی overflow CSS وجود دارد.
  • API سیاست ویژگی به خط‌مشی مجوزها تغییر نام داده است.
  • و راه جدیدی برای پیاده سازی و استفاده از Shadow DOM به طور مستقیم در HTML وجود دارد.
  • من در دهه 1990 کتهای تقریباً مشابهی داشتم.
  • و بسیاری موارد دیگر وجود دارد.

من Pete LePage هستم، و 411 را برای توسعه دهندگان در Chrome 90 دارم که به سبک دهه 1990 انجام می دهد!

جلوگیری از سرریز با overflow: clip

CSS عالی است

CSS همه اینهاست و یک کیسه تراشه! اما، من فکر می‌کنم هر توسعه‌دهنده وب چیزی را دیده و تجربه کرده است که در مقطعی به طرز عجیبی سرریز می‌شود. یک پست عالی در ترفندهای CSS درباره روش‌های مختلف مدیریت سرریز وجود دارد، به عنوان مثال، استفاده از overflow: hidden یا auto .

در CSS Overflow Spec ، یک ویژگی clip جدید وجود دارد که مشابه hidden کار می کند. 

.overflow-clip {
  overflow: clip;
}
کادر مربعی با متن CSS بسیار جذاب است، جایی که awesome از جعبه خارج می شود

استفاده از overflow: clip این امکان را برای شما فراهم می کند که از هر نوع پیمایش برای جعبه، از جمله پیمایش برنامه ای، جلوگیری کنید. این بدان معناست که جعبه به عنوان یک ظرف طوماری در نظر گرفته نمی شود. زمینه قالب بندی جدیدی را شروع نمی کند. اگر به آن نیاز دارید، می‌توانید از طریق overflow-x و overflow-y برش را روی یک محور اعمال کنید.

اوه، و FYI - همچنین overflow-clip-margin وجود دارد که به شما امکان می دهد مرز کلیپ را گسترش دهید. این برای مواردی مفید است که سرریز جوهر وجود دارد که باید قابل مشاهده باشد. 

.overflow-clip {
  overflow: clip;
  overflow-clip-margin: 25px;
}
کادر مربعی با متن CSS بسیار جذاب است، جایی که awesome از جعبه خارج می شود

overflow: clip در عمل در https://petele-css-is-awesome.glitch.me/

خط مشی ویژگی اکنون به سیاست مجوزها تبدیل شده است

در Chrome 74، Feature Policy API را معرفی کردیم که به شما امکان می‌دهد به طور انتخابی رفتار برخی از APIها و ویژگی‌های وب را در مرورگر فعال، غیرفعال و تغییر دهید. این خط مشی ها قراردادی بین شما و مرورگر است. آنها به مرورگر اطلاع می دهند که قصد شما چیست.

اگر کد شما یا هر یک از کتابخانه های شخص ثالثی که استفاده می کنید قوانین از پیش انتخاب شده شما را نقض کند، مرورگر این رفتار را با UX بهتر لغو می کند یا فقط می گوید "با دست صحبت کن"، API را به طور کلی مسدود می کند.

از Chrome 90، Feature Policy API به Permissions Policy تغییر نام داده خواهد شد و عنوان HTTP نیز به همراه آن تغییر نام داده شده است. در همان زمان، جامعه بر روی یک نحو جدید، مبتنی بر مقادیر فیلد ساختاریافته برای HTTP قرار گرفته است.

کروم 90 و جدیدتر 

Permissions-Policy: geolocation=()

کروم 89 و جدیدتر 

Feature-Policy: geolocation 'none'

اگر به نحوه استفاده از آن در سایت خود علاقه مند هستید، مقدمه سیاست ویژگی را بررسی کنید.

Shadow DOM اعلامی

Shadow DOM ، بخشی از استاندارد Web Components، راهی را برای دامنه سبک های CSS به یک زیردرخت DOM خاص و جداسازی آن زیردرخت از بقیه سند ارائه می دهد. تا به حال، تنها راه استفاده از Shadow DOM ساخت ریشه سایه با استفاده از جاوا اسکریپت بود.

const host = document.getElementById('host');
const opts = {mode: 'open'};
const shadowRoot = host.attachShadow(opts);
const html = '<h1>Hello Shadow DOM</h1>';
shadowRoot.innerHTML = html;

این برای رندر سمت کلاینت به خوبی کار می کند، اما در رندر سمت سرور که هیچ راهی برای بیان Shadow Roots در HTML تولید شده توسط سرور وجود ندارد، چندان خوب عمل نمی کند. اما، با شروع Chrome 90، با Declarative Shadow DOM، شما خوب هستید. شما می توانید ریشه های سایه را تنها با استفاده از HTML ایجاد کنید.

ریشه Shadow Declarative یک عنصر <template> با ویژگی shadowroot است. توسط تجزیه کننده HTML شناسایی می شود و بلافاصله به عنوان ریشه سایه عنصر والد آن اعمال می شود.

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

بارگیری نشانه گذاری خالص HTML در این درخت DOM نتیجه می گیرد:

<host-element>
  #shadow-root (open)
  <slot>
    ↳
    <h2>Light content</h2>
  </slot>
</host-element>

این به ما مزایای کپسوله سازی Shadow DOM و نمایش اسلات در HTML ایستا را می دهد. برای تولید کل درخت، از جمله Shadow Root، نیازی به جاوا اسکریپت نیست.

برای جزئیات بیشتر، Declarative Shadow DOM را در web.dev بررسی کنید.

و بیشتر

و البته موارد بسیار بیشتری وجود دارد.

برای کمک به بهبود حریم خصوصی و حتی سرعت بارگیری برای کاربرانی که از سایت‌هایی که از HTTPS پشتیبانی می‌کنند بازدید می‌کنند، نوار آدرس Chrome به‌طور پیش‌فرض از https:// استفاده می‌کند . و اگر تغییر مسیر خودکار از HTTP به HTTPS را تنظیم نکرده اید، اکنون زمان بسیار خوبی برای انجام آن خواهد بود.

و یک رمزگذار AV1 در دسک‌تاپ کروم ارسال می‌شود که به‌طور خاص برای کنفرانس ویدیویی با ادغام WebRTC بهینه شده است.

در ادامه مطلب

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

مشترک شوید

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

من Pete LePage هستم، و به محض انتشار کروم 91، همین الان اینجا خواهم بود تا به شما بگویم چه چیزی در کروم جدید است!

یک فریاد خاص

از فیلمبرداری این قسمت با موضوع دهه 1990 از New in Chrome بسیار لذت بردم. با تشکر فراوان از شان میهان برای این ایده و برای گرد هم آوردن افراد شگفت انگیزی که به باز کردن زمان تا سال 1990 کمک کردند.

طراحی GDS

  • فولا آکینولا
  • درک باس
  • کریستوفر بودل
  • نیک کروزیک
  • کریس واکر

طراحی صدا و موسیقی اضافی

  • برایان گوردون

و البته، لورن بورجا، لی کاروترز، و لوکاس هولچک که روی همه ویدیوهای New in Chrome من کار می‌کنند و باعث می‌شوند خیلی بهتر از آنچه هستم به نظر برسم. از شما متشکرم