Accentsconagua
Share
Når CodePen-demoer er avhengige av cutting edge CSS, er det en god ide å advare folk. La oss gi et varsel når nettlesere ikke støtter våre demoer, ved hjelp av @Brukerstøtte regjere å lage en nyttig gjenbrukbar CodePen-eiendel.
Her er det vi jobber med; et gjenbrukbart varsel for å markere ikke-støttet CSS. Den vil bli holdt nesten helt i sin egen penn, som vi kan legge til i andre demoer via en Ekstern CSS link:
Du finner at vi bruker den på Tuts + for CSS-opplæringsprogrammer som følgende:
CSS @supports har eksistert i noen år og har ganske anstendig nettleserstøtte selv. Det gjør at vi kan utføre har spørsmål, bruker kun CSS hvis spesifiserte egenskaper støttes av nettleseren på det tidspunktet. Dette forhindrer halv-utført stilregler og tillater oss å vise en advarsel hvis vi har lyst på det.
Det fungerer ved å innpakke stildeklarasjoner i en tilstand, slik:
@supports (display: grid) div / * når CSS Grid støttes, gjør noe * /
La oss piske opp et par raske varsler:
Vi legger til tekstinnholdet via en pseudo-element slik at vi kan styre det fra ett enkelt sted. Disse etikettene vil til slutt bli brukt på mange demoer, slik at innholdet er skilt, slik at vi kan endre dem på en gang.
.support-initial-letter :: etter content: "✋🏼 Hold på der cowboy; første bokstav støttes ikke i nettleseren din.";
Du er velkommen til å utforme disse, men du vil.
Våre varsler vises som standard, men vi vil bare at de skal vises når deres respektive egenskaper er ikke støttes. La oss legge til en betingelse for å gjøre det:
@supports (initial bokstav: 1) eller (-webkit-opprinnelig bokstav: 1) .support-initial-bokstav :: etter display: none;
Her sier vi "Hvis første bokstav eller webkit-opprinnelig bokstav støttes, må du ikke vise meldingen .support-initialt brev".
Vi gjentar dette for hver av varslene, og gir oss følgende ferdige penn:
Hvor mange varsler kan du se?
Med vår penn lagret kan vi referere den fra andre penner, noe som gir oss en super nyttig ekstern ressurs. Legg den til en ny penn som en ekstern CSS-fil:
Dette vil bare trekke i CSS, ignorerer noen HTML eller JS vi har der inne, så legg til nå hvilket meldingselement du trenger til HTML-en for din nye penn:
Og det er det gjort! Når du oppdaterer @supportspenningen, blir disse endringene gjenspeilet i alle demoer du har brukt den på.
Du vil legge merke til mange banebrytende CodePenners ved hjelp av en @supports varsel på pennene deres; Jen Simmons gjør det, Rachel Andrew gjør det, og vi gjør det. Å trekke varslingsstilene dine inn i en ekstern penn, er den perfekte måten å håndtere ting på, samtidig som du holder ryddet ren. Oppdater meldingene, legg til nye CSS-egenskaper, bruk sesongbasert merkevarebygging, bruk nøtter! Gi oss beskjed om hvordan du bruker @supports i kommentarene.
