Risoluzione dei problemi dei CSS

Avete creato dei CSS personalizzati per i vostri moduli, ma non siete riusciti a vedere questi stili quando avete visualizzato il vostro sito? Ci sono alcuni problemi comuni che possono far sì che i CSS non vengano visualizzati correttamente su un sito.

Questa esercitazione illustra le opzioni per la risoluzione dei problemi legati al mancato funzionamento dei CSS e offre possibili soluzioni.

Caching del browser

I browser spesso memorizzano nella cache o in modo temporaneo le risorse dei siti web visitati per migliorare la velocità di caricamento. Alcuni siti utilizzano anche plugin per un'ulteriore memorizzazione nella cache. Spesso, quando non si vedono gli stili personalizzati sul sito, è perché il browser o un altro sistema ha memorizzato nella cache una versione precedente del sito.

Ecco un'esercitazione che vi guiderà attraverso i passi principali per cancellare la cache del sito e dei plugin.

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

Provare un altro browser

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

Chiedere all'host se dispone di una cache

Alcuni host forniscono la cache per il vostro sito direttamente sui loro server, dove sono memorizzati i file del vostro sito. Se non ne siete sicuri, contattate il vostro host per sapere se il vostro sito viene memorizzato nella cache e, in caso affermativo, chiedetegli di cancellare la cache per voi.

Provare un'altra fonte di Internet

A volte, il semplice caricamento del sito da una fonte Internet diversa può aiutare a bypassare una cache esistente. Se si dispone di un dispositivo mobile con dati disponibili, il modo più semplice per farlo è disattivare temporaneamente il WiFi sul 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 la validità dei CSS, tra cui il CSS Validator di W3School. Si tratta di un'opzione eccellente se avete molti CSS personalizzati e almeno un po' di esperienza nella creazione di CSS.

Tuttavia, se si utilizza solo una piccola quantità di CSS, a volte può essere più semplice effettuare un rapido controllo del formato. Cominciamo con un frammento 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 corretto del selettore: Se il selettore include più parti, deve essere scritto da "più grande" a "più piccolo". Nell'esempio precedente, div.wpforms-container-full è l'elemento contenitore più grande dell'HTML, mentre .wpforms-form è all'interno di quel contenitore. L'elemento più piccolo e ultimo del 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.
• Two brackets: There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
• Colon e punto e virgola: Assicuratevi 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 CSS (ad esempio, font-size: 26px;).
• Uso corretto degli spazi bianchi: Per la maggior parte, i CSS non sono molto esigenti riguardo agli spazi bianchi (che comprendono tabulazioni e spazi). Un'eccezione, tuttavia, è rappresentata dalle unità. 26px funzionerà, ad esempio, mentre 26 px non lo farà.

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

Specificità CSS

Poiché tutti i temi e la maggior parte dei plugin contengono i propri set di stili, spesso ci si trova a dover "competere" con gli stili esistenti. In queste situazioni, il selettore CSS più specifico avrà quasi sempre la meglio su un selettore meno specifico.

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

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

Proviamo a sovrascrivere il CSS per rendere il carattere più grande. Si può essere tentati di usare un selettore CSS breve come questo:

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

Questo CSS è valido, ma i suoi stili non verranno applicati nel browser. Verranno invece applicati gli stili predefiniti, che hanno un selettore più specifico. È invece necessario utilizzare lo stesso selettore più lungo dello stile predefinito per il CSS personalizzato:

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

Utilizzo di .important nei CSS

In alcune situazioni, è possibile forzare un frammento di CSS meno specifico a funzionare, includendo l'opzione !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 dell'opzione !important non funzionerà sempre. Proviamo questo approccio per il CSS di cui abbiamo parlato nell'ultimo esempio:

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

In questa situazione, il browser preferisce la specificità del CSS predefinito rispetto a quella del CSS di default. !important quindi questo CSS non verrà applicato al sito.

Vediamo un esempio in cui l'aggiunta dell'opzione !important regola fa lavoro. 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. Possiamo copiare il selettore completo dal CSS qui sopra, oppure possiamo usare un selettore breve e aggiungere l'opzione !important come in questo frammento CSS:

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

Può essere difficile capire se il !important La regola funzionerà, quindi è probabile che dobbiate fare una prova e testare.

Ecco fatto! Abbiamo trattato le più comuni strategie di risoluzione dei problemi da utilizzare quando i CSS non funzionano. Se avete ancora problemi con lo styling dei vostri WPForm, contattate il supporto in modo da potervi aiutare.

Poi, volete personalizzare ulteriormente i vostri moduli? Consultate il nostro tutorial sulla personalizzazione dei singoli campi dei moduli per maggiori dettagli ed esempi.