Nowości w Chrome 118

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

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 źródeł i ich specyfikiczności. 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 jest ostatni zadeklarowany styl.

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

2 linki: pierwszy z treścią „I&#39;m lightpink!”, a drugi „Different pink”. Oba linki są w jasnym różu. Pod linkami znajduje się tekst w stylu deklaracji kolejności źródeł.

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

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

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

2 linki: pierwszy z treścią „I&#39;m lightpink!” (ang. „Jestem jasnoróżowy”), drugi z treścią „Different pink” (ang. „Inny róż”), w ciemniejszym różu, w stylu najbliższego przodka tekstu linku, z zieloną kratką obok.

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.

Bez @zakres
<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ż 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.

reprezentacja kodu HTML powyżej, w której słowa w zakresie znajdują się obok pierwszego i trzeciego div-a, a słowa wykluczone – obok drugiego i czwartego div-a.

<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

Korzystamy z zapytań dotyczących multimediów, aby zapewnić użytkownikom wrażenia dostosowane do ich preferencji i warunków na urządzeniu. Ta wersja Chrome dodaje nową wartość, która może być używana do dostosowywania interfejsu użytkownika: prefers-reduced-transparency.

Nową wartością, którą możesz testować za pomocą zapytań o multimedia, jest prefers-reduced-transparency, która pozwala deweloperom dostosować zawartość internetową do wybranych przez użytkownika preferencji dotyczących zmniejszenia przezroczystości w systemie operacyjnym, np. ustawienia Zmniejsz przezroczystość w systemie macOS. Dostępne 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.

Przed i po ładnym wydrukowaniu oraz podświetleniu składni reguł spekulacji w skrypcie

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.

Więcej informacji

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

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

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