/* ============================================================ CLS STABILIZATION — Torresette News Anti-Layout-Shift CSS per contenitori pubblicitari e media. Problema: CLS ~0.33 in Search Console vs ~0 in Lighthouse. Causa: shift post-caricamento da annunci iniettati dinamicamente (Google AdSense, ProjectADV, Revive Adserver, social embed). Le regole più critiche sono anche inline in application.tpl (render-blocking) per garantire l'applicazione prima del primo paint e prima di qualsiasi script ads. Questo file è la versione standalone/documentata. ============================================================ */ /* ============================================================ 1. CONTENITORI .ad-header (template Smarty legacy) .ad-header ha già min-height: 266px in style.css. overflow:hidden blocca espansioni anomale che spostano il contenuto sottostante quando l'ad supera la min-height. ============================================================ */ .ad-header { overflow: hidden; } /* ============================================================ 2. SLOT PROJECTADV — prj_* divs Iniettati vuoti nel markup, riempiti da ProjectADV (https://d27gtglsu4f4y2.cloudfront.net/prebid_hb_171_20.js). Senza placeholder, il loro caricamento provoca shift verticali proporzionali all'altezza dell'ad (tipicamente 250–280px). Slot identificati nel codebase: - prj_728x90_atf : leaderboard desktop ATF - prj_300x250_intext : in-article (_in_article.tpl) - prj_artcorr : contenuti correlati - prj_vidinread : video in-read - prj_300x250_mob_atf : mobile ATF ============================================================ */ #prj_728x90_atf { display: block; min-height: 90px; } #prj_300x250_intext, #prj_artcorr, #prj_vidinread { display: block; min-height: 250px; } #prj_300x250_mob_atf { display: block; min-height: 250px; } /* ============================================================ 3. REVIVE ADSERVER — In _column_right.tpl (righe 155, 163) compaiono Revive senza container dedicato: il browser li vede come elementi inline vuoti, zero altezza. Quando Revive JS li riempie con 300x250, causano un layout shift di 250px. Zone presenti: 13, 19, 32, 33, 34, 37, 38. ============================================================ */ ins[data-revive-zoneid] { display: block; min-height: 250px; overflow: hidden; } /* ============================================================ 4. BANNER SIDEBAR CON ROTAZIONE (jquery.innerfade.js) I rotatori innerfade passano la visibilità tra le
  • della lista banner. Senza min-height sulla
      , l'alternanza tra un'immagine e la successiva può contrarre/espandere il contenitore. ============================================================ */ #banner_300x250_1, #banner_300x250_2, #banner_300x250_3 { min-height: 250px; overflow: hidden; } #banner_300x600_dx_desktop { min-height: 600px; overflow: hidden; } /* ============================================================ 5. IMMAGINI — aspect-ratio intrinseco Quando width e height sono presenti nell'attributo HTML, i browser moderni (Chrome 79+, Firefox 71+, Safari 14+) calcolano l'aspect-ratio prima che l'immagine sia scaricata, riservando lo spazio corretto e prevenendo il reflow. height:auto è il prerequisito CSS per questo meccanismo: senza di esso, l'attributo height HTML impone un'altezza fissa che può causare distorsioni su schermi diversi. Nota: Bootstrap 3 imposta già height:auto su .img-responsive. Questa regola copre le immagini senza quella classe. NON toccare ins.adsbygoogle globalmente (vedi note in detail.tpl): colpirebbe anchor/auto ads iniettate da Google nel . ============================================================ */ img { height: auto; } /* Immagini nel corpo articolo: larghezza massima responsive */ .article-body img, .description-detail img { max-width: 100%; height: auto; } /* ============================================================ 6. TWITTER EMBED Il widget Twitter (platform.twitter.com/widgets.js) espande il