este stretch palabra clave, que puedes combinar con width y height (también min-width, max-width, min-heighty max-heightpor supuesto), se lanzó en el navegador web Chromium en junio de 2025. Pero el valor es en realidad una unidad no estándar -webkit-fill-available y -moz-available value, que ha estado disponible en Firefox desde 2008.
El problema es que antes @supports En la regla, no había una buena manera de implementar el valor correcto para el navegador web correcto, supongo que simplemente lo olvidamos después de eso, hasta que un día lo descubrí. Dave Rupert casualmente puso esto en Bluesky Hace un mes:
Diseño profesional Miriam Suzanne grabó la narración. Poco después. Vale la pena observar más de cerca este valor.
qué es stretch ¿Hacer?
La respuesta rápida es stretch hace lo mismo que declarar 100%pero ignora padding Al visualizar el espacio disponible. En resumen, si alguna vez has querido 100% llegar Lo que realmente significa es 100% (Cuando se utiliza padding), stretch Justo lo que estás buscando:
div {
padding: 3rem 50vw 3rem 1rem;
width: 100%; /* 100% + 50vw + 1rem, causing overflow */
width: stretch; /* 100% including padding, no overflow */
}cuanto más técnico La respuesta es stretch El valor establece el ancho o alto del cuadro de margen del elemento (no por box-sizing) para que coincida con su ancho/alto contener obstruido.
notas: Nunca es mala idea echar otro vistazo. modelo de caja CSS Repase los diferentes tamaños de cajas.
En este punto, sí, podemos lograr el mismo resultado declarando box-sizing: border-box, algo que muchos de nosotros hacemosque en realidad es un restablecimiento de CSS.
*,
::before,
::after {
box-sizing: border-box;
}Supongo que es por esta solución que nos olvidamos de todos los valores no estándar y no les prestamos atención. stretch cuando se envía, pero en realidad prefiero stretch y no tocar box-sizing Eso ya no existe.
sí stretchNo box-sizing
No hay ninguna razón particularmente convincente para cambiar a stretchpero hay varios más pequeños. Primero, el selector universal (*) no funciona con pseudoelementos, por lo que el restablecimiento de CSS generalmente incluye ::before y ::afterno sólo hay más pseudoelementos de los que pensábamos, sino que el aumento de los componentes HTML declarativos significa que veremos más de ellos. ¿Realmente quieres mantener contenido como el siguiente?
*,
::after,
::backdrop,
::before,
::column,
::checkmark,
::cue (and ::cue()),
::details-content,
::file-selector-button,
::first-letter,
::first-line,
::grammar-error,
::highlight(),
::marker,
::part(),
::picker(),
::picker-icon,
::placeholder,
::scroll-button(),
::scroll-marker,
::scroll-marker-group,
::selection,
::slotted(),
::spelling-error,
::target-text,
::view-transition,
::view-transition-image-pair(),
::view-transition-group(),
::view-transition-new(),
::view-transition-old() {
box-sizing: border-box;
}Vale, estoy siendo demasiado dramático. ¿O tal vez no lo soy? No tengo ni idea. De hecho, he usado bastantes de ellos, y tener que mantener una lista así suena aterrador, aunque ciertamente he visto restablecimientos de CSS más locos. Además, usted puede pensar 100% Excluye el relleno. Si eres un codificador exigente como yo, no te gustará deshacer el restablecimiento de CSS.
viaje de ida y vuelta animado stretch
Independientemente de las opiniones, una cosa es box-sizing Por supuesto que no, eso es animable. Si no lo consigues la primera vez, haremos la transición. 100% y stretch:
porque stretch Aunque es una palabra clave, necesitas Interpolar su tamañosólo puedes hacer esto declarando interpolate-size: allow-keywords (acerca de :root Si desea activar la interpolación globalmente):
:root {
/* Activate interpolation */
interpolate-size: allow-keywords;
}
div {
width: 100%;
transition: 300ms;
&:hover {
width: stretch;
}
}este calc-size() Función No es útil aquí debido a la compatibilidad con el navegador web. stretch El hecho es calc-size() No se admiten sus reemplazos no estándar. Sin embargo, en el futuro podrás utilizar width: calc-size(stretch, size) Interpolación en el ejemplo anterior Es así de específico ancho.
Soporte de navegador web
La compatibilidad con navegadores web está actualmente limitada a los navegadores Chromium:
- Ópera 122+
- Chrome y Edge 138+ (140+ en Android)
Afortunadamente, dado que tenemos estos valores no estándar, podemos usar @supports at-rule implementa el valor correcto para el navegador correcto. La mejor manera de hacer esto (y eliminar @supports La lógica más adelante) es guardar el valor correcto como una propiedad personalizada:
:root {
/* Firefox */
@supports (width: -moz-available) {
--stretch: -moz-available;
}
/* Safari */
@supports (width: -webkit-fill-available) {
--stretch: -webkit-fill-available;
}
/* Chromium */
@supports (width: stretch) {
--stretch: stretch;
}
}
div {
width: var(--stretch);
}Más tarde, una vez stretch Ampliamente compatible, cambie a:
div {
width: stretch;
}en breve
Si bien esto probablemente no ganará el premio a la Mejor Película del Año (no he oído hablar de susurro sobre esto), mejoras en la calidad de vida como esta son algunas de mis características favoritas. Si prefieres usar box-sizing: border-boxlo cual está totalmente bien: funciona muy bien. De cualquier manera, tener más formas de escribir y organizar código nunca es algo malo, especialmente si algunos de los métodos no se ajustan a su modelo mental.
Además, utilizar funciones completamente nuevas en producción es demasiado tentador como para resistirse. ¡Irrazonable, pero tentador y satisfactorio!
