Accentsconagua
Share
Quando le tue demo CodePen si basano su CSS all'avanguardia, è una buona idea avvisare le persone. Forniamo una notifica quando i browser non supportano i nostri demo, utilizzando il @supporto regola per creare una comoda risorsa CodePen riutilizzabile.
Ecco a cosa stiamo lavorando; una notifica riutilizzabile per evidenziare CSS non supportati. Sarà tenuto quasi interamente nella sua penna, che possiamo aggiungere ad altri demo tramite un CSS esterno link:
Scopriremo che lo usiamo su Tuts + per tutorial CSS come il seguente:
CSS @supports è in circolazione da alcuni anni e gode di un supporto browser abbastanza decente. Ci consente di eseguire query di funzionalità, applicare CSS solo se le proprietà specificate sono supportate dal browser al momento. Ciò impedisce le regole di stile a metà esecuzione e ci consente persino di visualizzare un avviso se lo desideriamo.
Funziona avvolgendo le dichiarazioni di stile in una condizione, come questa:
@supports (display: grid) div / * quando la griglia CSS è supportata, fai qualcosa * /
Facciamo un paio di notifiche veloci:
Stiamo aggiungendo il contenuto testuale tramite a pseudo elemento in modo che possiamo controllarlo da un unico posto. Queste etichette verranno infine utilizzate in molte demo, quindi tenere separati i contenuti significa che possiamo cambiarli tutti in una volta.
.support-initial-letter :: after content: "✋🏼 Tieni duro il cowboy, la lettera iniziale non è supportata nel tuo browser.";
Sentiti libero di disegnare questi come vuoi.
Le nostre notifiche sono visibili per impostazione predefinita, ma vogliamo solo che vengano visualizzate quando rispettano le rispettive proprietà non sono supportato. Aggiungiamo una condizione per farlo:
@supports (lettera iniziale: 1) o (-webkit-initial-letter: 1) .support-initial-letter :: after display: none;
Qui stiamo dicendo "Se sono supportate la lettera iniziale o la lettera iniziale -webkit, non visualizzare la notifica .support-iniziale-lettera".
Ripetiamo questo per ciascuna delle notifiche, dandoci la seguente penna finita:
Quante notifiche puoi vedere?
Con la nostra penna salvata possiamo fare riferimento ad altre penne, dandoci una risorsa esterna super-utile. Aggiungilo a una nuova penna come file CSS esterno:
Questo attiverà solo il CSS, ignorando qualsiasi HTML o JS che abbiamo lì dentro, quindi ora aggiungi qualsiasi elemento di notifica necessario all'HTML della tua nuova penna:
E questo è tutto, fatto! Ogni volta che aggiorni la penna @supports, tali modifiche si rifletteranno su tutte le demo che hai utilizzato.
Noterai un sacco di CodePenner all'avanguardia che usano a @supports notifica sui loro recinti; Jen Simmons lo fa, Rachel Andrew lo fa, e lo facciamo. Tirare gli stili di notifica in una penna esterna è il modo perfetto per gestire le cose mantenendo pulito il tuo markup. Aggiorna i messaggi, aggiungi nuove proprietà CSS, applica marchi stagionali, impazzisci! Facci sapere come lo usi @supports nei commenti.
