Accentsconagua
Share
Când demo-urile CodePen se bazează pe CSS, este o idee bună să avertizezi oamenii. Să oferim o notificare atunci când browserele nu acceptă demonstrațiile noastre, utilizând @a sustine regula pentru a face un bun de utilizare reutilizabil CodePen.
Iată la ce lucrăm; o notificare reutilizabilă pentru a evidenția CSS neacceptat. Acesta va fi păstrat aproape în întregime în propriul stilou, pe care îl putem adăuga la alte demo-uri prin intermediul unui CSS extern legătură:
Veți găsi că îl folosim pe Tuts + pentru tutoriale CSS cum ar fi:
CSS @supports a fost în jur de câțiva ani și se bucură destul de decent browser-ul de sprijin în sine. Aceasta ne permite să facem caracteristici interogare, aplicând CSS numai dacă proprietățile specificate sunt acceptate de browser în acel moment. Acest lucru împiedică regulile de stil pe jumătate executate și chiar ne permite să afișăm un avertisment dacă ne place.
Funcționează prin împachetarea declarațiilor de stil într-o stare, cum ar fi:
@supports (afișare: grilă) div / * atunci când este acceptată Gridul CSS, faceți ceva * /
Să facem câteva notificări rapide:
Adăugăm conținutul textual prin intermediul unui pseudo element astfel încât să o putem controla dintr-un singur loc. În cele din urmă, aceste etichete vor fi folosite pe multe demo-uri, prin urmare, păstrarea separată a conținutului înseamnă că le putem schimba pe toate într-un singur pas.
.support-original-letter :: după content: "✋🏼 Țineți acolo cowboy; litera inițială nu este acceptată în browser-ul dvs.";
Simțiți-vă liber să le stilizați oricum doriți.
Notificările noastre sunt vizibile în mod prestabilit, dar dorim ca acestea să fie afișate doar atunci când proprietățile lor respective nu sunt sprijinit. Să adăugăm o condiție pentru a face acest lucru:
@supports (literă inițială: 1) sau (-webkit-inițială-literă: 1) .support-inițială-literă :: după display: none;
Aici spunem "Dacă este acceptată litera inițială sau -webkit-litera inițială, nu se afișează notificarea .support-letter-letter".
Apoi repetăm acest lucru pentru fiecare dintre notificări, oferindu-ne următorul stilou finit:
Câte notificări puteți vedea?
Cu stiloul nostru salvat putem să-l referim la alte pixuri, oferindu-ne un activ extra-util extern. Adăugați-l la un stilou nou ca un fișier CSS extern:
Acest lucru va atrage doar CSS, ignorând orice HTML sau JS pe care le avem acolo, deci adăugați acum oricare element de notificare de care aveți nevoie la codul HTML al stiloului dvs. nou:
Și asta a fost făcut! Ori de câte ori actualizați stiloul @supports, aceste modificări vor fi reflectate în toate demo-urile pe care le-ați utilizat.
Veți observa o mulțime de coduri de ultimă oră folosind un @supports notificarea stiloului lor; Jen Simmons o face, Rachel Andrew o face, și o facem. Tragerea stilurilor dvs. de notificare într-un stilou extern este modalitatea perfectă de a gestiona lucrurile, păstrând în același timp marcajul dvs. spumant curat. Actualizați mesajele, adăugați proprietăți CSS noi, aplicați branding sezonier, mergeți cu nuci! Spuneți-ne cum folosiți @supports în comentariile.
