CSS2 og CSS3

Den største forskjellen mellom CSS2 og CSS3 er at CSS3 er delt opp i ulike seksjoner, kalt moduler. Hver av disse modulene gjør veien 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-informasjonene i den, begynner du å se fordelene ved å bryte anbefalingen opp i mindre, individuelle stykker. Fordi hver av modulene blir bearbeidet individuelt, har vi et mye bredere utvalg av nettleserstøtte for CSS3-moduler.

Som med alle nye og skiftende spesifikasjoner, må du teste dine CSS3-sider grundig i så mange nettlesere og operativsystemer som mulig. Husk målet er ikke å lage websider som ser ut akkurat i hver nettleser, men for å sikre at alle stiler du bruker, inkludert CSS3-stiler, ser bra ut i nettleserne som støtter dem, og at de faller grasiøst tilbake for eldre nettlesere som ikke.

Nye CSS3 Selectors

CSS3 tilbyr en rekke nye måter du kan skrive CSS-regler med nye CSS-selektorer, samt en ny kombinator, og noen nye pseudoelementer.

Tre nye attributtvalgere:

• Attributt begynner nøyaktig

  element foo ^ = "bar" Elementet har en attributt som heter foo som begynner med "bar", f.eks.

• Attributt avslutning samsvarer nøyaktig

  element foo $ = "bar" Elementet har en attributt som heter foo som slutter med "bar" f.eks.

• Egenskapen inneholder kampen

  element foo * = "bar" Elementet har en attributt som heter foo som inneholder strengen "bar", f.eks.

16 nye pseudoklasser:

• :rot
  • Rotteelementet i dokumentet. I HTML er dette alltid.
• : N-te-barn (n)
  • Bruk dette til å matche eksakte barnelementer eller bruk variabler for å få alternerende kamper.
• : N-te-siste-barn (n)
  • Match eksakte barnelementer som teller opp fra den siste.
• : N-te-of-type (n)
  • Match søskenelementer med samme navn før det i dokumenttreet.
• : N-te-siste-of-type (n)
  • Match søskenelementer med samme navn som teller opp fra bunnen.
• :siste barn
  • Match det siste barnelementet til foreldrene.
• : Første-av-typen
  • Match det første søskenelementet til den typen.
• : Siste-of-type
  • Match det siste søskenelementet til den typen.
• :enebarn
  • Match elementet som er barnets eneste barn.
• : Bare-of-type
  • Match elementet som er den eneste av sin type.
• :tømme
  • Match elementet som ikke har barn (inkludert tekst noder).
• :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 (radioknapp eller avkrysningsboks).
• : Ikke (s)
  • Match når elementet ikke samsvarer med den enkle velgeren s.

En ny kombinator:

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

Nye egenskaper

CSS3 introduserte også en rekke nye CSS egenskaper. Mange av disse egenskapene var å skape visuelle stiler som sannsynligvis ville forene mer med et grafikkprogram som Photoshop. Noen av disse, som grense-radius eller bokseskygge, har eksistert siden introduksjonen hvis CSS3. Andre, som flexbox eller CSS Grid, er nyere stilarter som fortsatt ofte betraktes som CSS3 tillegg.

I CSS3 er boksemodellen ikke endret. Men det er en rekke nye stilegenskaper som kan hjelpe deg med å utforme bakgrunnene og grensene til boksene dine.

Flere bakgrunner jeg mages

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

Egenskaper for ny bakgrunnsstil

Det er også noen nye bakgrunnsegenskaper i CSS3.

• bakgrunn klype
  • Denne egenskapen definerer hvordan bakgrunnsbildet skal klippes. Standard er grenseboksen, men den kan endres til polstringskassen eller innholdsruten.
• background-opprinnelse
  • Denne egenskapen bestemmer om bakgrunnen skal være plass i boksen, kantboksen eller innholdsruten.
• background-size
  • Denne egenskapen lar deg angi størrelsen på bakgrunnsbildet. Den lar deg strekke mindre bilder for å passe på siden.

Endringer i eksisterende egenskaper for bakgrunnsstil

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

• background-repeat
  • Det er to nye verdier for denne eiendommen: plass og runde. Mellomrom plasserer det flislagte bildet jevnt i esken uten å bli klippet. Runde rescales bakgrunnsbildet slik at det vil flette et antall ganger i esken.
• Bakgrunnen-feste
  • En ny verdi "lokal" legges til, slik at bakgrunnen vil rulle med elementets innhold når elementet har en rullefelt.
• bakgrunn
  • Bakgrunnshorthandegenskapen legger til i størrelsen og opprinnelsesegenskapene.

CSS3 Border Properties

I CSS3 kan grenser være de stilene vi er vant til (solid, dobbelt, stiplet, etc.), eller de kan være et bilde. I tillegg gir CSS3 muligheten til å lage avrundede hjørner.Borderbilder er interessante fordi du lager et bilde av alle fire grenser og deretter forteller CSS hvordan du skal bruke bildet til dine grenser.

Egenskaper for New Border Style

Det er noen nye grenseegenskaper i CSS3:

• border-radius
  • border-top-right-radius, border-bottom-høyre-radius, nedre kant venstre-radius, border-top-venstre-radius
  • Disse egenskapene lar deg lage avrundede hjørner på dine grenser.
• border-bildekilde
  • Angir bildekildefilen som skal brukes i stedet for grensestiler som allerede er definert.
• border-image-slice
  • Representerer innvendige forskyvninger fra kantlinjekanter
• border-bilde-bredde
  • Definerer verdien av bredden for grensebildet ditt.
• border-image-starten
  • Angir beløpet som grenseavbildningsområdet strekker seg utover grenseboksen.
• border-image-strekning
  • Definerer hvordan sidene og midtdelene av grensebildet skal flislegges eller skaleres.
• border-image
  • Shorthand-egenskapen for alle grenseegenskapene.

Ytterligere CSS3 egenskaper relatert til grenser og bakgrunner

Når en boks brytes ved en pause, definerer kolonnepause for linjeskift (for inlineelementer) egenskapen for boksdekorasjon, hvordan de nye boksene pakkes inn med kant og polstring. Bakgrunnene kan deles opp mellom flere ødelagte bokser ved hjelp av denne egenskapen.

Det er også en boksskyggeegenskap som kan brukes til å legge til skygger i bokselementer.

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

CSS3 kolonner - Definer antall og bredde på kolonnene

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

• kolonnebredde
  • Definerer bredden som kolonnene dine skal være. Nettleseren vil da flyte teksten for å fylle ut rommet med store kolonner.
• kolonne-count
  • Definerer antall kolonner på siden. Nettleseren vil da lage kolonner bred nok til å passe inn i rommet, men bare tallet du angir.
• kolonner
  • Shorthand eiendom hvor du kan definere bredden eller nummeret (eller begge, men det er sjelden sanselig).

CSS3 kolonnehull og regler

Gap og regler er plassert mellom kolonner i samme multikolonne scenario. Gap vil skyve fra kolonnene, men reglene tar ikke opp plass. Hvis en kolonneregel er bredere enn den er tom, vil den overlappe tilstøtende kolonner. Det er fem nye egenskaper for kolonne regler og hull:

• kolonne-gap
  • Definerer bredden på hullene mellom kolonnene.
• kolonne-regel-farge
  • Definerer fargen på regelen.
• kolonne-regel-stil
  • Definerer stilen til regelen (solid, prikket, dobbel, etc.).
• kolonne-regel-bredde
  • Definerer bredden på regelen.
• kolonne-regelen
  • En shorthand-egenskap som definerer alle tre kolonnereguleringsegenskapene samtidig.

CSS3 kolonnebrett, spenningskolonner og fyllingskolonner

Kolonnebrudd bruker de samme CSS2-alternativene som brukes til å definere brudd i pagget innhold, men med tre nye egenskaper: break-før, break-etter, og break-inne.

Som med tabeller kan du stille inn elementer for å spenne kolonner med kolonneksponeringsegenskapen. Dette lar deg lage overskrifter som spenner over flere kolonner, mer som en avis.

Fylling av kolonner bestemmer hvor mye innhold vil være i hver kolonne. Balanserte kolonner prøver å sette samme mengde innhold i hver kolonne mens automatisk bare flyter innholdet inntil kolonnen er full og går deretter til neste.

Flere funksjoner i CSS3 som ikke er inkludert i CSS2

Det finnes mange ekstra funksjoner i CSS3 som ikke eksisterte i CSS2, inkludert:

• CSS Template layout modul og CSS3 Grid posisjoneringsmodul: Opprette nett med CSS.
• CSS3 Tekstmodul: Skisse tekst og til og med lage drop-skygger med CSS.
• CSS3 Fargemodul: Nå med opasitet.
• Endringer i boksemodellen: Inkluderer en teltegenskap som fungerer som IE-taggen.
• CSS3 brukergrensesnittmodul: Gir deg nye markører, svar på handlinger, obligatoriske felt, og til og med endring av elementer.
• Media spørringer: Medieforespørsler gir deg mer fleksibilitet når du definerer hvordan et stilark skal brukes. Du kan for eksempel definere et stilark som bare gjelder for håndholdte enheter som har en visningsport større enn 20em.
• CSS3 Ruby modul: Gir støtte til språk som bruker tekstlig rubin til å annotere dokumenter.
• CSS3 Paged Media-modul: For enda mer støtte for paged media (papir, transparenter, etc).
• Generert innhold: L løpende overskrifter og footers, fotnoter og annet innhold som genereres programmatisk, spesielt for paged media.
• CSS3 Talemodul: Endringer i fonetisk CSS.