Minęło trochę czasu. Film Nowości w Chrome wraca z informacjami o:
- pole tekstowe CSS, które umożliwia dokładne kontrolowanie odstępów pionowych za pomocą danych dotyczących czcionki;
- Interfejs API dostępu do systemu plików, który jest teraz obsługiwany na Androidzie i w widoku internetowym.
- Metoda przenoszenia elementu DOM z zachowaniem stanu za pomocą
moveBefore. - Lekkie zamknięcie jest dostępne dla elementu
<dialog>. - W sekcji Podstawy i inne znajdziesz wiele zmian.
Nazywam się Mariko. Zobaczmy, co nowego w Chrome w ostatnich 3 wersjach.
Pole tekstowe CSS
Właściwość CSS text-box umożliwia dokładne kontrolowanie odstępów pionowych za pomocą wymiarów czcionki.
Każda czcionka tworzy inną ilość przestrzeni nad i pod znakami, co określa rozmiar elementu.
Do tej pory nie można było kontrolować rozmiaru tych przestrzeni.
Nowa właściwość text-box-trim określa, które krawędzie mają zostać przycięte (górna lub dolna), a właściwość text-box-edge określa, jak ma być przycięta.
Na przykład przycinanie do wysokości czcionki, czyli do górnej krawędzi znaków wielkich liter.
Możesz też użyć skrótu właściwości text-box.
Więcej informacji o używaniu tych nowych właściwości znajdziesz w artykule CSS text-box-trim.
Interfejs API dostępu do systemu plików
Dodana w Chrome 133 funkcja DOM Node.prototype.moveBefore umożliwia przenoszenie elementów w drzewie DOM bez resetowania ich stanu.
Gdy usuniesz element, a następnie ponownie go wstawisz, aby przenieść element DOM, jego stan zostanie zresetowany. Dzięki temu nowemu prymitywowi stan węzła jest zachowany.
Dzięki temu ramki iframe pozostają załadowane, aktywne elementy pozostają w fokusie, elementy takie jak wyskakujące okienka i dialogi pozostają otwarte, a przejścia lub animacje CSS działają dalej.
Przenoszenie elementu DOM z zachowaniem stanu
Interfejs API dostępu do systemu plików jest od jakiegoś czasu dostępny w Chrome na komputery. Ten interfejs API umożliwia aplikacjom internetowym interakcję z plikami w lokalnym systemie plików użytkownika. Od wersji 132 Chrome interfejs API jest dostępny na Androidzie i w komponentach WebView.
Aby odczytać plik, wywołaj funkcję showOpenFilePicker(). Ta metoda wyświetla selektor plików, a potem zwraca uchwyt pliku, którego można użyć do odczytania pliku.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Aby zapisać plik na dysku, możesz użyć tego samego identyfikatora pliku, który został wcześniej zwrócony, lub wywołać funkcję showSaveFilePicker(), aby uzyskać nowy identyfikator pliku.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
Do elementu <dialog> dodano funkcję szybkiego zamykania
Jeśli korzystasz z interfejsu Popover API do tworzenia wyskakujących okienek, wiesz, że jedną z przydatnych funkcji tego interfejsu jest lekkie zamknięcie. Użytkownicy mogą kliknąć tło, a element wyskakujący zamknie się bez konieczności kliknięcia przycisku Zamknij.
Ta funkcja jest teraz obsługiwana również w komponencie <dialog>.
Gdy atrybut closedby ma wartość any, okno można zamknąć, klikając poza nim lub naciskając klawisz Escape.
<dialog closedby="any">...</dialog>
Jest to takie samo zachowanie jak w przypadku, gdy opcja okna wyskakującego jest ustawiona na „automatycznie”.
Aktualizacje w punkcie odniesienia
Oto wiadomości dotyczące usługi Podstawy
Punkt odniesienia Dostępny ponownie
Po pierwsze, nowo dostępne funkcje podstawowe to funkcje, które zostały niedawno wprowadzone we wszystkich 4 głównych przeglądarkach.
scrollbar-gutter i scrollbar-width
Za pomocą właściwości CSS scrollbar-gutter możesz zarezerwować miejsce na pasek przewijania, aby uniknąć niepożądanych zmian układu podczas pojawiania się lub znikania paska przewijania. Za pomocą atrybutu scrollbar-width możesz utworzyć węższą suwak lub całkowicie go ukryć bez wpływu na możliwość przewijania.
ruby-align
Za pomocą właściwości CSS ruby-align możesz określić wyrównanie tekstu podstawowego i adnotacji.
Promise.try
Promise.try to wygodna metoda do obsługi błędów w przypadku żądań synchronicznych. Dzięki temu możesz wyeliminować funkcje wywołania zwrotnego, gdy próbujesz wysłać żądanie za pomocą Promise.resolve.
Optymalizacja wywozu śmieci i wywołań ogonowych w Wasm
WebAssembly obsługuje teraz zbieranie elementów i optymalizacje wywołań ogonowych.
Punkt odniesienia Dostępne powszechnie
Tablice findLast() i findLastIndex()
Metody tablicy findLast() i findLastIndex() to bardzo wygodne metody pobierania elementów z końca tablicy. Ta funkcja jest obsługiwana we wszystkich głównych przeglądarkach od 30 miesięcy, co oznacza, że jest teraz powszechnie dostępna w ramach funkcji Podstawowe.
Właściwości poszczególnych transformacji
Pojedyncze właściwości transformacji, które zapewniają większą kontrolę nad przekształceniami CSS, są teraz dostępne w ramach domyślnych ustawień .
Więcej informacji o Punkcie odniesienia
Jeśli chcesz dowiedzieć się więcej o wartościach domyślnych i różnicach między opcjami „Nowo dostępne” i „Dostępne powszechnie”, obejrzyj krótki film, który dla Ciebie przygotowałem.
Więcej informacji o stanie bazowym funkcji znajdziesz w panelu stanu platformy internetowej.
Projekt interoperacyjności powraca w 2025 r.
I wreszcie projekt Interop powraca w 2025 roku z listą obszarów zainteresowania, w tym przejścia między widokami, pozycjonowanie kotwic CSS i interfejs API nawigacji. Sprawdź ogłoszenie dotyczące projektu.
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.
Nazywam się Mariko Kosaka i za 3 miesiące wrócę, aby opowiedzieć Ci więcej o nowościach w Chrome.