When/Else in CSS: una proposta per nuove regole condizionali

"CSS When/Else Rules" è il nome di una proposta per l'introduzione di nuove istruzioni condizionali nei fogli di stile. Si tratta di regole pensate in particolare per la gestione delle media query e delle support query, con l'intento di renderne più semplice l'adozione.

Un possibile contesto d'impiego riguarda l'esigenza di produrre comportamenti differenti in diverse circostanze, in questo caso infatti When/Else potrebbero aiutare lo sviluppatore a specificare condizioni ed esclusioni che rendano quanto più precisa possibile l'applicazione degli stili, senza ambiguità o sovrapposizioni.

A livello pratico @when dovrebbe consentire di generalizzare il concetto di regola condizionale, questo vuol dire che qualsiasi caso possa essere espresso in una regola condizionale potrebbe essere introdotto anche tramite @when; l'utilizzatore potrà sfruttarla per combinare facilmente più tipologie di query all'interno di un'unica espressione booleana che imponga l'applicazione della regola nei casi per la quale essa è stata prevista:

@when <boolean-condition> {
  <stylesheet>
}

Un'opportunità interessante considerando che l'alternativa sintattica a @when è rappresentata dagli annidamenti, costrutti per loro natura più complessi nonché meno intuibili, leggibili e manutenibili. L'assertività di @when potrebbe essere modulata grazie all'utilizzo delle regole @else, queste ultime infatti dovrebbero seguire le condizioni in modo da stabilire delle regole alternative con cui prevedere i comportamenti da attuare nel caso in cui le condizioni non vengano soddisfatte o non vengano completamente soddisfatte.

@else <boolean-condition>? {
  <stylesheet>
}

Ad una regola @when per l'applicazione di una media query potrebbe far seguito, per esempio, una regola @else basata su una support query a sua volta seguita da una @else che introduca un ultimo comportamento alternativo. @else potrà quindi essere associata o meno ad una condizione e quest'ultima potrà essere opzionale ("?"), in ogni caso la proposta prevede che @else venga interpretata esattamente come @when, nel caso in cui la condizione booleana sia stata omessa essa verrà considerata come avente una condizione sempre vera.

Via CSS When/Else Rules