Nowości w Chrome 118

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

• Zadeklaruj konkretne style w komponencie za pomocą reguły CSS @scope.
• Dostępna jest nowa funkcja multimediów: prefers-reduced-transparency.

• W Narzędziach deweloperskich wprowadziliśmy ulepszenia w panelu Źródła.

• I to nie wszystko .

Nazywam się Adriana Jara. Zobaczmy, co nowego dla deweloperów w Chrome 118.

Reguła CSS @scope.

Reguła @scope at-rule pozwala deweloperom określać zakres reguł stylów w ramach danego korzenia zakresu oraz stylizować elementy zgodnie z ich bliskością względem tego korzenia.

Za pomocą atrybutu @scope możesz zastąpić style na podstawie bliskości. Jest to inne podejście niż zwykłe style CSS, które są stosowane tylko na podstawie kolejności i specyfikiczności źródła. W tym przykładzie występują 2 tematy.

<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 ostatnim zadeklarowanym.

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

Dzięki zakresowi możesz mieć elementy zagnieżdżone, a styl, który ma zastosowanie, jest tym, który ma zastosowanie do najbliższego przodka.

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

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

Zakres oszczędza też czas potrzebny na pisanie długich, zawiłych nazw klas, ułatwia zarządzanie większymi projektami i unikanie konfliktów nazw.

<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;
}

<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;
  }
}

Za pomocą zakresu możesz też nadać styl komponentowi bez stylizowania elementów, które są w nim zagnieżdżone. W pewnym sensie możesz mieć „dziury”, w których styl ograniczony nie będzie stosowany.

Podobnie jak w tym przykładzie, możemy zastosować styl do tekstu i wyłączyć elementy sterujące lub odwrotnie.

<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;
  }
}

Aby dowiedzieć się więcej, przeczytaj artykuł Ograniczanie zasięgu selektorów za pomocą reguły @scope w arkuszu CSS.

prefers-reduced-transparency funkcja multimedialna

Używamy zapytań o multimedia, aby zapewniać użytkownikom wrażenia dostosowane do jego preferencji i warunków urządzenia. Ta wersja Chrome dodaje nową wartość, która może służyć do dostosowywania interfejsu użytkownika: prefers-reduced-transparency.

Nowa wartość, którą możesz przetestować za pomocą zapytań o multimedia, to prefers-reduced-transparency. Pozwala ona deweloperom dostosowywać treści internetowe do preferencji użytkownika wybranych przez użytkownika w celu zwiększenia przejrzystości systemu operacyjnego, na przykład przy ustawieniu 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 też sprawdzić, jak wygląda w Narzędziach deweloperskich:

Więcej informacji znajdziesz w dokumentacji dotyczącej preferencji dotyczącej ograniczonej przejrzystości.

Sprostowanie: w poprzedniej wersji tego artykułu była mowa o nowej funkcji mediów scripting, która jest dostępna w tej wersji. W rzeczywistości będzie to wersja 120.

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

W panelu Źródła w Narzędziach deweloperskich wprowadzono następujące ulepszenia: funkcja workspace (przestrzeń robocza) zapewnia większą spójność, głównie dzięki zmianie nazwy panelu Źródła > System plików na Workspace (Przestrzeń robocza) oraz innych tekstów w interfejsie. Panel Źródła > Workspace umożliwia też synchronizację 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. Panel Źródła może też wyświetlać ładny format kodu JavaScript w ramach tych typów skryptów: module, importmap i speculationrules. Możesz też wyróżnić składnię skryptów importmap i speculationrules, które zawierają kod JSON.

Więcej informacji o aktualizacjach Narzędzi deweloperskich w Chrome 118 znajdziesz w artykule Nowości w Narzędziach deweloperskich.

I inne funkcje

Oczywiście jest ich znacznie więcej.

• Interfejs WebUSB API jest teraz dostępny dla usług Service Worker zarejestrowanych przez rozszerzenia przeglądarki, co pozwala deweloperom korzystać z interfejsu API podczas odpowiadania na zdarzenia rozszerzenia.

• Aby pomóc deweloperom zmniejszyć trudności związane z przepływami żądań płatności, usuwamy wymagania dotyczące aktywacji użytkownika w Payment Request i Secure Payment Confirmation.

• Cykl wydawniczy Chrome staje się krótszy – wersje stabilne będą publikowane co 3 tygodnie, zaczynając od Chrome 119, która pojawi się za 3 tygodnie.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby poznać inne zmiany w Chrome 118, kliknij linki poniżej.

• Nowości w Narzędziach deweloperskich w Chrome (118)
• Chrome 118 – wycofane i usunięte funkcje
• Aktualizacje ChromeStatus.com dotyczące Chrome 118
• Lista zmian w repozytorium kodu Chromium
• Kalendarz wydań Chrome

Subskrybuj

Zasubskrybuj kanał Chrome Developers w YouTube, aby być na bieżąco z informacjami o nowym filmie. Dzięki temu będziesz otrzymywać e-maila z powiadomieniem.

Cześć, tu Adriana Jara. Gdy tylko pojawi się wersja 119 Chrome, opowiem Ci, co nowego w tej przeglądarce.