Oto, co musisz wiedzieć na ten temat:
- Zadeklaruj konkretne style w komponencie za pomocą reguły CSS
@scope
. - Dostępna jest nowa funkcja związana z multimediami:
prefers-reduced-transparency
. Ulepszenia w panelu Źródła w Narzędziach deweloperskich.
A do tego wiele więcej.
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.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Zakres może obejmować elementy zagnieżdżone, a stosowany styl określa najbliższy element nadrzędny.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
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.
<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; } }
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.
<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.
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.
Interfejs WebUSB API jest teraz dostępny dla skryptów Service Worker zarejestrowanych przez rozszerzenia przeglądarki, dzięki czemu deweloperzy mogą używać tego interfejsu API podczas odpowiadania na zdarzenia rozszerzenia.
Aby pomóc deweloperom usprawnić proces wysyłania próśb o płatność, usuwamy wymaganie dotyczące aktywacji użytkownika w
Payment Request
iSecure Payment Confirmation
.Cykl publikowania wersji Chrome skraca się. stabilne wersje będą pojawiać się co 3 tygodnie. Od wersji Chrome 119 będzie ona dostępna za 3 tygodnie.
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.
- Nowości w Narzędziach deweloperskich w Chrome (118)
- Wycofanie i usunięcie Chrome 118
- Aktualizacje ChromeStatus.com w Chrome 118
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
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.