I CSS fanno uso di alcuni concetti (ereditarietà, peso, origine e specificità) cruciali per determinare in maniera corretta in che modo le varie proprietà interagiscono tra loro nel contesto di un foglio di stile e all’interno di una pagina web.

Tali concetti si traducono nel cosiddetto meccanismo della cascata che stabilisce se una particolare proprietà CSS può effettivamente essere applicata ad un dato elemento o se viene sovrascritta da un’altra proprietà analoga, impostata ad esempio in un diverso punto dei file sorgente, e a priorità maggiore rispetto alla prima.

Riportando questi concetti all’interno di un sito realizzato con Passweb l’ordine di importanza secondo cui verranno valutate ed applicate le regole CSS è il seguente:

• Per prima cosa verranno valutate ed applicate eventuali proprietà CSS impostate direttamente tramite le proprietà di configurazione dei singoli componenti (es. dimensioni delle voci di menu, stili applicati direttamente all’interno del componente HTML ecc…);
• Verranno poi valutate ed applicate le proprietà CSS definite all’interno di eventuali layout applicati alla pagina che si sta considerando;
• Verranno infine valutate e applicate (e saranno quindi quelle con un peso minore) le proprietà CSS impostate tramite al configurazione grafica del singolo componente

Lavorando con i componenti HTML e con la gestione dei layout messa a disposizione da Passweb, potrebbe quindi facilmente verificarsi il caso in cui una data proprietà impostata per un certo componente tramite style editor non venga poi applicata perché sovrascritta da un’analoga proprietà impostata a livello di layout.

Se non si ha bene in mente tutte le proprietà CSS gestite per un dato elemento e dove queste sono state impostate (se tramite style editor, se tramite layout ecc…) potrebbe quindi essere difficile capire il perché una proprietà correttamente impostata tramite style editor non venga poi effettivamente applicata al componente.

In questo senso gli strumenti per sviluppatori ci aiutano sensibilmente ad individuare dove una data proprietà è stata impostata (es. se in uno specifico foglio di stile o se direttamente sullo specifico elemento) e il perché seppur impostata correttamente questa non venga poi applicata.

Sappiamo infatti che all’interno del pannello Styles vengono visualizzate tutte le proprietà CSS applicate direttamente ad un dato elemento, quelle applicate per lo stesso elemento in specifici fogli di stile e anche quelle ereditate da altri elementi; sappiamo inoltre che nel caso in cui una proprietà venga sovrascritta da un’altra a priorità maggiore la prima verrà indicata con un testo barrato.

Nell’esempio considerato in figura si vede chiaramente che le proprietà CSS “width” e “height”, impostate per tutte le voci del componente #menu_228800, presenti all’interno del file custom.css ed indicate in corrispondenza del selector “#menu_228800 > li > a”, sono state sovrascritte dalle analoghe proprietà impostate direttamente sulla specifica voce di menu e riportate effettivamente all’interno della sezione element.style (che è quella a priorità maggiore).