Selettore CSS in base alla lingua
Oggi ho dovuto correggere un menu orizzontale, nel sito ci sono 4 lingue (italiano, inglese, tedesco e francese). Le prime tre sono perfette mentre il francese, a causa delle voci più lunghe, non riesce a rimanere nello spazio assegnato.
Per farlo apparire nel modo giusto basterebbe cambiare il padding a sinistra e a destra delle voci, ma se non volessi alterare tutti i menu, ma solo quello francese, come si può fare?
Se nel sito possiamo disporre dell’attributo “lang” in tag <html> allora possiamo usare il seguente css per intercettare le nostre voci del menu in francese.
html:lang(fr) #wrapper .navbar a, html[lang="fr"] #wrapper .navbar a {
padding: 15px;
}
I selettori per intercettare la lingua della pagina sono due per compatibilità tra browser.
In HTML si può definire la lingua della pagina tramite un attributo nel tag <html> (lang=”it” oppure xml:lang=”it”), oppure anche tramite il Meta tag <meta name=”language” content=”it”>.
La pseudo classe “:lang(it)” fa un controllo se l’elemento è nella lingua “it”. Non importa quale metodo sia stato usato.
Mentre [lang=“it”] segue le regole css secondo cui solo la corrispondenza dell’elemento con quell’attributo è valida.
Articoli correlati
Comments (0)