Nowości w Chrome 118

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

Reguła CSS @scope.

Reguła @scope pozwala programistom określać zakres reguł stylu do danego poziomu głównego zakresu i dostosowywać styl elementów do bliskości tego rdzenia.

Dzięki funkcji @scope możesz zastępować style na podstawie odległości, co różni się od typowych stylów CSS stosowanych tylko na podstawie kolejności źródłowej i dokładności. W przykładzie poniżej przedstawiono 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.

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

Dwa linki, z których pierwszy ma treść: Mam różowy kolor! drugi ma treść „Inny różowy”, oba linki są w rzeczywistości jasnoróżowe, a pod tekstem linków znajduje się tekst: styl deklaracji kolejności źródeł.

Zakres może obejmować elementy zagnieżdżone, a stosowany jest styl dla najbliższego elementu nadrzędnego.

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

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

Dwa linki, pierwszy o treści: „Jestem jasny róż!”. drugi ma postać „Inny różowy”, a drugi jest ciemniejszy od różowego. Pod stylem tekstu najbliższego elementu nadrzędnego znajduje się zielony znacznik wyboru.

Zakres pozwala też uniknąć zapisywania długich, skomplikowanych nazw klas i ułatwia zarządzanie większymi projektami oraz unikanie konfliktów nazw.

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

Za pomocą zakresu możesz też określać styl komponentu bez określania stylu pewnych elementów, które są w nim umieszczone. W ten sposób mogą powstać „dziury” w miejscach, w których styl zakresu nie ma zastosowania.

Podobnie jak w przykładzie poniżej, możemy zastosować styl do tekstu i wykluczyć elementy sterujące lub na odwrót.

reprezentacja powyższego elementu html ze słowami objętymi zakresem 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 CSS @scope.

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 media, 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 to w Narzędziach deweloperskich:

Więcej informacji znajdziesz w dokumentacji dotyczącej prefers-reduced-transparency.

Poprawka: poprzednia wersja tego artykułu odnosiła się do nowej funkcji multimedialnej scripting dostępnej w tej wersji. W rzeczywistości będzie to wersja 120.

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

W Narzędziach deweloperskich w panelu Źródła wprowadziliśmy te ulepszenia: obszar roboczy zwiększył spójność między innymi dzięki zmianie nazw sekcji Źródła > Panel systemu plików do obszaru roboczego wraz z innym tekstem interfejsu, otwórz sekcję Ź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ż teraz zmieniać kolejność paneli po lewej stronie panelu Źródła, przeciągając i upuszczając je. W panelu Źródła możesz teraz zmieniać wygląd wbudowanego kodu JavaScript w następujących typach skryptów: module, importmap, speculationrules oraz wyróżniać składnię skryptów importmap i speculationrules, które obsługują format JSON.

Przed i po drukowaniu ładunkowym oraz wyróżnianie składni typu skryptu reguł spekulacyjnych.

Sprawdź Co nowego w Narzędziach deweloperskich, aby dowiedzieć się więcej o aktualizacjach Chrome 118.

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowe zmiany w Chrome 118.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Adriana Jara. Gdy tylko Chrome 119 się ukaże, opowie o nowościach w Chrome.