Nieuw in Chrome Q1 2025: CSS-tekstvak, toegang tot bestandssysteem voor Android, Baseline-updates en meer!, Nieuw in Chrome Q1 2025: CSS-tekstvak, toegang tot bestandssysteem voor Android, Baseline-updates en meer!, Nieuw in Chrome Q1 2025: CSS-tekstvak, toegang tot bestandssysteem voor Android, Baseline-updates en meer!, Nieuw in Chrome Q1 2025: CSS-tekstvak, toegang tot bestandssysteem voor Android, Baseline-updates en meer!

Mariko Kosaka

Het is alweer een tijdje geleden! De Nieuw in Chrome-video is terug met informatie over:

Ik ben Mariko. Laten we erin duiken en kijken wat er nieuw is in Chrome voor de afgelopen drie releases.

CSS-tekstvak

Met de CSS- text-box kunt u de verticale afstand nauwkeurig bepalen door gebruik te maken van de lettertypestatistieken.

Elk lettertype produceert een andere hoeveelheid ruimte boven en onder de tekens, wat de grootte van het element bepaalt.

Tot nu toe was het onmogelijk om de grootte van deze ruimtes te controleren.

Er wordt een kop weergegeven waarbij de overtollige ruimte erboven met een schaar lijkt te zijn afgeknipt en verwijderd.

De nieuwe eigenschap text-box-trim specificeert de zijkanten die moeten worden bijgesneden, boven of onder, en de eigenschap text-box-edge specificeert hoe deze moet worden bijgesneden. Snijd bijvoorbeeld bij op hoofdletterhoogte, dit is de bovenkant van hoofdletters.

U kunt dit ook schrijven met de eigenschap Shorthand text-box .

Lees meer over het gebruik van deze nieuwe eigenschappen in het CSS text-box-trim artikel.

API voor toegang tot bestandssysteem

De in Chrome 133 toegevoegde DOM-primitieve Node.prototype.moveBefore laat je elementen door een DOM-boom verplaatsen, zonder de status van het element opnieuw in te stellen.

Wanneer u een element verwijdert en vervolgens opnieuw invoegt om een ​​DOM-element te verplaatsen, wordt de status van dat element gereset. Met behulp van deze nieuwe primitief blijft de toestand van een knooppunt behouden.

Dus iframes blijven geladen, actieve elementen blijven in focus, zaken als popovers en dialoogvensters blijven open en CSS-overgangen of animaties gaan door.

Staatsbehoudende manier om een ​​DOM-element te verplaatsen

De File System Access API is al enige tijd beschikbaar op Chrome Desktop. Met deze API kunnen webapps communiceren met bestanden op het lokale bestandssysteem van de gebruiker. Vanaf Chrome 132 is de API ook beschikbaar op Android en in WebViews.

Om een ​​bestand te lezen, roep je showOpenFilePicker() aan. Deze methode toont een bestandskiezer en retourneert vervolgens een bestandsingang die u kunt gebruiken om het bestand te lezen.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Om een ​​bestand op schijf op te slaan, kunt u dezelfde bestandsingang gebruiken die u eerder kreeg, of showSaveFilePicker() aanroepen om een ​​nieuwe bestandsingang te krijgen.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Lichte ontkenning komt naar het <dialog> element

Als je de Popover API hebt gebruikt om een ​​popover te maken, weet je dat een van de leuke kenmerken van de Popover API het lichte negeergedrag is. Gebruikers kunnen op de achtergrond klikken en het popover-element wordt gesloten zonder specifiek op de sluitknop te drukken.

Deze mogelijkheid tot lichte verwijdering wordt nu ook ondersteund in het <dialog> -element!

Wanneer u het attribuut closedby instelt op any , kan het dialoogvenster worden gesloten door buiten het dialoogvenster te klikken of door op de escape-toets te drukken.


<dialog closedby="any">...</dialog>

Dit is hetzelfde gedrag als wanneer een popover is ingesteld op automatisch.

Updates in basislijn

En hier is nieuws over Baseline

Basislijn Nieuw verkrijgbaar

Ten eerste: Baseline Newly beschikbaar, dit zijn functies die onlangs in alle vier de grote browsers zijn verschenen.

scrollbar-gutter en scrollbar-width

Met de scrollbar-gutter CSS-eigenschap kunt u een ruimte reserveren voor de schuifbalk om ongewenste lay-outwijzigingen te voorkomen wanneer de schuifbalk verschijnt of verdwijnt. Met scrollbar-width kunt u een smallere schuifbalk maken, of zelfs de schuifbalk volledig verbergen zonder de schuifbaarheid te beïnvloeden.

ruby-align

Met de ruby-align CSS-eigenschap kunt u de uitlijning van ruby-basistekst en ruby-annotatietekst opgeven.

Promise.try

Promise.try is een gemakkelijke methode voor foutafhandeling bij synchrone verzoeken. Hiermee kunt u callback-functies elimineren wanneer u probeert een aanvraag in te dienen met Promise.resolve.

Wasm Garbage Collection en tail call-optimalisaties

WebAssembly ondersteunt nu Garbage Collection en tail call-optimalisaties.

Basislijn Op grote schaal beschikbaar

Array findLast() en findLastIndex()

Array findLast() en findLastIndex() zijn erg handige methoden om items van het einde van een array op te halen. Deze functie wordt al 30 maanden door alle grote browsers ondersteund, wat betekent dat Baseline nu overal beschikbaar is.

Individuele transformatie-eigenschappen

Individuele transformatie-eigenschappen die u een fijnere controle geven over CSS-transformaties zijn nu ook Baseline Widely beschikbaar.

Meer over Basislijn

Als je meer wilt weten over Baseline en het verschil tussen Newly en Widely Available, bekijk dan de korte video die ik heb gemaakt.

U kunt ook meer informatie vinden over de basislijnstatus van een functie op het Web Platform Status-dashboard !

Het Interop-project is terug voor 2025

En ten slotte keert het Interop-project terug voor 2025 met een lijst met aandachtsgebieden, waaronder weergaveovergangen, CSS-ankerpositionering en de navigatie-API. Bekijk zeker de projectaankondiging !

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Mariko Kosaka en ik kom over drie maanden terug om je meer te vertellen over wat er nieuw is in Chrome!

,

Mariko Kosaka

Het is alweer een tijdje geleden! De Nieuw in Chrome-video is terug met informatie over:

Ik ben Mariko. Laten we erin duiken en kijken wat er nieuw is in Chrome voor de afgelopen drie releases.

CSS-tekstvak

Met de CSS- text-box kunt u de verticale afstand nauwkeurig bepalen door gebruik te maken van de lettertypestatistieken.

Elk lettertype produceert een andere hoeveelheid ruimte boven en onder de tekens, wat de grootte van het element bepaalt.

Tot nu toe was het onmogelijk om de grootte van deze ruimtes te controleren.

Er wordt een kop weergegeven waarbij de overtollige ruimte erboven met een schaar lijkt te zijn afgeknipt en verwijderd.

De nieuwe eigenschap text-box-trim specificeert de zijkanten die moeten worden bijgesneden, boven of onder, en de eigenschap text-box-edge specificeert hoe deze moet worden bijgesneden. Snijd bijvoorbeeld bij op hoofdletterhoogte, dit is de bovenkant van hoofdletters.

U kunt dit ook schrijven met de eigenschap Shorthand text-box .

Lees meer over het gebruik van deze nieuwe eigenschappen in het CSS text-box-trim artikel.

API voor toegang tot bestandssysteem

De in Chrome 133 toegevoegde DOM-primitieve Node.prototype.moveBefore laat je elementen door een DOM-boom verplaatsen, zonder de status van het element opnieuw in te stellen.

Wanneer u een element verwijdert en vervolgens opnieuw invoegt om een ​​DOM-element te verplaatsen, wordt de status van dat element gereset. Met behulp van deze nieuwe primitief blijft de toestand van een knooppunt behouden.

Dus iframes blijven geladen, actieve elementen blijven in focus, zaken als popovers en dialoogvensters blijven open en CSS-overgangen of animaties gaan door.

Staatsbehoudende manier om een ​​DOM-element te verplaatsen

De File System Access API is al enige tijd beschikbaar op Chrome Desktop. Met deze API kunnen webapps communiceren met bestanden op het lokale bestandssysteem van de gebruiker. Vanaf Chrome 132 is de API ook beschikbaar op Android en in WebViews.

Om een ​​bestand te lezen, roep je showOpenFilePicker() aan. Deze methode toont een bestandskiezer en retourneert vervolgens een bestandsingang die u kunt gebruiken om het bestand te lezen.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Om een ​​bestand op schijf op te slaan, kunt u dezelfde bestandsingang gebruiken die u eerder kreeg, of showSaveFilePicker() aanroepen om een ​​nieuwe bestandsingang te krijgen.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Lichte ontkenning komt naar het <dialog> element

Als je de Popover API hebt gebruikt om een ​​popover te maken, weet je dat een van de leuke kenmerken van de Popover API het lichte negeergedrag is. Gebruikers kunnen op de achtergrond klikken en het popover-element wordt gesloten zonder specifiek op de sluitknop te drukken.

Deze mogelijkheid tot lichte verwijdering wordt nu ook ondersteund in het <dialog> -element!

Wanneer u het attribuut closedby instelt op any , kan het dialoogvenster worden gesloten door buiten het dialoogvenster te klikken of door op de escape-toets te drukken.


<dialog closedby="any">...</dialog>

Dit is hetzelfde gedrag als wanneer een popover is ingesteld op automatisch.

Updates in basislijn

En hier is nieuws over Baseline

Basislijn Nieuw verkrijgbaar

Ten eerste: Baseline Newly beschikbaar, dit zijn functies die onlangs in alle vier de grote browsers zijn verschenen.

scrollbar-gutter en scrollbar-width

Met de scrollbar-gutter CSS-eigenschap kunt u een ruimte reserveren voor de schuifbalk om ongewenste lay-outwijzigingen te voorkomen wanneer de schuifbalk verschijnt of verdwijnt. Met scrollbar-width kunt u een smallere schuifbalk maken, of zelfs de schuifbalk volledig verbergen zonder de schuifbaarheid te beïnvloeden.

ruby-align

Met de ruby-align CSS-eigenschap kunt u de uitlijning van ruby-basistekst en ruby-annotatietekst opgeven.

Promise.try

Promise.try is een gemakkelijke methode voor foutafhandeling bij synchrone verzoeken. Hiermee kunt u callback-functies elimineren wanneer u probeert een aanvraag in te dienen met Promise.resolve.

Wasm Garbage Collection en tail call-optimalisaties

WebAssembly ondersteunt nu Garbage Collection en tail call-optimalisaties.

Basislijn Op grote schaal beschikbaar

Array findLast() en findLastIndex()

Array findLast() en findLastIndex() zijn erg handige methoden om items van het einde van een array op te halen. Deze functie wordt al 30 maanden door alle grote browsers ondersteund, wat betekent dat Baseline nu overal beschikbaar is.

Individuele transformatie-eigenschappen

Individuele transformatie-eigenschappen die u een fijnere controle geven over CSS-transformaties zijn nu ook Baseline Widely beschikbaar.

Meer over Basislijn

Als je meer wilt weten over Baseline en het verschil tussen Newly en Widely Available, bekijk dan de korte video die ik heb gemaakt.

U kunt ook meer informatie vinden over de basislijnstatus van een functie op het Web Platform Status-dashboard !

Het Interop-project is terug voor 2025

En ten slotte keert het Interop-project terug voor 2025 met een lijst met aandachtsgebieden, waaronder weergaveovergangen, CSS-ankerpositionering en de navigatie-API. Bekijk zeker de projectaankondiging !

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Mariko Kosaka en ik kom over drie maanden terug om je meer te vertellen over wat er nieuw is in Chrome!

,

Mariko Kosaka

Het is alweer een tijdje geleden! De Nieuw in Chrome-video is terug met informatie over:

Ik ben Mariko. Laten we erin duiken en kijken wat er nieuw is in Chrome voor de afgelopen drie releases.

CSS-tekstvak

Met de CSS- text-box kunt u de verticale afstand nauwkeurig bepalen door gebruik te maken van de lettertypestatistieken.

Elk lettertype produceert een andere hoeveelheid ruimte boven en onder de tekens, wat de grootte van het element bepaalt.

Tot nu toe was het onmogelijk om de grootte van deze ruimtes te controleren.

Er wordt een kop weergegeven waarbij de overtollige ruimte erboven met een schaar lijkt te zijn afgeknipt en verwijderd.

De nieuwe eigenschap text-box-trim specificeert de zijkanten die moeten worden bijgesneden, boven of onder, en de eigenschap text-box-edge specificeert hoe deze moet worden bijgesneden. Snijd bijvoorbeeld bij op hoofdletterhoogte, dit is de bovenkant van hoofdletters.

U kunt dit ook schrijven met de eigenschap Shorthand text-box .

Lees meer over het gebruik van deze nieuwe eigenschappen in het CSS text-box-trim artikel.

API voor toegang tot bestandssysteem

De in Chrome 133 toegevoegde DOM-primitieve Node.prototype.moveBefore laat je elementen door een DOM-boom verplaatsen, zonder de status van het element opnieuw in te stellen.

Wanneer u een element verwijdert en vervolgens opnieuw invoegt om een ​​DOM-element te verplaatsen, wordt de status van dat element gereset. Met behulp van deze nieuwe primitief blijft de toestand van een knooppunt behouden.

Dus iframes blijven geladen, actieve elementen blijven in focus, zaken als popovers en dialoogvensters blijven open en CSS-overgangen of animaties gaan door.

Staatsbehoudende manier om een ​​DOM-element te verplaatsen

De File System Access API is al enige tijd beschikbaar op Chrome Desktop. Met deze API kunnen webapps communiceren met bestanden op het lokale bestandssysteem van de gebruiker. Vanaf Chrome 132 is de API ook beschikbaar op Android en in WebViews.

Om een ​​bestand te lezen, roep je showOpenFilePicker() aan. Deze methode toont een bestandskiezer en retourneert vervolgens een bestandsingang die u kunt gebruiken om het bestand te lezen.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Om een ​​bestand op schijf op te slaan, kunt u dezelfde bestandsingang gebruiken die u eerder kreeg, of showSaveFilePicker() aanroepen om een ​​nieuwe bestandsingang te krijgen.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Lichte ontkenning komt naar het <dialog> element

Als je de Popover API hebt gebruikt om een ​​popover te maken, weet je dat een van de leuke kenmerken van de Popover API het lichte negeergedrag is. Gebruikers kunnen op de achtergrond klikken en het popover-element wordt gesloten zonder specifiek op de sluitknop te drukken.

Deze mogelijkheid tot lichte verwijdering wordt nu ook ondersteund in het <dialog> -element!

Wanneer u het attribuut closedby instelt op any , kan het dialoogvenster worden gesloten door buiten het dialoogvenster te klikken of door op de escape-toets te drukken.


<dialog closedby="any">...</dialog>

Dit is hetzelfde gedrag als wanneer een popover is ingesteld op automatisch.

Updates in basislijn

En hier is nieuws over Baseline

Basislijn Nieuw verkrijgbaar

Ten eerste: Baseline Newly beschikbaar, dit zijn functies die onlangs in alle vier de grote browsers zijn verschenen.

scrollbar-gutter en scrollbar-width

Met de scrollbar-gutter CSS-eigenschap kunt u een ruimte reserveren voor de schuifbalk om ongewenste lay-outwijzigingen te voorkomen wanneer de schuifbalk verschijnt of verdwijnt. Met scrollbar-width kunt u een smallere schuifbalk maken, of zelfs de schuifbalk volledig verbergen zonder de schuifbaarheid te beïnvloeden.

ruby-align

Met de ruby-align CSS-eigenschap kunt u de uitlijning van ruby-basistekst en ruby-annotatietekst opgeven.

Promise.try

Promise.try is een gemakkelijke methode voor foutafhandeling bij synchrone verzoeken. Hiermee kunt u callback-functies elimineren wanneer u probeert een aanvraag in te dienen met Promise.resolve.

Wasm Garbage Collection en tail call-optimalisaties

WebAssembly ondersteunt nu Garbage Collection en tail call-optimalisaties.

Basislijn Op grote schaal beschikbaar

Array findLast() en findLastIndex()

Array findLast() en findLastIndex() zijn erg handige methoden om items van het einde van een array op te halen. Deze functie wordt al 30 maanden door alle grote browsers ondersteund, wat betekent dat Baseline nu overal beschikbaar is.

Individuele transformatie-eigenschappen

Individuele transformatie-eigenschappen die u een fijnere controle geven over CSS-transformaties zijn nu ook Baseline Widely beschikbaar.

Meer over Basislijn

Als je meer wilt weten over Baseline en het verschil tussen Newly en Widely Available, bekijk dan de korte video die ik heb gemaakt.

U kunt ook meer informatie vinden over de basislijnstatus van een functie op het Web Platform Status-dashboard !

Het Interop-project is terug voor 2025

En ten slotte keert het Interop-project terug voor 2025 met een lijst met aandachtsgebieden, waaronder weergaveovergangen, CSS-ankerpositionering en de navigatie-API. Bekijk zeker de projectaankondiging !

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Mariko Kosaka en ik kom over drie maanden terug om je meer te vertellen over wat er nieuw is in Chrome!

,

Mariko Kosaka

Het is alweer een tijdje geleden! De Nieuw in Chrome-video is terug met informatie over:

Ik ben Mariko. Laten we erin duiken en kijken wat er nieuw is in Chrome voor de afgelopen drie releases.

CSS-tekstvak

Met de CSS- text-box kunt u de verticale afstand nauwkeurig bepalen door gebruik te maken van de lettertypestatistieken.

Elk lettertype produceert een andere hoeveelheid ruimte boven en onder de tekens, wat de grootte van het element bepaalt.

Tot nu toe was het onmogelijk om de grootte van deze ruimtes te controleren.

Er wordt een kop weergegeven waarbij de overtollige ruimte erboven met een schaar lijkt te zijn afgeknipt en verwijderd.

De nieuwe eigenschap text-box-trim specificeert de zijkanten die moeten worden bijgesneden, boven of onder, en de eigenschap text-box-edge specificeert hoe deze moet worden bijgesneden. Snijd bijvoorbeeld bij op hoofdletterhoogte, dit is de bovenkant van hoofdletters.

U kunt dit ook schrijven met de eigenschap Shorthand text-box .

Lees meer over het gebruik van deze nieuwe eigenschappen in het CSS text-box-trim artikel.

API voor toegang tot bestandssysteem

De in Chrome 133 toegevoegde DOM-primitieve Node.prototype.moveBefore laat je elementen door een DOM-boom verplaatsen, zonder de status van het element opnieuw in te stellen.

Wanneer u een element verwijdert en vervolgens opnieuw invoegt om een ​​DOM-element te verplaatsen, wordt de status van dat element gereset. Met behulp van deze nieuwe primitief blijft de toestand van een knooppunt behouden.

Dus iframes blijven geladen, actieve elementen blijven in focus, zaken als popovers en dialoogvensters blijven open en CSS-overgangen of animaties gaan door.

Staatsbehoudende manier om een ​​DOM-element te verplaatsen

De File System Access API is al enige tijd beschikbaar op Chrome Desktop. Met deze API kunnen webapps communiceren met bestanden op het lokale bestandssysteem van de gebruiker. Vanaf Chrome 132 is de API ook beschikbaar op Android en in WebViews.

Om een ​​bestand te lezen, roep je showOpenFilePicker() aan. Deze methode toont een bestandskiezer en retourneert vervolgens een bestandsingang die u kunt gebruiken om het bestand te lezen.


let fileHandle;

btn.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  // Do something with the file handle.
});

Om een ​​bestand op schijf op te slaan, kunt u dezelfde bestandsingang gebruiken die u eerder kreeg, of showSaveFilePicker() aanroepen om een ​​nieuwe bestandsingang te krijgen.

async function getNewFileHandle() {
  const options = {
    // Add options
  };
  const handle = await window.showSaveFilePicker(options);
  return handle;
}

Lichte ontkenning komt naar het <dialog> element

Als je de Popover API hebt gebruikt om een ​​popover te maken, weet je dat een van de leuke kenmerken van de Popover API het lichte negeergedrag is. Gebruikers kunnen op de achtergrond klikken en het popover-element wordt gesloten zonder specifiek op de sluitknop te drukken.

Deze mogelijkheid tot lichte verwijdering wordt nu ook ondersteund in het <dialog> -element!

Wanneer u het attribuut closedby instelt op any , kan het dialoogvenster worden gesloten door buiten het dialoogvenster te klikken of door op de escape-toets te drukken.


<dialog closedby="any">...</dialog>

Dit is hetzelfde gedrag als wanneer een popover is ingesteld op automatisch.

Updates in basislijn

En hier is nieuws over Baseline

Basislijn Nieuw verkrijgbaar

Ten eerste: Baseline Newly beschikbaar, dit zijn functies die onlangs in alle vier de grote browsers zijn verschenen.

scrollbar-gutter en scrollbar-width

Met de scrollbar-gutter CSS-eigenschap kunt u een ruimte reserveren voor de schuifbalk om ongewenste lay-outwijzigingen te voorkomen wanneer de schuifbalk verschijnt of verdwijnt. Met scrollbar-width kunt u een smallere schuifbalk maken, of zelfs de schuifbalk volledig verbergen zonder de schuifbaarheid te beïnvloeden.

ruby-align

Met de ruby-align CSS-eigenschap kunt u de uitlijning van ruby-basistekst en ruby-annotatietekst opgeven.

Promise.try

Promise.try is een gemakkelijke methode voor foutafhandeling bij synchrone verzoeken. Hiermee kunt u callback-functies elimineren wanneer u probeert een aanvraag in te dienen met Promise.resolve.

Wasm Garbage Collection en tail call-optimalisaties

WebAssembly ondersteunt nu Garbage Collection en tail call-optimalisaties.

Basislijn Op grote schaal beschikbaar

Array findLast() en findLastIndex()

Array findLast() en findLastIndex() zijn erg handige methoden om items van het einde van een array op te halen. Deze functie wordt al 30 maanden door alle grote browsers ondersteund, wat betekent dat Baseline nu overal beschikbaar is.

Individuele transformatie-eigenschappen

Individuele transformatie-eigenschappen die u een fijnere controle geven over CSS-transformaties zijn nu ook Baseline Widely beschikbaar.

Meer over Basislijn

Als je meer wilt weten over Baseline en het verschil tussen Newly en Widely Available, bekijk dan de korte video die ik heb gemaakt.

U kunt ook meer informatie vinden over de basislijnstatus van een functie op het Web Platform Status-dashboard !

Het Interop-project is terug voor 2025

En ten slotte keert het Interop-project terug voor 2025 met een lijst met aandachtsgebieden, waaronder weergaveovergangen, CSS-ankerpositionering en de navigatie-API. Bekijk zeker de projectaankondiging !

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Mariko Kosaka en ik kom over drie maanden terug om je meer te vertellen over wat er nieuw is in Chrome!