Advanced Checkbox Styling con griglia CSS
Il Modulo layout griglia CSS non solo possiamo risolvere un problema di layout ma anche alcuni vecchi problemi mulish che siamo stati affrontare per lungo tempo, ad esempio styling un'etichetta checkbox.
Mentre c'è un metodo relativamente semplice per modellare l'etichetta quando appare dopo la casella di controllo, non è così facile quando appare l'etichetta prima esso.
Stile della casella di controllo senza griglia CSS
Disegnare un'etichetta dopo una casella di controllo è qualcosa che noi sviluppatori abbiamo fatto da quando ne abbiamo letto da qualche parte. Questa tecnica è uno dei primi e vecchi esempi delle potenti dinamiche che i CSS possono possedere.
Ecco il codice con cui potresti già avere familiarità stili un'etichetta dopo una casella di controllo:
input: checked + label / * style me * /
UN etichetta in stile dopo una casella di controllo potrebbe assomigliare a questo (tuttavia, è possibile utilizzare anche altre regole di stile):
Il codice CSS sopra riportato utilizza il combinatore fratello adiacente contrassegnato dal + chiave. Quando una casella di controllo è in : selezionata stato, un elemento dopo esso (di solito un'etichetta) può essere abbinata a questo metodo.
Una tecnica così semplice ed efficace! Cosa potrebbe possibilmente andare male con esso? Nulla, fino a quando non desideri visualizzare l'etichetta prima la casella di controllo.
Il combinatore fratello adiacente seleziona l'elemento successivo; questo significa che l'etichetta deve venire dopo la casella di controllo nel codice sorgente HTML.
Quindi, per far apparire un'etichetta prima la casella di controllo dell'appartenenza sullo schermo, non possiamo semplicemente spostarla prima della casella di controllo nel codice sorgente, come a il precedente selettore di pari livello non esiste nei CSS.
Che lascia solo un'opzione: riposizionando la casella di controllo e l'etichetta utilizzando trasformare o posizione o margine o un'altra proprietà CSS con un qualche tipo di potere telecinetico, in modo che l'etichetta appaia a sinistra della casella di controllo sullo schermo.
Problemi con il metodo tradizionale
Non c'è niente majorly sbagliato con la tecnica di cui sopra, ma può essere inefficiente in alcuni casi. Intendo i casi in cui le posizioni riorganizzate della casella di controllo e l'etichetta non funzionano più.
Pensa reattivo, per esempio. Potrebbe essere necessario ridimensionare o riposizionare la casella di controllo in base al dispositivo su cui è visualizzata. Quando ciò accadrà, lo farai è necessario riposizionare anche l'etichetta, poiché non ci sarà alcun riallineamento automatico dell'etichetta in risposta al riposizionamento / ridimensionamento della casella di controllo.
Possiamo eliminare questo svantaggio se solo potessimo fornire un layout solido per la casella di controllo e l'etichetta, invece di posizionarli approssimativamente sulla pagina.
Ma quasi tutti i sistemi di layout, come tabelle o colonne, richiedono di farlo aggiungi l'etichetta prima della casella di controllo nel codice sorgente per farlo apparire allo stesso modo sullo schermo. Questo è qualcosa che non vogliamo fare perché il prossimo selettore di elementi sull'etichetta smetterà di funzionare.
La griglia CSS, d'altra parte, è un sistema di layout che è non dipende dal posizionamento / ordine degli elementi nel codice sorgente.
Le capacità di riordino del layout della griglia influenzano intenzionalmente solo il rendering visivo, lasciando l'ordine del parlato e la navigazione in base all'ordine sorgente. Ciò consente agli autori di manipolare la presentazione visiva lasciando intatto l'ordine sorgente ... - Modulo Livello griglia CSS Livello 1, W3C
Quindi, la griglia CSS è una soluzione ideale per stile l'etichetta che appare prima la casella di controllo.
Stile di casella con griglia CSS
Iniziamo con il codice HTML. L'ordine della casella di controllo e dell'etichetta rimarrà lo stesso di prima. Li aggiungiamo entrambi a una griglia.
Il CSS allegato è il seguente:
#cbgrid display: grid; grid-template-areas: "left right"; larghezza: 150 px; input [type = checkbox] grid-area: right; label grid-area: left;
Non approfondirò il modo in cui funziona la griglia CSS, come ho già scritto a articolo dettagliato sull'argomento, che puoi leggere qui. Alcune nozioni di base, tuttavia: il display: griglia proprietà trasforma un elemento in un contenitore della griglia, grid-zona identifica l'area della griglia a cui un elemento appartiene, e Grid-template-aree forma una griglia, composta da diverse aree della griglia.
Nel codice sopra, ci sono due aree della griglia: "sinistra" e "destra". Si inventano due colonne di una riga della griglia. La casella di controllo appartiene al "destra" area e l'etichetta al "sinistra". Ecco come appaiono sullo schermo:
Dal momento che non abbiamo modificato il posizionamento relativo della casella di controllo e l'etichetta nel codice sorgente, possiamo utilizzare ancora il combinatore fratello adiacente:
input: checked + label / * style me * /
Si noti che una griglia è sempre bloccato; appare con un riquadro circostante noto come scatola a livello di griglia. Se non lo vuoi, ad esempio per un'etichetta, metti un involucro su quell'oggetto (avvolgilo in un altro elemento) e trasforma quell'involucro nell'area della griglia.
Questo è tutto, gente. Speriamo che la griglia CSS ti aiuti a definire i layout di quelle sfacciate checkbox.
