Skillnaden mellan CSS2 och CSS3

Den största skillnaden mellan CSS2 och CSS3 är att CSS3 har delats upp i olika sektioner, kallas moduler. Var och en av dessa moduler tar sig igenom W3C i olika steg i 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 in som ett enda dokument med alla Cascading Style Sheets information inom den börjar du se fördelarna med att dela upp rekommendationen i mindre, enskilda delar. Eftersom var och en av modulerna jobbar individuellt får utvecklare ett mycket bredare utbud av webbläsarstöd för CSS3-moduler.

Nya CSS3-väljare

CSS3 erbjuder flera nya sätt att skriva CSS-regler med nya CSS-väljare, samt en ny kombinator och några nya pseudo-element.

Det finns tre nya attributväljare:

• Attributets början matchar exakt:

  element [foo ^ = "bar"]

  Elementet har ett attribut som heter foo som börjar med "bar" t.ex.
• Attributslut matchar exakt
  instagram viewer
  :

  element [foo $ = "bar"]

  Elementet har ett attribut som heter foo som slutar med "bar" t.ex.
• Attributet innehåller matchningen:

  element [foo * = "bar"]

  Elementet har en attribut kallad foo som innehåller strängen "bar".

16 nya pseudoklasser har introducerats:

• :rot
  • Dokumentets rotelement.
• : nth-child (n)
  • Använd detta för att matcha exakta underelement eller använd variabler för att få alternerande matchningar.
• : nionde sista barnet (n)
  • Matcha exakta underordnade element som räknas upp från det sista.
• : nth-of-type (n)
  • Matcha syskonelement med samma namn före det i dokumentträdet.
• : nth-last-of-type (n)
  • Matcha syskonelement med samma namn som räknas uppifrån och ner.
• :sista barnet
  • Matcha det sista barnelement av föräldern.
• : först-av-typ
  • Matcha det första syskonelementet av den typen.
• : sista typ
  • Matcha det sista syskonelementet av den typen.
• :enda barnet
  • Matcha elementet som är det enda barnet till sin förälder.
• : endast av typen
  • Matcha elementet som är det enda av sin typ.
• :tömma
  • Matcha elementet som inte har några barn (inklusive textnoder).
• :mål
  • Matcha ett element som är målet för den hänvisande URI: n.
• :aktiverad
  • Matcha elementet när det är aktiverat.
• :Inaktiverad
  • Matcha elementet när det är inaktiverat.
• :kontrollerade
  • Matcha elementet när det är markerat (alternativknapp eller kryssruta).
• :inte s)
  • Matcha när elementet inte matchar det enkla väljare.

Det finns en ny kombinator:

• elementA ~ elementB
  • Matcha när element B följer någonstans efter element A, inte nödvändigtvis omedelbart.

Nya fastigheter

CSS3 introducerade också flera nya CSS-egenskaper. Många av dessa egenskaper skapar visuella stilar som sannolikt skulle associera mer med ett grafikprogram som Photoshop. Några av dessa, som border-radius eller box-shadow, har funnits sedan introduktionen av CSS3. Andra, som flexbox eller till och med CSS Grid, är nyare stilar som fortfarande anses vara CSS3-tillägg.

I CSS3 har boxmodellen inte förändrats. Men det finns en massa nya stilegenskaper som kan hjälpa dig att utforma bakgrunden och gränserna för dina rutor.

Flera bakgrundsbilder

Med hjälp av bakgrundsbilden, bakgrundspositionen och bakgrundsupprepningsstilarna kan du ange flera bakgrundsbilder som ska lagras ovanpå varandra i rutan. Den första bilden är det lager som ligger närmast användaren, med följande målade bakom. Om det finns en bakgrundsfärg målas den under alla bildlagren.

Nya egenskaper för bakgrundsstil

Det finns också några nya bakgrundsegenskaper i CSS3:

• bakgrund-klipp
• Den här egenskapen definierar hur bakgrundsbilden ska klippas. Standard är gränsrutan, men den kan ändras till stoppningsrutan eller innehållsrutan.
• bakgrund-ursprung
• Den här egenskapen avgör om bakgrunden ska placeras i stoppningsrutan, ramrutan eller innehållsrutan.
• bakgrundsstorlek
• Den här egenskapen indikerar bakgrundsstorlekens storlek. Det gör att du kan sträck ut mindre bilder så att de passar sidan.

Ändringar av befintliga bakgrundsstilsegenskaper

Det finns också några ändringar av befintliga bakgrundsstilegenskaper:

• bakgrund-upprepa
  • Det finns två nya värden för den här egenskapen - Plats och runda. Utrymmet placerar den sida vid sida jämnt inom lådan utan att klippas. Runda skalar om bakgrundsbilden så att den kommer att kaklas ett helt antal gånger i rutan.
• bakgrundsbilaga
  • Ett nytt värde "lokalt" läggs till så att bakgrunden rullar med elementets innehåll när elementet har ett rullningsfält.
• bakgrund
  • Bakgrunden stenografi egenskapen lägger till i storlek och ursprung egenskaper.

CSS3 gränsegenskaper

I CSS3 kan gränser vara de stilar vi är vana vid (fast, dubbel, streckad, etc.) eller så kan de vara en bild. Dessutom stöder CSS3 rundade hörn. Gränsbilder är intressanta eftersom du skapar en bild av alla fyra gränserna och sedan berättar CSS hur du tillämpar den bilden på dina gränser.

Nya egenskaper för kantstil

Det finns några nya gränsegenskaper i CSS3:

• gränsradie
• gräns-högst upp till höger-radie, gräns-nedre-höger-radie, gräns-botten-vänster-radie, gräns-topp-vänster-radie
• Med dessa egenskaper kan du skapa rundade hörn på dina gränser.
• border-image-source
• Anger den bildkällfil som ska användas istället för redan definierade kantstilar.
• gräns-bild-skiva
• Representerar de inåtgående förskjutningarna från kantkanterna på gränsen.
• kant-bild-bredd
• Definierar värdet på bredden för din gränsbild.
• kant-bild-utgång
• Anger mängden som gränsbildområdet sträcker sig bortom kantrutan.
• gräns-bild-stretch
• Definierar hur sidor och mellersta delar av kantbilden ska kaklas eller skalas.
• gränsbild
• Korthandsegenskapen för alla gränsbildsegenskaper.

Ytterligare CSS3-egenskaper relaterade till gränser och bakgrunder

När en ruta bryts vid en sidbrytning, kolumnbrytning eller radbrytning (för inbyggda element), box-dekoration-break egenskap definierar hur de nya lådorna är insvept med kant och vaddering. Bakgrunder delar upp med flera trasiga rutor med den här egenskapen.

En ny box-skugga egenskapen lägger till skuggor i rutan.

Med CSS3 kan du nu enkelt skapa en webbsida med flera kolumner utan tabeller eller komplicerade div taggstrukturer. Du berättar helt enkelt webbläsaren hur många kolumner kroppselementet ska ha och hur breda de ska vara. Dessutom kan du lägga till gränser (regler) och bakgrundsfärger som sträcker sig över kolumnens höjd, och din text kommer automatiskt att flöda genom alla kolumner.

Definiera kolumnernas antal 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 flödar sedan texten för att fylla utrymmet med kolumner så breda.
• kolumnräkning
  • Definierar antalet kolumner på sidan. Webbläsaren skapar sedan kolumner som är tillräckligt breda för att passa i utrymmet, men bara det nummer du anger.
• kolumner
  • Shorthand-egenskap där du kan definiera antingen bredd eller nummer (eller båda, men det är sällan meningsfullt).

CSS3 Kolumnbrister och regler

Gaps och regler placeras mellan kolumner i samma scenario med flera kolumner. Gap kommer att skjuta isär kolumnerna, men regler tar inte något utrymme. Om en kolumnregel är bredare än dess mellanrum överlappar den intilliggande kolumner. Det finns fem nya egenskaper för kolumnregler och luckor:

• kolumngap
  • Definierar bredden på mellanrummen mellan kolumnerna.
• kolumn-regel-färg
  • Definierar färgen på regeln.
• kolumn-regel-stil
  • Definierar stilen för regeln (fast, prickad, dubbel, etc.).
• kolumn-regel-bredd
  • Definierar bredden på regeln.
• kolumnregel
  • En stenografisk egenskap som definierar alla tre kolumnregelegenskaper samtidigt.

CSS3 kolumnbrytningar, spännande kolumner och fyllningskolumner

Kolumn pauser använder samma CSS2-alternativ som används för att definiera pauser i sidinnehåll, men med tre nya egenskaper: break-before, break-afteroch inbrott.

Som med tabeller kan du ställa in element så att de spänner över kolumner med kolumn-span-egenskapen. Detta låter dig skapa rubriker som spänner över flera kolumner mer som en tidning.

Fyllning av kolumner bestämmer hur mycket innehåll som ska finnas i varje kolumn. Balanserade kolumner försöker sätta samma mängd innehåll i varje kolumn medan auto bara flödar innehållet tills kolumnen är full och sedan går till nästa.

Fler funktioner i CSS3 som inte ingår i CSS2

Det finns många ytterligare funktioner i CSS3 som inte fanns i CSS2, inklusive:

• CSS Malllayoutmodul och CSS3 Grid Positioning Module: Skapa nät med CSS.
• CSS3-textmodul: Skissera text och till och med skapa skuggor med CSS.
• CSS3 Färgmodul: Nu med opacitet.
• Ändringar i boxmodellen: Inklusive en tält egendom som fungerar som IE-taggen.
• CSS3-användargränssnittsmodul: Ger dig nya markörer, svar på åtgärder, obligatoriska fält och till och med storleksändring av element.
• Mediefrågor: Mediefrågor ger dig mer flexibilitet när du definierar hur ett formatmall ska användas. Du kan till exempel definiera ett formatmall som endast är för handhållna enheter som har en visningsport större än 20 em.
• CSS3 Ruby-modul: 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 sidmedia (papper, OH-film, etc).
• Genererat innehåll: Köra sidhuvuden och sidfötter, fotnoter och annat innehåll som genereras programmatiskt, särskilt för sidmedia.
• CSS3 Talmodul: Ändringar i ljud-CSS.