fix(cls): APU tables layout + hero badges min-height
- APU tables: Change media='print' to 'all' for immediate CSS loading - APU tables: Add table-layout: fixed to prevent column reflow - Hero: Add min-height: 40px to badge container to reserve space These changes prevent CLS caused by: 1. Delayed APU table CSS causing table layout shift 2. Hero category badges appearing after page load 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -28,6 +28,10 @@
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
border-spacing: 0;
|
||||
/* CRITICO: table-layout fixed previene CLS
|
||||
El navegador calcula anchos basado en primera fila,
|
||||
no recalcula cuando carga más contenido */
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/* Eliminar todos los bordes */
|
||||
|
||||
@@ -562,17 +562,18 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_theme_styles', 13);
|
||||
*/
|
||||
function roi_enqueue_apu_tables_styles() {
|
||||
// APU Tables CSS
|
||||
// DIFERIDO: Fase 4.2 PageSpeed - below the fold
|
||||
// CRITICO: Las tablas APU son contenido principal, CSS debe cargar inmediatamente
|
||||
// para prevenir CLS (layout shift cuando estilos se aplican tarde)
|
||||
wp_enqueue_style(
|
||||
'roi-tables-apu',
|
||||
get_template_directory_uri() . '/Assets/css/css-tablas-apu.css',
|
||||
array('roi-bootstrap'),
|
||||
ROI_VERSION,
|
||||
'print' // Diferido para no bloquear renderizado
|
||||
'all' // Critico: cargar inmediatamente para prevenir CLS
|
||||
);
|
||||
}
|
||||
|
||||
add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_styles', 15);
|
||||
add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_styles', 5); // Priority 5 = temprano
|
||||
|
||||
/**
|
||||
* Enqueue APU Tables auto-class JavaScript
|
||||
|
||||
@@ -161,6 +161,11 @@ final class HeroRenderer implements RendererInterface
|
||||
'min-height' => $titleMinHeight,
|
||||
]);
|
||||
|
||||
// Contenedor de badges - altura minima para prevenir CLS
|
||||
$cssRules[] = $this->cssGenerator->generate('.hero-section .mb-3.d-flex', [
|
||||
'min-height' => '40px',
|
||||
]);
|
||||
|
||||
$cssRules[] = $this->cssGenerator->generate('.hero-section__badge', [
|
||||
'background' => $this->hexToRgba($badgeBgColor, 0.15),
|
||||
'backdrop-filter' => "blur({$badgeBackdropBlur})",
|
||||
|
||||
Reference in New Issue
Block a user