Forskjellen mellom CSS2 og CSS3

Forstå de store endringene i CSS3

InnholdsfortegnelseUtvide

• Nye CSS3-velgere introdusert
• Nye CSS-egenskaper i CSS3
• Flere bakgrunnsbilder
• Nye egenskaper for bakgrunnsstil
• Endringer i eksisterende bakgrunnsstilegenskaper
• CSS3 Nye kantegenskaper og stiler
• Nye egenskaper for kantstil
• Flere kant- og bakgrunnsegenskaper
• Nye egenskaper for å definere kolonnenummer og bredde
• CSS3-kolonnehull og regler
• CSS3 Nye kolonnebrytende alternativer
• Flere nye funksjoner i CSS3

Den største forskjellen mellom CSS2 og CSS3 er at CSS3 har blitt delt opp i forskjellige seksjoner, kalt moduler . Hver av disse modulene er på vei gjennom W3C i ulike 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 deler. Fordi hver av modulene jobbes med individuelt, nyter 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:

Attributtbegynnelsen samsvarer nøyaktig:|_+_|Elementet har et attributt kalt foo som begynner med 'bar', f.eks. Attributtavslutningen samsvarer nøyaktig:|_+_|Elementet har et attributt kalt foo som slutter med 'bar', f.eks. Attributtet inneholder samsvaret:|_+_|Elementet har en Egenskap kalt foo som inneholder strengen 'bar.'

16 nye pseudo-klasser har blitt introdusert:

:rot
• Rotelementet til dokumentet.
:nth-child(n)
• Bruk dette til å matche eksakte underordnede elementer eller bruk variabler for å få alternerende samsvar.
:nth-siste-barn(n)
• Match eksakte underordnede elementer som telles opp fra det siste.
:nth-of-type(n)
• Match søskenelementer med samme navn foran i dokumenttreet.
:nth-last-of-type(n)
• Match søskenelementer med samme navn som teller opp fra bunnen.
:siste barn
• Match den siste barneelement av forelderen.
:først av typen
• Match det første søskenelementet av den typen.
: siste av typen
• Match det siste søskenelementet av den typen.
:enebarn
• Match elementet som er det eneste barnet til dets overordnede.
:bare av typen
• Match elementet som er det eneste av sin type.
:tømme
• Match elementet som ikke har underordnede (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 avmerkingsboks).
:ikke(r)
• Match når elementet ikke samsvarer med det enkle velgere .

Det er en ny kombinator:

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

Nye egenskaper

CSS3 introduserte også flere nye CSS-egenskaper. Mange av disse egenskapene skaper visuelle stiler som sannsynligvis vil assosieres 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 Grid, er nyere stiler som fortsatt ofte anses som CSS3-tilføyelser.

I CSS3 har boksmodellen ikke 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 stilene bakgrunnsbilde, bakgrunnsposisjon og bakgrunnsgjentakelse kan du spesifisere flere bakgrunnsbilder som skal legges oppå hverandre i boksen. Det første bildet er laget nærmest brukeren, med de følgende malt bak. Hvis det er en bakgrunnsfarge, males den under alle bildelagene.

Nye egenskaper for bakgrunnsstil

Det er også noen nye bakgrunnsegenskaper i CSS3:

bakgrunnsklipp
• Denne egenskapen definerer hvordan bakgrunnsbildet skal klippes. Standard er kantboksen, men den kan endres til utfyllingsboksen eller innholdsboksen.
bakgrunnsopprinnelse
• Denne egenskapen bestemmer om bakgrunnen skal plasseres i utfyllingsboksen, kantboksen eller innholdsboksen.
bakgrunnsstørrelse
• Denne egenskapen indikerer størrelsen på bakgrunnsbildet . Det lar deg strekk ut mindre bilder for å passe til siden .

Endringer i eksisterende bakgrunnsstilegenskaper

Det er også noen endringer i eksisterende bakgrunnsstilegenskaper:

bakgrunnsgjenta
• Det er to nye verdier for denne eiendommen — rom og rund . Space fordeler det flislagte bildet jevnt i boksen uten å bli klippet. Runde skalerer bakgrunnsbildet på nytt slik at det blir flislagt et helt antall ganger i boksen.
bakgrunnsvedlegg
• En ny verdi 'lokal' legges til slik at bakgrunnen vil rulle med elementets innhold når det elementet har en rullefelt.
bakgrunn
• Bakgrunnsstenografiegenskapen legger til egenskapene for størrelse og opprinnelse.

CSS3-grenseegenskaper

I CSS3 kan kantlinjer være stilene vi er vant til (heltrukken, dobbel, 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 kantlinjene og deretter forteller CSS hvordan du bruker det bildet på kantene dine.

Nye egenskaper for kantstil

Det er noen nye grenseegenskaper i CSS3:

grense-radius
• border-top-right-radius , kant-nedre-høyre-radius , kant-nederst-venstre-radius , border-top-venstre-radius
• Disse egenskapene lar deg lage avrundede hjørner på kantene dine.
border-image-source
• Spesifiserer bildekildefilen som skal brukes i stedet for kantstiler som allerede er definert.
border-image-slice
• Representerer forskyvningene innover fra kantbildekantene.
kant-bilde-bredde
• Definerer verdien på bredden for kantbildet ditt.
border-image-outset
• Angir hvor mye kantbildeområdet strekker seg utover kantfeltet.
border-image-stretch
• Definerer hvordan sidene og midtdelene av kantbildet skal flislegges eller skaleres.
grense-bilde
• Stenografiegenskapen for alle kantbildeegenskapene.

Ytterligere CSS3-egenskaper relatert til grenser og bakgrunner

Når en boks brytes ved sideskift, kolonneskift eller linjeskift (for innebygde elementer), vil boks-pynt-pause egenskap definerer hvordan de nye boksene pakkes med kant og polstring. Bakgrunner deler seg mellom flere ødelagte bokser ved å bruke denne egenskapen.

En ny boks-skygge egenskap legger til skygger til bokselementer.

Med CSS3 kan du nå enkelt sette opp en nettside med flere kolonner uten tabeller eller komplisert div tag strukturer. Du forteller ganske enkelt nettleseren hvor mange kolonner body-elementet skal ha og hvor brede de skal være. I tillegg kan du legge til rammer (regler) og bakgrunnsfarger som spenner over høyden på kolonnen, og teksten din 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 på kolonnene dine. Nettleseren vil deretter flyte teksten for å fylle plassen med kolonner så brede.
kolonneantall
• Definerer antall kolonner på siden. Nettleseren vil da lage kolonner som er brede nok til å passe inn i rommet, men bare nummeret du angir.
kolonner
• Stenografi-egenskap der du kan definere enten bredden eller tallet (eller begge deler, men det gir sjelden mening).

CSS3-kolonnehull og regler

Mellomrom og regler plasseres mellom kolonner i det samme scenariet med flere kolonner. Mellomrom vil skyve kolonnene fra hverandre, men regler tar ikke opp noen plass. Hvis en kolonneregel er bredere enn gapet, vil den overlappe tilstøtende kolonner. Det er fem nye egenskaper for kolonneregler og hull:

kolonne-gap
• Definerer bredden på avstandene mellom kolonnene.
kolonne-regel-farge
• Definerer fargen på regelen.
kolonne-regel-stil
• Definerer stilen til regelen (heltrukken, stiplet, dobbel osv.).
kolonne-regel-bredde
• Definerer bredden på regelen.
kolonne-regel
• En stenografi-egenskap som definerer alle tre kolonneregelegenskapene samtidig.

CSS3-kolonnebrytninger, spenner over kolonner og fyller kolonner

Kolonne pauser bruker de samme CSS2-alternativene som brukes til å definere pauser i sideinnhold, men med tre nye egenskaper: pause før , pause etter , og innbrudd .

Som med tabeller kan du angi at elementer skal spenne over kolonner med egenskapen kolonnespenn. Dette lar deg lage overskrifter som spenner over flere spalter mer som en avis.

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

Flere funksjoner i CSS3 som ikke er inkludert i CSS2

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

CSS-mallayoutmodul og CSS3 Grid-posisjoneringsmodul: Opprette rutenett med CSS. CSS3 Tekstmodul: Skisser tekst og til og med lag skygger med CSS. CSS3 fargemodul: Nå med ugjennomsiktighet. Endringer i boksmodellen: Inkludert en telt egenskap som fungerer som IE-taggen. CSS3 brukergrensesnittmodul: Gir deg nye markører, svar på handlinger, obligatoriske felt og til og med endre størrelse på elementer. Mediespørsmål: Mediespørsmål gi deg mer fleksibilitet når du definerer hvordan et stilark skal brukes. Du kan for eksempel definere et stilark som bare er for håndholdte enheter som har en visningsport større enn 20em. CSS3 Ruby-modul: Gir støtte for språk som bruker tekstrubin for å kommentere dokumenter. CSS3 Sided Media-modul: For enda mer støtte for sidesøkte medier (papir, transparenter osv.). Generert innhold: Kjøre topptekster og bunntekster, fotnoter og annet innhold som genereres programmatisk, spesielt for sidesøkte medier. CSS3 talemodul: Endringer i lyd-CSS.