Nowości w Chrome 118

Adriana Jara
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ślać zakres reguł stylu pod kątem danego pierwiastka zakresu i stylizować elementy zgodnie z przyleganiem do tego pierwiastka zakresu.

@scope umożliwia zastępowanie stylów na podstawie bliskości, która różni się od zwykłych stylów CSS, które opierają się wyłącznie na kolejności i specyfice źródła. W przykładzie poniżej mamy 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 ostatni zadeklarowany.

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

Dwa linki. Pierwszy brzmi: „Jasnoróżowy!”, drugi: „Różowy róż”; oba są jasnoróżowe, pod tekstem podlinkiem styl deklaracji źródeł.

Zakres może obejmować elementy zagnieżdżone, a stosowany styl odpowiada stylowi z najbliższym elementem nadrzędnym.

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

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

Dwa linki, pierwszy to „Jasnoróżowy!”. Drugi to „Inny różowy”, ciemniejszy różowy, pod tekstem linków „najbliższy styl przodków” i zielonym znacznikiem wyboru.

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

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ślić styl komponentu bez określania stylu niektórych elementów, w których są zagnieżdżone. Chodzi o to, że mogą pojawić się „dziury”, w których styl zakresu nie ma zastosowania.

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

przedstawiony powyżej kod HTML, w którym uwzględnione są słowa 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 multimedialna

Zapytania o multimedia pozwalają nam wyświetlać użytkownikowi treści, które dostosowują się do jego preferencji i warunków korzystania z urządzenia. Ta wersja Chrome wprowadza nową wartość, która może służyć do dostosowywania wrażeń użytkownika: prefers-reduced-transparency.

Nowa wartość, którą możesz testować za pomocą zapytań o media, to prefers-reduced-transparency, która umożliwia deweloperom dostosowywanie treści internetowych do preferencji wybranych przez użytkownika w celu zmniejszenia przezroczystości systemu operacyjnego, takich jak 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 też sprawdzić, jak to wygląda w Narzędziach deweloperskich:

Aby dowiedzieć się więcej o płatnościach, zapoznaj się z dokumentacją dotyczącą preferowanej przejrzystości.

Poprawka: poprzednia wersja tego artykułu wspominała o nowej funkcji multimedialnej scripting, która jest dostępna w tej wersji. Tak naprawdę będzie w wersji 120.

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

W Narzędziach deweloperskich w panelu Źródła wprowadziliśmy te ulepszenia: funkcja obszaru roboczego zwiększyła spójność, w szczególności 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.

Ponadto możesz zmieniać kolejność paneli z lewej strony panelu Źródła przez przeciąganie i upuszczanie. Panel Źródła umożliwia teraz ładne drukowanie 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ą kod JSON.

Przed i po zastosowaniu funkcji ładunku i podświetlania składni typu skryptu reguł spekulacyjnych.

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

…i wiele innych.

Oczywiście dostępnych jest też znacznie więcej.

Więcej informacji

Ta lista zawiera tylko kilka najważniejszych informacji. Poniżej znajdziesz dodatkowe informacje o zmianach w Chrome 118.

Zasubskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Cześć Adriana Jara, zaraz gdy tylko pojawi się Chrome 119, opowiem Ci o nowościach w tej przeglądarce.