Nyligen bestämde jag mig för att jag behövde en uppdatering i alla de olika CSS-kortegenskaperna. Det bästa sättet att lära mig något är att lära ut det så här är mitt försök att exakt det.
Idag lär vi oss hur vi använder CSS-stenografi för bakgrund, marginaler och vadderingar, gränser, typsnitt, listformat och övergångar.
Bakgrund
CSS-bakgrundsbilder är en av de vanligaste ställena som jag ser att CSS-stenografi implementeras. Det kan finnas lite mer funktionalitet här men än att människor utnyttjar. Låt oss börja med ett typiskt exempel på det vanliga sättet att deklarera en bakgrund.
Bakgrund: The Long Way
Bakgrundshorthand
Härifrån vet de flesta av oss hur man tar dessa tre egenskaper och kastar dem alla inuti bakgrundsegenskapen. Kolla in hur mycket rum det sparar.
Bilaga och position
Två andra egenskaper som du inte ser i shorthand så ofta är position och bilaga. Precis som en uppdatering, låt oss titta på vad dessa två är.
Bakgrund-fäste refererar till huruvida bakgrundsbilden rullar med sidan eller inte. Standardvärdet är skrolla, vilket innebär att du kommer att förlora bilden så fort du rullar ner sidan precis som du gör med resten av innehållet. Om du ändrar detta till fast, kommer bakgrunden att vara rätt där den är som resten av innehållet rullar över toppen av det.
Bakgrund-positionen refererar till var bilden placeras i elementet. Du kan använda något som är generiskt, till exempel vänster topp, nederst till höger eller centrum, eller något mer specifikt, till exempel ett procenttal eller pixelvärde.
Här är den långa versionen med dessa två kastade in.
Notera ordern här eftersom vi använder samma order i shorthandversionen:
- bakgrundsfärg
- bakgrundsbild
- bakgrund-repeat
- background-fastsättning
- bakgrund-positionen
Bakgrundshorthand med alla fem värden
Här slänger vi alla dessa i enlighet med den ordning vi just skisserade. Gärna lämna någon av dem för att återgå till standardinställningarna.
Marginal och Padding
En annan plats som du säkert har sett en stenografi är i marginaler och vadderingar. Här fungerar det exakt på samma sätt för båda, så jag ska bara ge exempel på margin och du kan själv applicera på vaddering.
Marginal: Den långa vägen
Här har vi det vanliga sättet att ställa in dina marginaler. Jag har satt varje på ett godtyckligt värde, de viktiga delarna att notera är ordningen och det faktum att de är alla olika. Båda dessa kommer att påverka shorthanden.
Marginal stenografi
Deklarera marginaler i stenografi är en ganska mångsidig teknik som sparar mycket utrymme, oavsett hur du gör det. I grund och botten kastar du bara alla dina värden i rad i marginalegenskapen.
Ordern här är väldigt viktig. För att komma ihåg hur det fungerar, tänk bara på en klocka. Den börjar på toppen och roterar medurs och träffar varje kant. Först är margin-top, sedan margin-right, margin-bottom och margin-left.
Att deklarera alla marginalegenskaper för att vara samma är ännu enklare. Om du bara anger ett värde, gäller det för varje egendom. Koden nedan kommer att resultera i en 10px-marginal på varje sida.
Låt oss nu säga att du egentligen bara har två olika värden du vill arbeta med, vilket betyder att de övre och nedre marginalerna har ett värde och vänster och höger kommer att ha ett annat. Som standard, när du förklarar stenhöjdens toppmarginal, kommer botten att matcha och när du förklarar högermarginalens stenmarginal kommer vänster att matcha.
Detta gäller när du också anger tre värden. Så följande kod ställer in topp-, höger- och bottenmarginal manuellt medan vänster automatiskt hämtas från höger.
Border: The Long Way
Gränsen kommer med tre primära egenskaper: bredd, stil och färg. Dessa skrivs ut individuellt enligt följande:
Du kan fudge ordningen på dessa egenskaper lite när du byter till stenversionen, men det är bäst att behålla det i den här standardbeställningen för att säkerställa fullständig kompatibilitet.
Border Shorthand
Här är shorthandversionen av dessa tre gränsegenskaper.
En annan sak du kan göra med gränser är att de olika länderna är olika. Här kan vi se shorthandgränssnittet fortfarande på jobbet, bara i varje enskilt.
Alternativt kan du rikta dig mot en av de tre gränsegenskaperna och applicera dem på ett klokvis sätt, precis som vi gjorde med marginalkortet. Lägg märke till hur den andra bredddeklarationen åsidosätter den första.
Följande kommer att ge oss en solid röd gräns som är 2px på toppen, 4px till höger, 8 px på botten och 16px till vänster.
På samma sätt kommer detta att ge oss en 5px solid ram som är blå överst och botten och röd till vänster och höger.
Schorthand
Jag vill inte spendera för mycket tid på kontorsfastigheten helt enkelt för att stöd inte är bra och du brukar nog aldrig använda den. Fördelen är att konturerna, till skillnad från gränser, inte påverkar din layout. Om du tycker att du någonsin använder kontur är syntaxen ganska nära det för gränserna.
Följande representerar värdena för kontur-bredd, disposition-stil och skissera-färg i den ordningen.
Teckensnitt: det långa vägen
Det finns en massa olika typsnitt egenskaper som du kan röra med för att ändra utseendet på din typografi. Följaktligen kan ditt stylesheet snabbt fylla på block av stilar som nedan.
Teckensnitt stenografi
Font shorthand är en riktigt tung hitter så långt som utrymme sparas. Vi kan ta all information ovan och klämma in den i en kort och överraskande lättläst linje.
För det mesta är det förmodligen mycket kortare, bara för att du inte behöver alla dessa stylingalternativ. Du kan dike fontstil, variant och vikt och bara deklarera en snabb teckenstorlek, linjehöjd och fontfamilj.
Listor: The Long Way
Lista stenografi är verkligen intressant eftersom jag sällan ser någon röra med dessa egenskaper ändå. Om du är en lista mästare men du kan använda de tre egenskaperna av listestilen som visas nedan.
Lista stenografi
Den här är ganska förutsägbar, bara kasta dessa tre egenskaper till? List-style? och du är bra att gå.
CSS3 Transitions: The Long Way
CSS3-övergångar är uppenbarligen fortfarande ganska nya och därför är stödet annorlunda över webbläsare. Här ska vi använda övergång men du skulle troligen bryta ut det här -webkit-övergången, -moz-övergången, och -o-övergången också.
Här är de grundläggande egenskaperna listade en i taget:
CSS Transition Shorthand
Det här är en egendom där du nästan alltid ser stenografi som används istället för den långa versionen. Om du någonsin gjort CSS-övergångar är du förmodligen mer bekant med syntaxen nedan.
Och naturligtvis, som vi nämnde ovan, eftersom webbläsare fortfarande inte är helt enhetliga på detta måste du inkludera dessa otäcka lilla leverantörs prefix. Här är ett typiskt exempel på koden du skulle använda för en övergång med maximal kompatibilitet (IE är fortfarande utelämnad).
Slutsats
CSS stenografi är ett fantastiskt verktyg för att både spara tid och utrymme. Om du är bekant med syntaxen kan du argumentera för att stenografi är faktiskt mer läsbar än den långa versionen. Men för nybörjare är det mycket lättare att läsa märkta egenskaper, så kom bara ihåg vad ditt mål och publiken är för ett visst projekt. Om du skriver en handledning kanske du vill lista ut enskilda värden eller förklara din stenografi i sin helhet, även om stenografi fungerar perfekt.
Lämna en kommentar nedan och meddela vilka egenskaper du brukar använda stenografi för och huruvida du har lärt dig något från exemplen ovan.