Telefono: +39 392 33 73 731

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 come si può fare? Il sito è montato in Contao, e per fortuna possiamo disporre dell'attributo "lang" in tag <html>.

Quindi 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 perché funzionano in modo differente, e poi dipende da come vengono supportati dal browser.
In HTML si può definire la lingua della pagina tramite un attributo nel tag <html> (lang="it" oppure xml:lang="it"), tramite il doctype in XHTML, oppure anche tramite il Meta tag <meta name="language" content="it">.

La pseudo classe ":lang(C)" fa un controllo se l'elemento è nella lingua C. Non importa quale metodo sia stato usato. Mentre [lang="en"] segue le regole css secondo cui solo la corrispondenza dell'elemento con quell'attributo è valida.

Nel mio caso Contao 3 mi offre l'attributo lang in <html>: faccio il controllo se la lingua è francese, quindi entro nell'elemento #wrapper, poi nel menu di navigazione .navbar, ed infine nel collegamento ipertestuale <a> per cambiare padding.

Martedì 21 Maggio 2013
(0 commenti)
CSS

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento