Uno de los flujos de trabajo que uso para depurar CSS
Tuve este problema hoy.
Agregué el botón Paddle a mi nueva página de curso en línea, para que las personas pudieran hacer clic en el botón “Comprar ahora” y apareciera la agradable ventana emergente de Paddle.
La ventana emergente tiene un indicador de carga, un círculo con un spinner dentro, y había un problema: al hacer clic en el botón “Comprar ahora”, el indicador del spinner no estaba centrado dentro del círculo, como se muestra en este gif:
Realmente no sabía qué estaba causando el problema, así que estaba pensando cómo solucionarlo.
El principio que utilizo en estos casos es bisecar . También lo llamo divide et impera .
Abrí DevTools y me dirigí al panel Fuentes, que mostraba todos los archivos cargados en la página. Busqué uno de mis archivos CSS, ya que mi intuición me decía que el CSS de la página estaba interfiriendo con las reglas CSS del propio Paddle.
Así que eliminé todo el contenido de ese archivo.
Chrome cambia automáticamente la apariencia de la página cuando modificas los archivos CSS en el panel Fuentes, por lo que pude verificar y ver que el selector ahora funcionaba bien. Todo sobre Apple, Mac e Iphone
Entonces, una de las reglas de ese CSS es el problema.
¿Cómo puedo saber qué línea?
El archivo tiene 312 líneas. Selecciono desde la línea 150 a la 312 y la borro. Vuelvo a intentarlo. El problema sigue ahí, por lo que debe tener su origen en las primeras 149 líneas.
Presiono cmd-Z ( deshacer ) para volver a colocar las líneas que eliminé y eliminar las líneas 70 a 149.
El problema desapareció, por lo que la línea problemática sigue ahí. Presioné cmd-Z nuevamente para restaurar las líneas que eliminé.
Y así sucesivamente, ya tienes la idea. Repite el proceso hasta que encuentres la línea que te da el problema.
Tips de CSS
Tal vez te puede interesar:
- Manejo de errores CSS
- Importar un archivo CSS usando @import
- Bordes CSS
- La propiedad flotante CSS y su limpieza
Cómo depurar CSS mediante bisección
Agregué el botón Paddle a mi nueva página de curso en línea, para que las personas pudieran hacer clic en el botón “Comprar ahora” y apareciera la agr
programar
es
https://aprendeprogramando.es/static/images/programar-como-depurar-css-mediante-biseccion-1953-0.jpg
2024-10-30
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente