Nowości w Chrome 118

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 118.

Reguła CSS @scope.

Reguła @scope pozwala programistom określić zakres reguł stylu na dany pierwiastek zakresu i określić styl elementów odpowiednio do tego poziomu.

W przypadku @scope możesz zastępować style na podstawie bliskości, co różni się od zwykłych stylów CSS, które stosuje się wyłącznie na podstawie kolejności źródeł i szczegółowości. W przykładzie poniżej mamy 2 motywy.

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

bez zakresu, zastosowany styl jest ostatni zadeklarowany.

Bez @scope
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

Dwa linki, pierwszy z nich brzmi: „Jestem jasnoróżowy!”. Drugi: „Różowy róż”. Oba są tak naprawdę jasnoróżowe, pod linkami tekst „Źródła” zawiera styl deklaracji zamówienia.

Zakres może obejmować elementy zagnieżdżone, a stosowany styl określa najbliższy element nadrzędny.

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

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

Dwa linki: „Jasnoróżowy!”. Drugi: „Inny różowy”, ciemniejszy różowy, pod tekstem linków „najbliższy styl przodka”, a obok niego znajduje się zielony znacznik wyboru.

Dzięki zakresowi nie musisz też wpisywać długich, złożonych nazw klas, a także ułatwia zarządzanie większymi projektami i unikanie konfliktów w nazwach.

Bez @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;
}
Z @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;
  }
}

Zakres pozwala też określić styl komponentu bez określania stylu elementów zagnieżdżonych. To znaczy, że mogą pojawić się „dziury”, w których styl zakresu nie ma zastosowania.

Tak jak w przykładzie poniżej, możemy zastosować styl do tekstu i wykluczyć elementy sterujące lub odwrotnie.

reprezentacja powyższego kodu html z uwzględnieniem słów w zakresie obok pierwszego i trzeciego elementu div, a słowo wykluczone obok drugiego i czwartego elementu 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;
  }
}

Więcej informacji znajdziesz w artykule Ograniczanie zasięgu selektorów za pomocą reguły @scope at-rule.

prefers-reduced-transparency funkcja multimediów

Zapytania dotyczące multimediów służą do wyświetlania użytkownikom treści, które są dostosowane do jego preferencji i warunków działania urządzenia. Ta wersja Chrome wprowadza nową wartość, która może zostać wykorzystana do dostosowania interfejsu użytkownika: prefers-reduced-transparency.

Nową wartość, którą możesz testować za pomocą zapytań o multimedia, to prefers-reduced-transparency. Umożliwia ona deweloperom dostosowywanie treści internetowych do preferencji użytkownika, aby zmniejszyć przejrzystość w systemie operacyjnym, np. przez ustawienie Zmniejsz przezroczystość w systemie macOS. Prawidłowe opcje to reduce lub no-preference.

.translucent {
  opacity: 0.4;
}

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

Możesz sprawdzić, jak to wygląda w Narzędziach deweloperskich:

Aby uzyskać więcej informacji na temat procesu płatności, zapoznaj się z dokumentacją dotyczącą preferowanej przejrzystości.

Poprawka: poprzednia wersja tego artykułu informowała o nowej funkcji multimediów scripting dostępnej w tej wersji. Będzie ona dostępna w wersji 120.

Ulepszenia panelu Źródła w Narzędziach deweloperskich

W Narzędziach deweloperskich wprowadziliśmy te ulepszenia w panelu Źródła: funkcja obszaru roboczego. Przede wszystkim zmieniła się nazwa panelu Źródła > System plików na Obszar roboczy wraz z innym tekstem interfejsu. Opcja Źródła > Obszar roboczy umożliwia też synchronizowanie zmian wprowadzonych w Narzędziach deweloperskich bezpośrednio z plikami źródłowymi.

Możesz też zmieniać kolejność paneli po lewej stronie panelu Źródła, przeciągając i upuszczając je. Panel Źródła umożliwia teraz drukowanie wbudowanego kodu JavaScript w następujących typach skryptów: module, importmap i speculationrules. Możesz też wyróżniać składnię typów skryptów importmap i speculationrules, które obsługują kod JSON.

Modyfikacja druku i wyróżnianie składni typu skryptu w regułach spekulacyjnych przed i po.

Sprawdź nowości w Narzędziach deweloperskich, aby dowiedzieć się więcej o aktualizacjach Narzędzi deweloperskich w Chrome 118.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 118.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Cześć Adriana Jara, a gdy tylko pojawi się Chrome 119, będę informować Cię o nowościach w Chrome.