Una barra más estrecha que su ventana

Todas las páginas de nuestro panel se desplazaban de lado con una ventana de 768 píxeles. Ocho píxeles de más en inglés, treinta y ocho en rumano. Llevaba así un tiempo, en nueve idiomas, en todas las rutas. Esas cifras vienen de un barrido en dos notaciones de moneda; una lectura suelta anterior de la misma cabecera daba tres.

La causa es una frase con la que resulta fácil asentir y que es falsa: la cabecera plegaba su contenido según el ancho de la ventana.

La ventana no es la barra

A partir del punto de corte medio, la barra lateral se sitúa junto a la cabecera en lugar de detrás de un menú de hamburguesa, y cuesta dieciséis rem. Así que con una ventana de 768 píxeles, la caja de contenido de la cabecera mide 464 píxeles. Ni 768, ni tampoco 736.

Las dos reglas que debían impedir el desbordamiento, ocultar el nombre de la cuenta y encoger la píldora de conexión hasta un punto, estaban escritas contra el punto de corte pequeño: 640 píxeles de ventana. Eso es 128 píxeles antes del punto en que aparece la barra lateral y se lleva sus dieciséis rem. Entre esos dos números hay una franja en la que la cabecera cree tener espacio de sobra y en realidad tiene menos que en cualquier anchura menor, porque a 640 la barra lateral seguía oculta.

Esto no es un problema de Tailwind ni un punto de corte fijado un escalón demasiado abajo. Es un error de categoría. Una consulta de medios responde a lo grande que es el área visible. La pregunta que la cabecera necesita responder es cuánto espacio le ha tocado, y hasta que hubo consultas de contenedor no había forma de hacerla.

Mida lo que pide la fila, no lo que hace

En este punto la tentación es subir un poco el punto de corte y mirar el resultado. Eso produce un número que funciona en la máquina de quien lo subió.

Una fila flexible encoge a sus hijos hasta su anchura mínima de contenido antes de que nada desborde, así que lo que se ve en pantalla es el síntoma final y no la medición. Una fila puede estar muy por encima de su presupuesto y seguir viéndose bien, justo hasta que un hijo no puede encoger más. El número por el que hay que guiarse es lo que la fila pide cuando nada la limita: clónela, póngala a anchura máxima de contenido y léala, en todos los idiomas.

Hecho a 768 píxeles con la notación de moneda más ancha, en nueve idiomas, las partidas salen así.

De ahí salen dos umbrales, y ambos se expresan contra la caja de contenido de la cabecera en lugar de contra la ventana. Mostrar el nombre de la cuenta necesita 524 píxeles, así que empieza en 34 rem, con veinte píxeles de holgura. Mostrar la píldora en vez del punto necesita 622,8, así que empieza en 40 rem, con diecisiete. Por debajo del umbral del nombre la fila pide 422,3 píxeles, que caben holgadamente en los 464 que recibe.

Lo grato de hacer una pregunta de contenedor en lugar de una pregunta de ventana es lo que ocurre después sin una línea más. Cuando la barra lateral se pliega a un carril, esa misma ventana de 768 píxeles deja 656 píxeles de cabecera, y el nombre y la píldora vuelven solos. Nada sabe nada del carril; la barra simplemente se volvió a medir.

El idioma con cero píxeles de desbordamiento

El barrido que venía cazando esta clase de defectos mide el ancho del documento contra el del área visible. En nueve idiomas informó de desbordamiento en todas partes, de ocho a treinta y ocho píxeles, salvo en francés, que informó de cero.

El francés no estaba bien. La píldora de conexión había saltado a una segunda línea dentro de una barra de sesenta y cuatro píxeles de alto con sus elementos centrados, así que el texto quedaba en silencio medio fuera de su propia caja mientras el documento seguía siendo exactamente igual de ancho que la ventana. Ningún barrido de desbordamiento ve eso, porque nada desbordó.

Es la misma forma que un defecto anterior en nuestro sitio de marketing, donde un titular de una sola palabra dentro de una tarjeta encogida pintaba encima de su vecina y el ancho de la página nunca cambiaba. El texto que sale de su caja no ensancha el documento. La comprobación tiene que ser la otra: el borde derecho del texto contra el borde interior de la caja en la que debería estar, más el número de cajas de línea que ocupa. En una barra de altura fija, más de una caja de línea ya es un defecto por sí solo.

Dos formas en que la medición miente

El aparato de medición costó dos intentos, y ambos fallos apuntaban en la misma dirección: a un resultado verde que no significa nada.

Un clon con anchura máxima de contenido hay que medirlo dentro del contenedor. El nuestro se añadía al cuerpo del documento, que queda enteramente fuera de la cabecera, así que la consulta de contenedor nunca coincidía y el clon se dibujaba en su forma estrecha: 394,8 píxeles donde la fila real pedía 515,3. Leído como un antes y un después, eso parece exactamente una reparación lograda. Es la misma trampa que medir en euros mientras el cliente ve dólares, o medir una página cuyos datos nunca llegaron: el número no es falso, es la respuesta a otra pregunta.

El segundo es más aburrido y aun así conviene saberlo. Una comprobación de sintaxis del guion de barrido pasa por encima de un acento grave sin escapar dentro de una plantilla, así que una sonda puede ser sutilmente distinta de la que se escribió mientras el fichero se analiza sin problemas.

Por eso el barrido ganó un modo de prueba que cuelga en la cabecera elementos rotos a propósito, un bloque demasiado ancho para la barra, un botón demasiado estrecho para su rótulo y una línea de texto que se sale de su propia caja, y exige que la sonda los señale todos. También comprueba que el botón de cuenta esté ahí. Un escáner que no encuentra nada no se distingue de un escáner que no mira, y la única manera de separarlos es darle algo que encontrar.

Contra el código sin reparar, el barrido produjo setenta y cuatro fallos de noventa y ocho comprobaciones. Contra la reparación, en ambas monedas, 2033 de 2033.

Recortar sin romper el botón

Tres decisiones menores de la reparación son de las que alguien revierte más tarde al ordenar, así que están escritas donde están las clases.

El recorte vive en un elemento dentro del botón, no en el botón. Poner overflow: hidden en el propio botón recorta su área de clic y su anillo de foco, lo que convierte un arreglo cosmético en un defecto de accesibilidad por teclado.

El nombre accesible se mantiene completo. Recortar es una decisión de presentación; un lector de pantalla debería recibir el nombre entero de la organización, así que la etiqueta lo lleva sin cortar.

Y exactamente una cosa de esa fila puede encoger. Sin fijar los botones de icono, el modelo flexible reparte el encogimiento entre todos, y se obtienen tres botones de icono aplastados en lugar de un nombre que se recorta con limpieza. Encoger es una decisión sobre quién cede, y si no se toma, la toma el motor de maquetación, por igual, lo cual casi nunca es lo que nadie quiere.

Otra cosa que conviene saber antes de recurrir a esto: un contenedor crea además una frontera de contención de maquetación, lo que lo convierte en el bloque contenedor de cualquier elemento fijo situado debajo. Aquí eso no cambia nada, porque los menús y cajones implicados son diálogos nativos en la capa superior, y porque la barra ya llevaba un filtro de fondo con el mismo efecto. Se comprobó abriéndolos y no razonándolo, y si la respuesta hubiera sido otra, el contenedor habría tenido que ir a otro sitio.

Lo que plantea la última restricción: el contenedor debe declararse en la única función que construye todas las cabeceras, porque la cabecera de administración monta el mismo menú de cuenta. Una consulta de contenedor sin contenedor nunca coincide, en silencio. Declárelo en un sitio y olvide el otro, y el nombre de la cuenta desaparece de toda una sección del producto sin dejar rastro en ningún registro.

Lo que dejaríamos por escrito

1. 01Una consulta de medios responde a una pregunta sobre el área visible. Si un componente comparte su anchura con una barra lateral, esa es la pregunta equivocada, y la respuesta se equivoca exactamente en el ancho de la barra.
2. 02Guíese por lo que pide una fila, no por lo que hace. El modelo flexible encoge primero a los hijos, así que la pantalla muestra el síntoma final.
3. 03Mida el clon dentro del contenedor. Fuera, la consulta no coincide y se mide la forma estrecha, que se lee como un arreglo.
4. 04Cero píxeles de desbordamiento pueden ser el caso roto. El texto que sale de su caja no ensancha el documento; compruebe el texto contra su propia caja y cuente las cajas de línea.
5. 05Dele al escáner algo que encontrar. Un modo de prueba que planta defectos conocidos es la única forma de distinguir «no hay nada mal» de «no está mirando».
6. 06Recorte en un elemento interior. Recortar el botón recorta el anillo de foco, y el nombre accesible debería quedar entero.
7. 07Elija qué elemento encoge. Si se le deja, el modelo flexible reparte el dolor por igual entre todo.

Para que quede claro qué es esto: la reparación está construida, medida en nueve anchuras, nueve idiomas, cinco rutas y ambas monedas, y en funcionamiento. No se midió en una compilación de producción, así que aquí no se dice nada sobre desplazamiento de diseño, y se usó un único nombre de organización en todo momento.

Del trabajo de plataforma en Provibr. La página cuyo desbordamiento inició todo esto está en sin conexión junto a un título que dice conectado, y lo que nueve idiomas le hacen a un conjunto de controles de tamaño fijo está en dieciséis mil claves y nueve idiomas.