Risoluzione dei problemi CSS

Hai creato CSS personalizzato per i tuoi moduli, ma non sei riuscito a vedere quegli stili durante la visualizzazione del tuo sito? Ci sono alcuni problemi comuni che possono causare la mancata visualizzazione corretta del CSS su un sito.

Questa guida ti illustrerà le opzioni per risolvere il problema del mancato funzionamento del tuo CSS e offrirà possibili soluzioni.

Cache del browser

I browser memorizzano spesso nella cache o archiviano temporaneamente le risorse dei siti Web visitati per migliorarne la velocità di caricamento. Alcuni siti utilizzano anche plugin per la memorizzazione nella cache aggiuntiva. Spesso, quando non vedi i tuoi stili personalizzati sul tuo sito, è perché il browser o un altro sistema ha memorizzato nella cache una versione precedente del tuo sito.

Ecco una guida che ti illustrerà i passaggi principali per svuotare la cache del tuo sito e dei plugin.

Se lo svuotamento della cache del browser non sembra funzionare, ecco un paio di strategie aggiuntive da provare:

Provare un browser diverso

Ogni browser conserva la cache dei siti visitati. Aprendo il tuo sito in un browser diverso (o nella modalità privata offerta da alcuni browser, come la finestra di navigazione in incognito di Chrome), puoi spesso vedere una versione non memorizzata nella cache del tuo sito.

Chiedere al tuo host se dispone di una cache

Alcuni host forniscono la memorizzazione nella cache per il tuo sito direttamente sui loro server, che è dove sono archiviati i file del tuo sito. Se non sei sicuro, potresti voler contattare il tuo host per chiedere se stanno memorizzando nella cache il tuo sito e, in caso affermativo, chiedere loro di svuotare la cache per te.

Provare una sorgente Internet diversa

Occasionalmente, il semplice caricamento del tuo sito tramite una sorgente Internet diversa può aiutare a bypassare una cache esistente. Se hai un dispositivo mobile con dati disponibili, il modo più semplice per farlo è disattivare temporaneamente il WiFi sul tuo dispositivo e ricaricare la pagina.

Formato CSS non valido

Il CSS deve essere scritto in un formato specifico affinché un browser possa comprenderlo. Esistono molti strumenti online per verificare che il tuo CSS sia valido, incluso il validatore CSS di W3School. Questa è un'ottima opzione se hai molto CSS personalizzato e almeno un po' di esperienza precedente nella creazione di CSS.

Se stai utilizzando solo una piccola quantità di CSS, tuttavia, a volte può essere più facile fare un rapido controllo del formato da solo. Iniziamo esaminando uno snippet di CSS valido:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Ecco perché questo CSS è valido o 'leggibile' dai browser:

• Formato del selettore corretto: Se il selettore include più parti, deve essere scritto dal più 'grande' al più 'piccolo'. Nell'esempio sopra, div.wpforms-container-full è l'elemento contenitore più grande nell'HTML, mentre .wpforms-form si trova all'interno di quel contenitore. L'elemento più piccolo e l'ultimo nel selettore, .wpforms-title, è contenuto all'interno di entrambi gli altri elementi. In qualsiasi altro ordine, il browser non sarà in grado di leggere questo selettore.
• Due parentesi graffe: Ci deve essere una parentesi graffa aperta ({) subito dopo il selettore CSS e alla fine dell'elenco di proprietà e valori. Dimenticare quella parentesi graffa di chiusura (}) è un errore comune e di solito impedirà la visualizzazione nel browser di tutto il CSS sottostante.
• Due punti e punto e virgola: Assicurati di includere i due punti (:) tra ogni proprietà e valore CSS e un punto e virgola (;) dopo ogni valore in modo che il browser possa leggere il tuo CSS (ad esempio, font-size: 26px;).
• Uso corretto dello spazio bianco: Per la maggior parte, il CSS non è molto esigente riguardo allo spazio bianco (che include tabulazioni e spazi). Un'eccezione a questo, tuttavia, riguarda le unità. 26px funzionerà, ad esempio, mentre 26 px no.

Per ulteriori informazioni sulla scrittura di CSS con sintassi corretta, puoi consultare questo tutorial di W3Schools.

Specificità CSS

Poiché tutti i temi e la maggior parte dei plugin contengono i propri set di stili, spesso scoprirai che i tuoi stili personalizzati devono "competere" con gli stili esistenti. In tali situazioni, il selettore CSS più specifico prevarrà quasi sempre su un selettore meno specifico.

Ad esempio, ecco il CSS predefinito che imposta la dimensione del carattere dei titoli dei moduli in WPForms:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

Proviamo a sovrascrivere quel CSS per ingrandire il carattere. Potrebbe essere allettante usare un selettore CSS breve come questo:

.wpforms-title {
    font-size: 40px;
}

Quel CSS è valido, ma i suoi stili non verranno applicati nel browser. Verranno invece applicati gli stili predefiniti perché hanno un selettore più specifico. Dovresti invece usare lo stesso selettore più lungo dello stile predefinito per il tuo CSS personalizzato:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

Utilizzo di !important in CSS

In alcune situazioni, puoi forzare un frammento di CSS meno specifico a funzionare includendo la regola !important prima del punto e virgola. È sempre meglio provare prima un selettore più specifico (come descritto sopra), ma a volte questo può offrire una soluzione rapida.

È importante notare, tuttavia, che l'aggiunta della regola !important non funzionerà sempre. Proviamo questo approccio per il CSS di cui abbiamo discusso nell'ultimo esempio:

.wpforms-title {
    font-size: 40px !important;
}

In questa situazione, il browser preferisce la specificità del CSS predefinito rispetto alla regola !important, quindi questo CSS non verrà applicato al tuo sito.

Vediamo un esempio in cui l'aggiunta della regola !important funziona davvero. Per impostazione predefinita, l'asterisco (*) che contrassegna un campo "obbligatorio" in WPForms sarà rosso:

Ecco il CSS che crea questo stile (#ff0000 è un codice esadecimale per il colore rosso):

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

Vogliamo che questi asterischi appaiano invece blu. Potremmo copiare quel selettore completo dal CSS sopra, oppure potremmo usare un selettore breve e aggiungere la regola !important, come in questo snippet CSS:

.wpforms-required-label {
    color: #007acc !important;
}

Può essere difficile sapere se la regola !important funzionerà o meno, quindi probabilmente dovrai provarci e testarla.

Fatto! Abbiamo coperto le strategie di risoluzione dei problemi più comuni da utilizzare quando il CSS non funziona. Se hai ancora problemi con lo stile dei tuoi WPForms, ti preghiamo di contattare il supporto in modo che possiamo aiutarti.

Successivamente, desideri personalizzare ulteriormente i tuoi moduli? Dai un'occhiata al nostro tutorial sulla personalizzazione dei singoli campi del modulo per dettagli ed esempi.