Tenga en cuenta lo siguiente:
- Ahora puedes especificar un área de recorte con la captura de región cuando usas
getDisplayMedia()
para capturar la pestaña actual. - La sintaxis de las consultas de medios se puede escribir con operadores de comparación matemática.
- Las transiciones de elementos compartidos inician una prueba de origen.
- Además, hay mucho más.
Soy Pete LePage. Veamos las novedades para desarrolladores en Chrome 104.
Especifica un área de recorte con la captura de la región
getDisplayMedia()
permite crear una transmisión de video por Internet desde la pestaña actual. Sin embargo, hay ocasiones en las que no deseas la pestaña completa, solo una pequeña parte de ella. Hasta ahora, la única forma de hacerlo era recortar manualmente cada fotograma.
Con la captura de región, una app web puede definir el área específica de la pantalla que desea compartir. Por ejemplo, Presentaciones de Google podría permitirte permanecer en la vista de edición estándar y compartir la diapositiva actual.
Para usarlo, selecciona el elemento que quieres compartir y crea un CropTarget
nuevo basado en ese elemento. A continuación, llama a getDisplayMedia()
para comenzar a compartir la pantalla. De esta manera, se le solicitará permiso al usuario para compartir su pantalla. Luego, llama a track.cropTo()
y pasa el cropTarget
que creaste antes.
const elem = document.querySelector("#main");
const cropTarget = await CropTarget.fromElement(elem);
const stream = await navigator.mediaDevices
.getDisplayMedia({preferCurrentTab: true});
const [track] = stream.getVideoTracks();
await track.cropTo(cropTarget);
Consulta Mejor uso compartido de pestañas con Captura regional para obtener más detalles.
Consultas de medios más sencillas con sintaxis y evaluación de nivel 4
Las consultas de medios son fundamentales para el diseño responsivo, ya que te permiten definir estilos específicos para diferentes tamaños de viewport. Sin embargo, a menos que los uses todos los días, la sintaxis puede ser un poco confusa.
En Chrome 104, se agrega compatibilidad con Consultas de medios nivel 4, sintaxis y evaluación, lo que te permite escribir consultas de medios con operadores matemáticos comunes de comparación.
Por lo tanto, en lugar de algo como lo siguiente para indicar un viewport de entre 400 y 600 píxeles:
@media (min-width: 400px) and (max-width: 600px) {
/* Styles for viewports between 400px and 600px. */
}
Se puede escribir de la siguiente manera:
@media (400px <= width <= 600px) {
/* Styles for viewports between 400px and 600px. */
}
Además de hacer que las consultas de medios sean menos detalladas, la sintaxis nueva puede ser más precisa. Las consultas min-
y max-
son inclusivas, por ejemplo: min-width: 400px
prueba un ancho de 400 px o superior. La sintaxis nueva te permite ser más explícito sobre lo que quieres decir.
@media (width < 400px) {
/* Styles for viewports less than 400px. */
}
@media (400px <= width <= 600px) {
/* Styles for viewports between 400px and 600px. */
}
@media (601px <= width <= 1000px) {
/* Styles for viewports between 601px and 1000px. */
}
Ya es compatible con Firefox, y existe un complemento PostCSS que reescribe la sintaxis nueva según la anterior, lo que garantiza la compatibilidad con el navegador.
Para obtener más información, consulta el artículo de Rachel Nueva sintaxis para consultas de medios de rango en Chrome 104.
Las transiciones de elementos compartidos inician una nueva prueba de origen
Por lo general, las apps específicas para cada plataforma tienen transiciones fluidas entre diferentes vistas, tienen un aspecto atractivo, mantienen al usuario en contexto y ayudan a que la experiencia tenga un mejor rendimiento. En cambio, en la Web, una navegación completa puede ser dura y, a veces, se produce una pantalla en blanco momentánea. Puede ser mejor para una app de una sola página, pero las transiciones aún son difíciles.
Transiciones de elementos compartidos, que inician una nueva prueba de origen en Chrome 104, te permiten proporcionar transiciones fluidas, sin importar si son entre documentos (por ejemplo, en una app de varias páginas) o dentro de documentos (por ejemplo, en una app de una sola página).
Este es un ejemplo aproximado de cómo funcionan las transiciones para una app de una sola página. En la función de navegación, obtén el nuevo contenido de la página y, luego, verifica si se admiten las transiciones. De lo contrario, actualiza la página sin una transición. Si es así, crea un transition()
y llama a start()
en él, para informarle a la API cuándo se completó el cambio del DOM.
async function spaNavigate(path) {
// Get new page content.
const data = await fetchPage(path);
// Check if transitions are supported, if not, use classic method.
if (!document.createDocumentTransition) {
await updateDOM(data);
return;
}
// Create transition
const transition = document.createDocumentTransition();
// Start transition, let API know when DOM change is complete.
transition.start(() => updateDOM(data));
}
De forma interna, las transiciones de elementos compartidos usan animaciones de CSS, por lo que puedes pasar de un fundido activo al de deslizarte, o lo que desees.
Como acabo de aprender, consulta el video de Jake Bringing Page Transitions to the Web, o bien obtén la explicación.
Y mucho más.
Por supuesto que hay mucho más.
- Cuando se configuran cookies con un atributo
Expires
oMax-Age
explícito, el valor ahora se limitará a no más de 400 días. - Se realizaron mejoras en la API de posición de ventanas multipantalla.
- Además, la propiedad
overflow-clip-margin
de CSS especifica hasta qué punto el contenido de un elemento puede pintarse antes de recortarse.
Lecturas adicionales
Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos a continuación para ver cambios adicionales en Chrome 104.
- Novedades de las Herramientas para desarrolladores de Chrome (104)
- Bajas y eliminaciones de Chrome 104
- Actualizaciones de ChromeStatus.com para Chrome 104
- Lista de cambios del repositorio de código fuente de Chromium
- Calendario de lanzamientos de Chrome
Suscribirse
Para mantenerte al día, suscríbete al canal de YouTube de Chrome Developers. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.
Soy Pete LePage, y en cuanto se lance Chrome 105, estaré aquí para contarte las novedades de Chrome.