Proprietà logiche CSS: Creare siti web per un pubblico globale

Nel mondo interconnesso di oggi, i siti web devono rivolgersi a un pubblico globale. Ciò significa supportare diverse lingue, modalità di scrittura e convenzioni culturali. Le proprietà CSS tradizionali, basate su dimensioni fisiche (top, right, bottom, left), possono diventare problematiche quando si tratta di layout che scorrono in direzioni diverse. Le proprietà logiche CSS offrono una soluzione definendo il layout in base al flusso del contenuto piuttosto che all'orientamento fisico dello schermo. Questo articolo approfondirà la potenza delle proprietà logiche CSS e come possono aiutarti a creare siti web veramente internazionali.

Comprendere la necessità di proprietà logiche

Tradizionalmente, le proprietà CSS come margin-left e padding-right presuppongono una modalità di scrittura da sinistra a destra (LTR). Tuttavia, molte lingue, come l'arabo e l'ebraico, utilizzano una modalità di scrittura da destra a sinistra (RTL). Quando si utilizzano le CSS tradizionali su un sito web RTL, spesso è necessario invertire i valori di queste proprietà, con conseguenti fogli di stile complessi e soggetti a errori. Inoltre, alcune lingue dell'Asia orientale possono essere scritte verticalmente, introducendo un altro livello di complessità. Le proprietà logiche affrontano questi problemi fornendo un modo per definire gli stili in base al flusso del contenuto, piuttosto che alla sua posizione fisica sullo schermo. Ciò garantisce che i tuoi layout si adattino automaticamente a diverse modalità e direzioni di scrittura.

Il problema con le proprietà fisiche

Considera un semplice menu di navigazione con elementi separati da un margine. Utilizzando le proprietà fisiche, potresti scrivere:

            .nav-item {
 margin-right: 10px;
}

            

              
                Copy
              
            
          

Questo funziona perfettamente per le lingue LTR. Tuttavia, quando il sito web viene renderizzato in una lingua RTL, il margine appare sul lato sbagliato degli elementi di navigazione. Per risolvere questo problema, dovresti aggiungere un'altra regola CSS specifica per i layout RTL:

            [dir="rtl"] .nav-item {
 margin-right: 0;
 margin-left: 10px;
}

            

              
                Copy
              
            
          

Questo approccio è ingombrante e rende le tue CSS più difficili da mantenere. Le proprietà logiche forniscono una soluzione molto più pulita e gestibile.

Introduzione alle proprietà logiche CSS

Le proprietà logiche CSS sostituiscono le proprietà fisiche (top, right, bottom, left) con equivalenti logici relativi alla modalità di scrittura e alla direzionalità del contenuto. Ecco alcune proprietà logiche chiave e le loro corrispondenti proprietà fisiche:

• margin-inline-start: Equivalente a margin-left in LTR e margin-right in RTL.
• margin-inline-end: Equivalente a margin-right in LTR e margin-left in RTL.
• padding-inline-start: Equivalente a padding-left in LTR e padding-right in RTL.
• padding-inline-end: Equivalente a padding-right in LTR e padding-left in RTL.
• border-inline-start: Equivalente a border-left in LTR e border-right in RTL.
• border-inline-end: Equivalente a border-right in LTR e border-left in RTL.
• inset-inline-start: Equivalente a left in LTR e right in RTL.
• inset-inline-end: Equivalente a right in LTR e left in RTL.
• margin-block-start: Equivalente a margin-top sia in LTR che in RTL.
• margin-block-end: Equivalente a margin-bottom sia in LTR che in RTL.
• padding-block-start: Equivalente a padding-top sia in LTR che in RTL.
• padding-block-end: Equivalente a padding-bottom sia in LTR che in RTL.
• border-block-start: Equivalente a border-top sia in LTR che in RTL.
• border-block-end: Equivalente a border-bottom sia in LTR che in RTL.
• inset-block-start: Equivalente a top sia in LTR che in RTL.
• inset-block-end: Equivalente a bottom sia in LTR che in RTL.
• inline-size: Rappresenta la dimensione orizzontale. Equivalente a width per le modalità di scrittura orizzontali.
• block-size: Rappresenta la dimensione verticale. Equivalente a height per le modalità di scrittura orizzontali.

I termini "inline" e "block" si riferiscono alla direzione del flusso di testo. La direzione inline è la direzione in cui il testo scorre all'interno di una linea (ad esempio, da sinistra a destra o da destra a sinistra). La direzione block è la direzione in cui i blocchi di testo sono impilati (ad esempio, dall'alto verso il basso). L'utilizzo di queste proprietà logiche consente di definire stili indipendenti dalla modalità e dalla direzione di scrittura.

Esempi pratici di utilizzo delle proprietà logiche

Esempio 1: Menu di navigazione

Rivediamo l'esempio del menu di navigazione. Invece di usare margin-right, possiamo usare margin-inline-end:

            .nav-item {
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Ora, indipendentemente dal fatto che il sito web sia in LTR o RTL, il margine apparirà sempre sul lato corretto degli elementi di navigazione. Non sono necessarie regole CSS separate specifiche per RTL!

Esempio 2: Layout della scheda

Considera un layout della scheda con un'immagine su un lato e testo sull'altro. Possiamo usare le proprietà logiche per posizionare correttamente l'immagine, indipendentemente dalla modalità di scrittura:

            .card {
 display: flex;
}

.card-image {
 flex: 0 0 150px;
}

.card-content {
 padding-inline-start: 20px; /* Regola lo spazio tra l'immagine e il testo */
}

            

              
                Copy
              
            
          

In questo esempio, padding-inline-start aggiungerà spaziatura a sinistra del contenuto in LTR e a destra in RTL, assicurando che il testo sia sempre visivamente separato dall'immagine.

Esempio 3: Etichette dei moduli

Quando si progettano moduli, le etichette vengono in genere posizionate a sinistra dei campi di input nei layout LTR. Nei layout RTL, le etichette dovrebbero essere a destra. Le proprietà logiche lo rendono facile:

            label {
 display: inline-block;
 text-align: end;
 width: 100px;
 margin-inline-end: 10px; /* Spazio tra l'etichetta e l'input */
}

            

              
                Copy
              
            
          

La proprietà text-align: end allinea il testo a destra in LTR e a sinistra in RTL. La proprietà margin-inline-end aggiunge spazio tra l'etichetta e il campo di input sul lato corretto.

Utilizzo delle proprietà logiche con le modalità di scrittura

Le modalità di scrittura CSS controllano la direzione in cui il testo scorre, sia orizzontalmente che verticalmente. Le proprietà logiche sono particolarmente utili quando si lavora con diverse modalità di scrittura, come il testo verticale. La proprietà writing-mode può assumere valori come horizontal-tb (l'impostazione predefinita, orizzontale dall'alto verso il basso), vertical-rl (verticale da destra a sinistra) e vertical-lr (verticale da sinistra a destra).

Quando si utilizzano le modalità di scrittura verticali, il significato delle proprietà logiche cambia. Ad esempio, margin-inline-start e margin-inline-end si riferiscono ora rispettivamente ai margini superiore e inferiore.

Esempio: navigazione verticale

Creiamo un menu di navigazione verticale:

            .vertical-nav {
 writing-mode: vertical-rl; /* or vertical-lr */
}

.vertical-nav-item {
 margin-block-end: 10px; /* Spazio tra gli elementi */
}

            

              
                Copy
              
            
          

In questo esempio, margin-block-end aggiunge spazio tra gli elementi di navigazione nella direzione verticale.

Direzionalità: LTR e RTL

La proprietà direction specifica la direzione del flusso di testo all'interno di un elemento. Può avere due valori: ltr (da sinistra a destra) e rtl (da destra a sinistra). Questa proprietà viene spesso utilizzata in combinazione con l'attributo lang sul tag <html> o su elementi specifici per indicare la lingua e la direzionalità del contenuto.

            <html lang="ar" dir="rtl">
 <body>
 <!-- Contenuto arabo qui -->
 </body>
</html>

            

              
                Copy
              
            
          

Quando l'attributo dir è impostato su rtl, il browser inverte automaticamente la direzione del contenuto inline e applica gli stili appropriati in base alle proprietà logiche.

Vantaggi dell'utilizzo delle proprietà logiche

• Migliore internazionalizzazione (i18n) e localizzazione (l10n): Le proprietà logiche semplificano la creazione di siti web che si adattano a diverse lingue, modalità di scrittura e convenzioni culturali.
• Complessità CSS ridotta: Eliminando la necessità di regole CSS separate specifiche per RTL, le proprietà logiche semplificano i tuoi fogli di stile e li rendono più facili da mantenere.
• Migliore leggibilità del codice: I nomi delle proprietà logiche sono più descrittivi e più facili da capire rispetto ai nomi delle proprietà fisiche, il che porta a un codice più leggibile.
• Prestazioni migliori: La ridotta complessità CSS può portare a prestazioni del sito web migliorate, poiché il browser ha meno CSS da analizzare e applicare.
• Progettazione a prova di futuro: Man mano che gli standard web si evolvono, le proprietà logiche diventeranno probabilmente ancora più importanti per la creazione di siti web flessibili e adattabili.

Compatibilità dei browser

La maggior parte dei browser moderni supporta bene le proprietà logiche CSS, tra cui Chrome, Firefox, Safari ed Edge. Tuttavia, i browser meno recenti potrebbero non supportarli completamente. È sempre una buona idea controllare le tabelle di compatibilità dei browser (ad esempio, su caniuse.com) prima di utilizzare ampiamente le proprietà logiche. Puoi anche usare strumenti come Autoprefixer per generare automaticamente proprietà di fallback per i browser meno recenti.

Best practice per l'utilizzo delle proprietà logiche

• Inizia con le proprietà logiche: Quando possibile, utilizza le proprietà logiche invece delle proprietà fisiche quando definisci gli stili di layout.
• Usa l'attributo dir: Usa l'attributo dir sul tag <html> o su elementi specifici per indicare la direzionalità del contenuto.
• Test approfondito: Testa il tuo sito web in diverse lingue e modalità di scrittura per assicurarti che il layout si adatti correttamente. Usa gli strumenti per sviluppatori del browser per ispezionare gli stili applicati e identificare eventuali problemi.
• Considera i fallback: Per i browser meno recenti che non supportano le proprietà logiche, considera l'utilizzo di proprietà di fallback o strumenti come Autoprefixer.
• Mantieni la coerenza: Usa le proprietà logiche in modo coerente in tutto il tuo foglio di stile per evitare confusione e mantenere un design coerente.
• Impara la terminologia: Familiarizza con i termini "inline" e "block" e come si relazionano alle modalità di scrittura e alla direzionalità.
• Usa le variabili CSS: Puoi usare le variabili CSS per definire i valori delle proprietà logiche e riutilizzarle in tutto il tuo foglio di stile. Questo aiuta a mantenere la coerenza e semplifica l'aggiornamento degli stili. Ad esempio:

            :root {
 --spacing-inline: 10px;
}

.element {
 margin-inline-start: var(--spacing-inline);
 padding-inline-end: var(--spacing-inline);
}

            

              
                Copy
              
            
          

Tecniche avanzate

Utilizzo di calc() con proprietà logiche

Puoi usare la funzione calc() con le proprietà logiche per eseguire calcoli in base alle dimensioni del contenuto o di altri elementi. Ad esempio:

            .container {
 width: 100%;
}

.element {
 margin-inline-start: calc(50% - 100px); /* Centra l'elemento */
}

            

              
                Copy
              
            
          

Combinazione di proprietà logiche con Flexbox e Grid

Le proprietà logiche funzionano perfettamente con i layout CSS Flexbox e Grid. Puoi usarle per controllare l'allineamento e la distribuzione degli elementi all'interno di un contenitore flex o grid. Ad esempio:

            .flex-container {
 display: flex;
 justify-content: space-between;
 padding-inline-start: 20px;
 padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

Utilizzo di proprietà logiche con JavaScript

Puoi usare JavaScript per rilevare la direzionalità del contenuto e applicare gli stili appropriati in base alle proprietà logiche. Ad esempio:

            const isRtl = document.documentElement.getAttribute('dir') === 'rtl';

if (isRtl) {
 // Applica stili specifici per RTL
 document.body.classList.add('rtl');
}

            

              
                Copy
              
            
          

Quindi, nelle tue CSS:

            .element {
 margin-inline-start: 10px; /* Stile LTR predefinito */
}

.rtl .element {
 margin-inline-start: 0; /* Sovrascrittura per RTL */
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Sebbene questo approccio sia possibile, è generalmente meglio fare affidamento sulle proprietà logiche CSS e sull'attributo dir quando possibile, poiché ciò mantiene il tuo codice più pulito e gestibile.

Considerazioni sull'accessibilità

L'utilizzo di proprietà logiche può anche migliorare l'accessibilità del tuo sito web. Assicurandoti che il tuo layout si adatti correttamente a diverse modalità di scrittura, puoi rendere più facile per gli utenti con disabilità navigare e comprendere i tuoi contenuti. Ad esempio, gli utenti che utilizzano lettori di schermo potrebbero fare affidamento sull'ordine di lettura corretto degli elementi, che può essere influenzato dalla direzione di scrittura. L'utilizzo di proprietà logiche aiuta a garantire che l'ordine di lettura sia coerente indipendentemente dalla lingua.

Conclusione

Le proprietà logiche CSS sono uno strumento potente per creare siti web che si rivolgono a un pubblico globale. Utilizzando le proprietà logiche invece delle proprietà fisiche, puoi creare layout che si adattano automaticamente a diverse lingue, modalità di scrittura e convenzioni culturali. Ciò porta a una migliore internazionalizzazione, una ridotta complessità CSS e una maggiore leggibilità del codice. Abbraccia le proprietà logiche CSS e crea esperienze web veramente globali e accessibili per tutti.

Ulteriori letture

• MDN Web Docs: Proprietà logiche CSS
• Proprietà e valori logici CSS Livello 1
• Can I Use: Proprietà logiche CSS