Den största skillnaden mellan CSS2 och CSS3 är att CSS3 har delats upp i olika sektioner, kallade moduler. Var och en av dessa moduler går igenom W3C i olika stadier av rekommendationsprocessen. Denna process har gjort det mycket lättare för olika delar av CSS3 att accepteras och implementeras i webbläsaren av olika tillverkare.
Om du jämför denna process med vad som hände med CSS2, där allt skickades som ett enda dokument med alla Cascading Style Sheets-informationen inom den, börjar du se fördelarna med att bryta rekommendationen upp i mindre enskilda bitar. Eftersom varje modul arbetar individuellt har vi ett mycket större utbud av webbläsarstöd för CSS3-moduler.
Som med alla nya och ändrade specifikationer, var noga med att testa dina CSS3-sidor noggrant i så många webbläsare och operativsystem som möjligt. Kom ihåg att målet inte är att skapa webbsidor som ser ut exakt samma i varje webbläsare, men för att se till att alla stilar som du använder, inklusive CSS3-format, ser bra ut i webbläsarna som stöder dem och att de blir graciösa för äldre webbläsare som låt bli.
Nya CSS3 Selectors
CSS3 erbjuder en massa nya sätt att skriva CSS-regler med nya CSS-väljare, samt en ny kombinationer och några nya pseudo-element.
Tre nya attributväljare:
- Attributets början matchar exakt
elementet foo ^ = "bar" Elementet har ett attribut som heter foo som börjar med "bar", t.ex.
- Attributändningen matchar exakt
elementet foo $ = "bar" Elementet har ett attribut som heter foo som slutar med "bar", t.ex.
- Attribut innehåller matchningen
elementet foo * = "bar" Elementet har ett attribut som heter foo som innehåller strängen "bar", t.ex.
16 nya pseudoklasser:
- :rot
- Roten i dokumentet. I HTML är det alltid.
- : N: te-barn (n)
- Använd detta för att matcha exakta barnelement eller använd variabler för att få alternerande matchningar.
- : N: e-last-barn (n)
- Matcha exakta barnelement som räknas upp från den sista.
- : N: te-of-typ (n)
- Matcha syskonelement med samma namn före det i dokumentträdet.
- : N: te-sista-of-typ (n)
- Match syskonelement med samma namn som räknas upp från botten.
- :sista barnet
- Matcha barnets sista barnelement.
- : Första i-typ
- Match det första syskonelementet av den typen.
- : Sista av typ
- Match det sista syskonelementet av den typen.
- :enda barnet
- Matcha det element som är det enda barnet i sin förälder.
- : Endast av-typ-
- Matcha det element som är det enda av dess typ.
- :tömma
- Matcha det element som inte har några barn (inklusive textnoder).
- :mål
- Matcha ett element som är målet för den refererande URIen.
- :aktiverad
- Matcha elementet när det är aktiverat.
- :Inaktiverad
- Matcha elementet när det är inaktiverat.
- :kontrollerade
- Matcha elementet när det är markerat (radioknapp eller kryssrutan).
- :inte s)
- Match när elementet inte matchar den enkla väljaren s.
En ny kombination:
- elementA ~ elementB
- Match när element B följer någonstans efter elementA, inte nödvändigtvis omedelbart.
Nya egenskaper
CSS3 introducerade också ett antal nya CSS-egenskaper. Många av dessa egenskaper var att skapa visuella stilar som sannolikt skulle associera mer med ett grafikprogram som Photoshop. Några av dessa, som gränsradie eller boxskugga, har funnits sedan introduktionen om CSS3. Andra, som flexbox eller till och med CSS Grid, är nyare format som fortfarande ofta betraktas som CSS3-tillägg.
I CSS3 har boxmodellen inte ändrats. Men det finns en massa nya stilegenskaper som kan hjälpa dig att utforma bakgrunden och gränserna för dina lådor.
Flera bakgrund jag mages
Med bakgrundsbilden, bakgrundsställningen och bakgrundsrepetitionsstilarna kan du ange flera bakgrundsbilder som ska lagras ovanpå varandra i rutan. Den första bilden är skiktet närmast användaren, med följande målade bakom. Om det finns en bakgrundsfärg, är den målad under alla bildlagren.
Egenskaper för ny bakgrundsstil
Det finns också några nya bakgrundsegenskaper i CSS3.
- background-clip
- Den här egenskapen definierar hur bakgrundsbilden ska klippas. Standardrutan är gränslinjen, men den kan ändras till vadderingsrutan eller innehållsrutan.
- background-ursprung
- Den här egenskapen bestämmer huruvida bakgrunden ska vara placerad i stopprutan, gränsen eller innehållsrutan.
- background-storlek
- Med den här egenskapen kan du ange storleken på bakgrundsbilden. Det låter dig sträcka mindre bilder så att de passar på sidan.
Ändringar av befintliga egenskaper för bakgrundsstil
Det finns också några ändringar i befintliga bakgrundsstilegenskaper:
- bakgrund-repeat
- Det finns två nya värden för denna fastighet: utrymme och runda. Rymden rymmer den kaklade bilden jämnt i lådan utan att klippas. Runda omkalkar bakgrundsbilden så att den kommer att kakel ett antal gånger i lådan.
- background-fastsättning
- Ett nytt värde "local" läggs till så att bakgrunden rullar med elementets innehåll när det här elementet har en rullningsfält.
- bakgrund
- Bakgrundshorthandegenskapen läggs till i storlek och ursprungsegenskaperna.
CSS3 Border Properties
I CSS3 kan gränserna vara de stilar vi är vana vid (solid, dubbel, streckad etc.) eller de kan vara en bild. Plus, CSS3 ger möjlighet att skapa rundade hörn.Gränsbilder är intressanta eftersom du skapar en bild av alla fyra gränserna och sedan berättar för CSS hur man applicerar den bilden till dina gränser.
Egenskaper för nya gränsstilar
Det finns några nya gränsaegenskaper i CSS3:
- border-radius
- border-top-right-radie, border-bottom-right-radie, border-bottom-left-radie, border-top-left-radie
- Med dessa egenskaper kan du skapa rundade hörn på dina gränser.
- border-image-source
- Anger bildkällafilen som ska användas istället för gränssnittsstilar som redan definierats.
- border-image-skiva
- Representerar de inåtvända förskjutningarna från gränsbildkanterna
- border-image-bredd
- Definierar värdet på bredden för din gränsbild.
- border-image-början
- Anger det belopp som gränsbildsområdet sträcker sig bortom gränsen.
- border-image-stretch
- Definierar hur sidor och mitten av gränsbilden ska beläggas eller skalas.
- border-image
- Shorthandegenskapen för alla gränsbildsegenskaper.
Ytterligare CSS3 egenskaper relaterade till gränser och bakgrunder
När en ruta bryts vid en sidbrytning definieras kolumnavbrott för radbrytning (för inline-element) egenskapen box-decoration-break hur de nya rutorna är inslagna med kant och vaddering. Bakgrund kan delas upp mellan flera brutna rutor med den här egenskapen.
Det finns också en box-shadow egenskap som kan användas för att lägga till skuggor till boxelement.
Med CSS3 kan du nu enkelt skapa en webbsida med flera kolumner utan tabeller eller komplicerade div-tagstrukturer. Du berättar helt enkelt till webbläsaren hur många kolumner kroppsdelen ska ha och hur bred de borde vara. Dessutom kan du lägga till gränser (regler), bakgrundsfärger som spänner över kolonnens höjd och din text kommer automatiskt att flyta igenom alla kolumnerna.
CSS3-kolumner - Ange kolumnantal och bredd
Det finns tre nya egenskaper som låter dig definiera antalet och bredden på dina kolumner:
- kolumnbredd
- Definierar bredden som dina kolumner ska vara. Webbläsaren flyter sedan texten för att fylla utrymmet med de så stora kolumnerna.
- kolonn-count
- Definierar antalet kolumner på sidan. Webbläsaren skapar sedan kolumner tillräckligt breda för att passa inutrymmet, men endast det nummer du anger.
- kolonner
- Shorthand egenskap där du kan definiera bredden eller numret (eller båda, men det är sällan meningsfullt).
CSS3 kolumnhål och regler
Gap och regler placeras mellan kolumnerna i samma multikolumn scenario. Gap kommer att trycka ihop kolumnerna, men regler tar inte upp något utrymme. Om en kolumnregel är bredare än den är klyftan överlappar den intilliggande kolumnen. Det finns fem nya egenskaper för kolumnregler och luckor:
- kolonn-gap
- Definierar bredden på luckorna mellan kolumnerna.
- kolonn-regel-färg
- Definierar regelns färg.
- kolumnregel stil
- Definierar regelns stil (solid, prickad, dubbel, etc.).
- kolonn-regel-bredd
- Definierar regelns bredd.
- kolonn-regel
- En stenografiegenskap som definierar alla tre kolumnregelegenskaper samtidigt.
CSS3-kolonnbrott, spänningskolumner och fyllningskolumner
Kolumnstörningar använder samma CSS2-alternativ som används för att definiera raster i paged content, men med tre nya egenskaper: break-before, break-efter, och break-inne.
Liksom med tabeller kan du ställa in element för att spänna över kolumner med kolumnsträckaegenskapen. Detta gör att du kan skapa rubriker som spänner över flera kolumner mer som en tidning.
Fyllning av kolumner bestämmer hur mycket innehåll som ska vara i varje kolumn. Balanserade kolumner försöker sätta samma mängd innehåll i varje kolumn medan auto bara flyter innehållet tills kolumnen är full och går sedan till nästa.
Fler funktioner i CSS3 som inte ingår i CSS2
Det finns många fler funktioner i CSS3 som inte existerade i CSS2, inklusive:
- CSS Mall layout modul och CSS3 Grid positioneringsmodul: Skapa nät med CSS.
- CSS3 Textmodul: Skissera text och till och med skapa drop-skuggor med CSS.
- CSS3 Färgmodul: Nu med opacitet.
- Ändringar i boxmodellen: Inkluderar en markeringsegenskap som fungerar som IE-taggen.
- CSS3 användargränssnittsmodul: Ge dig nya markörer, svar på åtgärder, obligatoriska fält och till och med ändra storlek på element.
- Mediafrågor: Mediefrågor ger dig större flexibilitet när du definierar hur ett stilark ska användas. Du kan till exempel definiera ett stilark som endast är för handhållna enheter som har en visningsport större än 20em.
- CSS3 Ruby-modulen: Ger stöd för språk som använder textrubin för att kommentera dokument.
- CSS3 Paged Media-modul: För ännu mer stöd för paged media (papper, OH-film, etc.).
- Genererat innehåll: L löphuvud och sidfot, fotnoter och annat innehåll som genereras programmatiskt, särskilt för paged media.
- CSS3 Talmodul: Förändringar i hörselnätet CSS.
