Forskjellen mellom CSS2 og CSS3

Den største forskjellen mellom CSS2 og CSS3 er at CSS3 er delt inn i forskjellige seksjoner, kalt moduler. Hver av disse modulene er på vei gjennom W3C i forskjellige stadier av anbefalingsprosessen. Denne prosessen har gjort det mye enklere for ulike deler av CSS3 å bli akseptert og implementert i nettleseren av forskjellige produsenter.

Hvis du sammenligner denne prosessen med det som skjedde med CSS2, hvor alt ble sendt inn som et enkelt dokument med alle Cascading Style Sheets informasjon i den, begynner du å se fordelene ved å dele anbefalingen opp i mindre, individuelle biter. Fordi hver av modulene jobbes individuelt, har utviklere et mye bredere utvalg av nettleserstøtte for CSS3-moduler.

Nye CSS3-velgere

CSS3 tilbyr flere nye måter å skrive CSS-regler med nye CSS-velgere, samt en ny kombinator, og noen nye pseudo-elementer.

Det er tre nye attributtvelgere:

  • Begynner samsvarer med attributt nøyaktig:
    element [foo ^ = "bar"]
    Elementet har et attributt kalt foo som begynner med "bar" f.eks.
  • instagram viewer
  • Attributtslutt samsvarer nøyaktig:
    element [foo $ = "bar"]
    Elementet har et attributt kalt foo som slutter med "bar" f.eks.
  • Attributt inneholder kampen:
    element [foo * = "bar"]
    Elementet har en Egenskap kalt foo som inneholder strengen "bar".

16 nye pseudoklasser er introdusert:

  • :rot
    • Rotelementet i dokumentet.
  • : nth-child (n)
    • Bruk dette for å matche eksakte underordnede elementer eller bruk variabler for å få vekslende treff.
  • : nt siste barn (n)
    • Match nøyaktige underordnede elementer som teller opp fra det siste.
  • : nth-of-type (n)
    • Match søskenelementer med samme navn foran det i dokumenttreet.
  • : nth-last-of-type (n)
    • Match søskenelementer med samme navn som teller opp fra bunnen.
  • :siste barn
    • Match det siste barnelement av foreldrene.
  • : første type
    • Match det første søskenelementet av den typen.
  • : siste type
    • Match det siste søskenelementet av den typen.
  • :enebarn
    • Match elementet som er det eneste barnet til foreldrene.
  • : bare av typen
    • Match elementet som er det eneste av sin type.
  • :tømme
    • Match elementet som ikke har barn (inkludert tekstnoder).
  • :mål
    • Match et element som er målet for den henvisende URI.
  • : aktivert
    • Match elementet når det er aktivert.
  • :funksjonshemmet
    • Match elementet når det er deaktivert.
  • :sjekket
    • Match elementet når det er merket av (alternativknapp eller avkrysningsrute).
  • : ikke (s)
    • Match når elementet ikke samsvarer med det enkle velgerne.

Det er en ny kombinator:

  • elementA ~ elementB
    • Match når element B følger et sted etter element A, ikke nødvendigvis umiddelbart.

Nye eiendommer

CSS3 introduserte også flere nye CSS-egenskaper. Mange av disse egenskapene skaper visuelle stiler som sannsynligvis vil assosiere mer med et grafikkprogram som Photoshop. Noen av disse, som border-radius eller box-shadow, har eksistert siden introduksjonen av CSS3. Andre, som flexbox eller til og med CSS Rutenett, er nyere stiler som fortsatt betraktes som CSS3-tillegg.

I CSS3 har ikke boksmodellen endret seg. Men det er en haug med nye stilegenskaper som kan hjelpe deg med å style bakgrunnen og kantene til boksene dine.

Flere bakgrunnsbilder

Ved å bruke bakgrunnsbildet, bakgrunnsposisjonen og bakgrunnsrepetisjonsstilen, kan du angi flere bakgrunnsbilder som skal legges ovenpå hverandre i boksen. Det første bildet er laget nærmest brukeren, med følgende malt bak. Hvis det er bakgrunnsfarge, er den malt under alle bildelagene.

Nye egenskaper for bakgrunnsstil

Det er også noen nye bakgrunnsegenskaper i CSS3:

  • bakgrunns-klipp
  • Denne egenskapen definerer hvordan bakgrunnsbildet skal klippes ut. Standard er kantboksen, men den kan endres til polstringsboksen eller innholdsboksen.
  • bakgrunn-opprinnelse
  • Denne egenskapen avgjør om bakgrunnen skal plasseres i polstringsboksen, kantboksen eller innholdsboksen.
  • bakgrunnsstørrelse
  • Denne egenskapen indikerer størrelsen på bakgrunnsbildet. Det lar deg strekk mindre bilder slik at de passer til siden.

Endringer i eksisterende egenskaper for bakgrunnsstil

Det er også noen få endringer i eksisterende bakgrunnsstilegenskaper:

  • bakgrunn-gjenta
    • Det er to nye verdier for denne eiendommen - rom og rund. Mellomrom plasserer det flislagte bildet jevnt i boksen uten å bli klippet. Runde skalerer om bakgrunnsbildet slik at det fliser et helt antall ganger i boksen.
  • bakgrunn-vedlegg
    • En ny verdi "lokal" blir lagt til slik at bakgrunnen vil bla med elementets innhold når elementet har en rullefelt.
  • bakgrunn
    • Bakgrunns-stenografi-egenskapen legger til størrelses- og opprinnelsesegenskapene.

CSS3 Grenseegenskaper

I CSS3 kan grenser være stilene vi er vant til (solid, dobbelt, stiplet osv.), Eller de kan være et bilde. I tillegg støtter CSS3 avrundede hjørner. Kantbilder er interessante fordi du lager et bilde av alle fire kantene og deretter forteller CSS hvordan du bruker bildet på grensene.

Nye egenskaper for kantstil

Det er noen nye grenseegenskaper i CSS3:

  • grense-radius
  • grense-topp-høyre-radius, kant-nederst-høyre-radius, grense-nederst-venstre-radius, grense-topp-venstre-radius
  • Disse egenskapene lar deg lage avrundede hjørner på grensene.
  • border-image-source
  • Spesifiserer bildekildefilen som skal brukes i stedet for allerede definerte kantstiler.
  • border-image-skive
  • Representerer de innvendige forskyvningene fra kantbildene.
  • kant-bilde-bredde
  • Definerer verdien av bredden for kantbildet ditt.
  • border-image-outset
  • Spesifiserer mengden som grense-bildeområdet strekker seg utenfor rammen.
  • border-image-stretch
  • Definerer hvordan sidene og midtdelene av kantbildet skal flislegges eller skaleres.
  • border-image
  • Forkortelsesegenskapen for alle egenskapene til grensebilde.

Ytterligere CSS3-egenskaper knyttet til rammer og bakgrunner

Når en boks brytes ved et sideskift, kolonneskift eller linjeskift (for innebygde elementer), blir boks-dekorasjon-pause egenskap definerer hvordan de nye boksene er pakket med kant og polstring. Bakgrunner deles mellom flere ødelagte bokser ved bruk av denne egenskapen.

En ny bokseskygge egenskap legger skygger til bokselementer.

Med CSS3 kan du nå enkelt sette opp en webside med flere kolonner uten tabeller eller kompliserte div tagstrukturer. Du forteller ganske enkelt nettleseren hvor mange kolonner kroppselementet skal ha og hvor brede de skal være. I tillegg kan du legge til rammer (regler) og bakgrunnsfarger som strekker seg over høyden på kolonnen, og teksten vil flyte gjennom alle kolonnene automatisk.

Definer antall og bredde på kolonnene

Det er tre nye eiendommer som lar deg definere antall og bredde på kolonnene dine:

  • kolonnebredde
    • Definerer bredden kolonnene skal ha. Nettleseren flyter deretter teksten for å fylle mellomrommet med kolonner som er brede.
  • kolonnetelling
    • Definerer antall kolonner på siden. Nettleseren vil da opprette kolonner som er brede nok til å passe i rommet, men bare tallet du angir.
  • kolonner
    • Shorthand-egenskap der du kan definere enten bredde eller tall (eller begge deler, men det er sjelden fornuftig).

CSS3 Kolonnehull og regler

Hull og regler plasseres mellom kolonnene i samme scenario med flere kolonner. Hull vil skyve kolonnene fra hverandre, men reglene tar ikke plass. Hvis en kolonneregel er bredere enn spalten, overlapper den tilstøtende kolonner. Det er fem nye egenskaper for kolonneregler og hull:

  • kolonnegap
    • Definerer bredden på hullene mellom kolonnene.
  • kolonne-regel-farge
    • Definerer fargen på regelen.
  • kolonne-regel-stil
    • Definerer stilen til regelen (solid, stiplet, dobbel osv.).
  • kolonne-regel-bredde
    • Definerer bredden på regelen.
  • kolonne-regel
    • En stenografisk egenskap som definerer alle tre kolonne-regelegenskapene på en gang.

CSS3 Kolonneskift, Spennende Kolonner og Fyll Kolonner

Kolonne pauser bruker de samme CSS2-alternativene som brukes til å definere pauser i sideinnhold, men med tre nye egenskaper: break-before, break-after, og innbrudd.

Som med tabeller, kan du sette elementer til å spenne kolonner med kolonne-span-egenskapen. Dette lar deg lage overskrifter som spenner over flere kolonner mer som en avis.

Fylling av kolonner bestemmer hvor mye innhold som skal være i hver kolonne. Balanserte kolonner prøver å plassere samme mengde innhold i hver kolonne mens auto bare flyter innholdet til kolonnen er full og deretter går til den neste.

Flere funksjoner i CSS3 som ikke er inkludert i CSS2

Det er mange tilleggsfunksjoner i CSS3 som ikke eksisterte i CSS2, inkludert:

  • CSS Template Layout Module og CSS3 Grid Positioning Module: Opprette nett med CSS.
  • CSS3 Tekstmodul: Skissere tekst og til og med lage skygger med CSS.
  • CSS3 Fargemodul: Nå med opasitet.
  • Endringer i boksmodellen: Inkludert en telt eiendom som fungerer som IE-taggen.
  • CSS3-brukergrensesnittmodul: Gir deg nye markører, svar på handlinger, obligatoriske felt og til og med størrelsesendring av elementer.
  • Mediespørsmål: Mediespørsmål gir deg mer fleksibilitet når du definerer hvordan et stilark skal brukes. For eksempel kan du definere et stilark som bare er for håndholdte enheter som har en visningsport større enn 20 em.
  • CSS3 Ruby-modul: Støtter språk som bruker tekstlig rubin til å kommentere dokumenter.
  • CSS3 Paged Media-modul: For enda mer støtte for sider (papir, transparenter osv.).
  • Generert innhold: Kjører topp- og bunntekster, fotnoter og annet innhold som genereres programmatisk, spesielt for sidemedier.
  • CSS3 Talemodul: Endringer i lyd-CSS.