Accentsconagua
Share
När dina CodePen-demos är beroende av CSS, är det en bra idé att varna människor. Låt oss meddela när webbläsare inte stöder våra demo, med hjälp av @Stöd regel att göra en praktisk återanvändbar CodePen-tillgång.
Här är vad vi arbetar mot; en återanvändningsanmälan för att markera CSS som inte stöds. Den kommer att hållas nästan helt i sin egen penna, som vi kan lägga till i andra demos via en Extern CSS länk:
Du hittar att vi använder den på Tuts + för CSS-handledning som följande:
CSS @supports har funnits i några år och har ganska anständigt webbläsarstöd själv. Det gör att vi kan utföra har frågor, endast tillämpa CSS om specifika egenskaper stöds av webbläsaren vid den tiden. Detta förhindrar halvexekverade stilregler och till och med tillåter oss att visa en varning om vi gillar det.
Det fungerar genom att omforma stildeklarationer i ett tillstånd, så här:
@supports (display: grid) div / * när CSS Grid stöds, gör något * /
Låt oss piska upp ett par snabba meddelanden:
Vi lägger till textinnehållet via en pseudoelement så att vi kan styra den från en enda plats. Dessa etiketter kommer till slut att användas på många demos, så att innehållet hålls separat, så att vi kan ändra dem på en gång.
.support-initialtext :: efter innehåll: "✋🏼 Håll dig där cowboy; initialbokstaven stöds inte i din webbläsare.";
Känn dig fri att utforma dessa men du vill.
Våra notifieringar är synliga som standard, men vi vill bara att de ska visas när deras respektive egenskaper inte stöds. Låt oss lägga till ett villkor för att göra det:
@supports (initialt bokstav: 1) eller (-webkit-initialt bokstäver: 1) .support-initialtext :: efter display: none;
Här säger vi "Om första bokstaven eller webkit-initialboken stöds, visas inte meddelandet .support-initialt brev".
Vi upprepar sedan det här för var och en av anmälningarna, vilket ger oss följande färdiga penna:
Hur många meddelanden kan du se?
Med vår penna sparas kan vi referera den från andra pennor, vilket ger oss en super användbar extern tillgång. Lägg till den i en ny penna som en extern CSS-fil:
Detta kommer bara att dra in i CSS, ignorera någon HTML eller JS vi har där, så lägg nu till vilket meddelandeelement du behöver till HTML på din nya penna:
Och det är det gjort! När du uppdaterar din @supports penna kommer dessa ändringar att återspeglas i alla demos du har använt den på.
Du kommer att märka en hel del ledande CodePenners med hjälp av en @supports anmälan på sina pennor Jen Simmons gör det, Rachel Andrew gör det, och vi gör det. Att dra dina anmälningsstilar till en extern penna är det perfekta sättet att hantera saker och samtidigt hålla din markering mousserande ren. Uppdatera meddelandena, lägg till nya CSS-egenskaper, använd säsongsmärkning Låt oss veta hur du använder @supports i kommentarerna.
