Forskellen mellem CSS2 og CSS3

Den største forskel mellem CSS2 og CSS3 er, at CSS3 er blevet opdelt i forskellige sektioner, kaldet moduler. Hvert af disse moduler finder vej gennem W3C i forskellige faser af anbefalingsprocessen. Denne proces har gjort det meget lettere for forskellige stykker CSS3 at blive accepteret og implementeret i browseren af ​​forskellige producenter.

Hvis du sammenligner denne proces med hvad der skete med CSS2, hvor alt blev indsendt som et enkelt dokument med alle Cascading Style Sheets information inden for det, begynder du at se fordelene ved at dele anbefalingen op i mindre, individuelle stykker. Da hvert af modulerne arbejdes individuelt, nyder udviklerne en meget bredere vifte af browsersupport til CSS3-moduler.

Nye CSS3-vælgere

CSS3 tilbyder flere nye måder at skrive CSS-regler med nye CSS-vælgere samt en ny kombinator og nogle nye pseudo-elementer.

Der er tre nye attributvælgere:

• Attributter begynder nøjagtigt:

  element [foo ^ = "bar"]

  Elementet har en attribut kaldet foo, der begynder med "bar" f.eks.
instagram viewer
• Attributter slutter nøjagtigt:

  element [foo $ = "bar"]

  Elementet har en attribut kaldet foo, der slutter med "bar" f.eks.
• Attribut indeholder matchet:

  element [foo * = "bar"]

  Elementet har en attribut hedder foo der indeholder strengen "bar".

16 nye pseudoklasser er blevet introduceret:

• :rod
  • Dokumentets rodelement.
• : n-barn (n)
  • Brug dette til at matche nøjagtige underordnede elementer eller brug variabler til at få skiftende match.
• : niende sidste barn (n)
  • Match nøjagtige underordnede elementer, der tæller op fra det sidste.
• : nth-of-type (n)
  • Match søskendeelementer med samme navn foran det i dokumenttræet.
• : n-sidste-af-typen (n)
  • Match søskendeelementer med samme navn, der tæller op fra bunden.
• :sidste barn
  • Match det sidste barnelement af forældrene.
• : første af typen
  • Match det første søskendeelement af den type.
• : sidste type
  • Match det sidste søskendeelement af den type.
• :enebarn
  • Match det element, der er det eneste barn til sin forælder.
• : kun-af-typen
  • Match det element, der er det eneste af sin type.
• :tom
  • Match det element, der ikke har børn (inklusive tekstnoder).
• :mål
  • Match et element, der er målet for den henvisende URI.
• : aktiveret
  • Match elementet, når det er aktiveret.
• :handicappet
  • Match elementet, når det er deaktiveret.
• : kontrolleret
  • Match elementet, når det er markeret (alternativknap eller afkrydsningsfelt).
• : ikke (s)
  • Match, når elementet ikke matcher det enkle vælgere.

Der er en ny kombinator:

• elementA ~ elementB
  • Match når element B følger et sted efter element A, ikke nødvendigvis med det samme.

Nye ejendomme

CSS3 introducerede også flere nye CSS-egenskaber. Mange af disse egenskaber skaber visuelle stilarter, der sandsynligvis forbinder mere med et grafikprogram som Photoshop. Nogle af disse, som border-radius eller box-shadow, har eksisteret siden introduktionen af ​​CSS3. Andre, som flexbox eller endda CSS Gitter, er nyere stilarter, der stadig betragtes som CSS3-tilføjelser.

I CSS3 har boksmodellen ikke ændret sig. Men der er en masse nye stilegenskaber, der kan hjælpe dig med at style baggrunde og grænser for dine kasser.

Flere baggrundsbilleder

Ved hjælp af baggrundsbillede, baggrundsposition og baggrunds-gentagelsesstile kan du angive flere baggrundsbilleder, der skal lagdeles oven på hinanden i feltet. Det første billede er det lag, der er tættest på brugeren, med følgende malede bagved. Hvis der er baggrundsfarve, males den under alle billedlagene.

Nye egenskaber for baggrundsstil

Der er også nogle nye baggrundsegenskaber i CSS3:

• baggrund-klip
• Denne egenskab definerer, hvordan baggrundsbilledet skal klippes. Standard er grænsefeltet, men det kan ændres til udfyldningsfeltet eller indholdsfeltet.
• baggrund-oprindelse
• Denne egenskab bestemmer, om baggrunden skal placeres i udfyldningsfeltet, rammefeltet eller indholdsfeltet.
• baggrundsstørrelse
• Denne egenskab angiver størrelsen på baggrundsbilledet. Det giver dig mulighed for at stræk mindre billeder, så de passer til siden.

Ændringer af eksisterende egenskaber for baggrundsstil

Der er også et par ændringer i eksisterende baggrundsstileegenskaber:

• baggrund-gentagelse
  • Der er to nye værdier for denne egenskab - plads og rund. Mellemrum placerer det flisebelagte billede jævnt inden i kassen uden at blive klippet. Runde omskalerer baggrundsbilledet, så det fliser et helt antal gange i feltet.
• baggrund-vedhæftet fil
  • En ny værdi "lokal" tilføjes, så baggrunden ruller med elementets indhold, når elementet har en rullebjælke.
• baggrund
  • Baggrunden stenografi egenskab tilføjer i størrelse og oprindelse egenskaber.

CSS3-kantegenskaber

I CSS3 kan grænser være de stilarter, vi er vant til (solid, dobbelt, stiplet osv.), Eller de kan være et billede. Derudover understøtter CSS3 afrundede hjørner. Grænsebilleder er interessante, fordi du opretter et billede af alle fire grænser og derefter fortæller CSS, hvordan du anvender billedet på dine grænser.

Nye egenskaber for kantstil

Der er nogle nye kantegenskaber i CSS3:

• grænseradius
• grænse-top-højre-radius, grænse-nederst til højre-radius, grænse-nederst-venstre-radius, kant-top-venstre-radius
• Disse egenskaber giver dig mulighed for at oprette afrundede hjørner på dine grænser.
• border-image-source
• Angiver den billedkildefil, der skal bruges i stedet for allerede definerede kantstilarter.
• border-image-skive
• Repræsenterer de indadgående forskydninger fra kantbilledkanterne.
• kant-billede-bredde
• Definerer værdien af ​​bredden for dit kantbillede.
• border-image-outset
• Angiver det beløb, som grænsebilledområdet strækker sig ud over grænsefeltet.
• border-image-stretch
• Definerer, hvordan siderne og de midterste dele af kantbilledet skal fliser eller skaleres.
• grænsebillede
• Stenografien for alle egenskaber ved grænsebillede.

Yderligere CSS3-egenskaber relateret til kanter og baggrunde

Når en boks brydes ved et sideskift, kolonneskift eller linjeskift (for integrerede elementer), vises boks-dekoration-pause egenskab definerer, hvordan de nye bokse er pakket med kant og polstring. Baggrunder opdeles i flere ødelagte felter ved hjælp af denne egenskab.

Et nyt box-shadow egenskab tilføjer skygger til bokselementer.

Med CSS3 kan du nu let oprette en webside med flere kolonner uden tabeller eller kompliceret div tag strukturer. Du fortæller blot browseren, hvor mange kolonner kropselementet skal have, og hvor brede de skal være. Derudover kan du tilføje kanter (regler) og baggrundsfarver, der spænder over kolonnens højde, og din tekst flyder automatisk gennem alle kolonnerne.

Definer antallet og bredden af ​​kolonnerne

Der er tre nye ejendomme der giver dig mulighed for at definere antallet og bredden på dine kolonner:

• søjlebredde
  • Definerer bredden, som dine kolonner skal være. Browseren flyder derefter teksten for at udfylde rummet med kolonner, der er brede.
• kolonnetælling
  • Definerer antallet af kolonner på siden. Browseren opretter derefter kolonner, der er brede nok til at passe i rummet, men kun det nummer, du angiver.
• kolonner
  • Korthandsegenskab, hvor du kan definere enten bredden eller nummeret (eller begge dele, men det giver sjældent mening).

CSS3 Kolonnehuller og regler

Huller og regler placeres mellem kolonner i det samme scenarie med flere kolonner. Huller skubber kolonnerne fra hinanden, men regler optager ikke plads. Hvis en søjleregel er bredere end dens afstand, overlapper den tilstødende søjler. Der er fem nye egenskaber for kolonneregler og huller:

• kolonnegab
  • Definerer bredden på mellemrummene mellem kolonnerne.
• kolonne-regel-farve
  • Definerer farven på reglen.
• kolonne-regel-stil
  • Definerer typikken for reglen (solid, prikket, dobbelt osv.).
• kolonne-regel-bredde
  • Definerer bredden på reglen.
• kolonne-regel
  • En stenografisk egenskab, der definerer alle tre kolonneregleegenskaber på én gang.

CSS3 Søjlebrud, spændende søjler og udfyldning af søjler

Kolonne pauser bruger de samme CSS2-muligheder, der bruges til at definere pauser i sideindhold, men med tre nye egenskaber: pause før, break-afterog indbrud.

Som med tabeller kan du indstille elementer til at spænde kolonner med kolonne-span-egenskaben. Dette giver dig mulighed for at oprette overskrifter, der spænder over flere kolonner mere som en avis.

Udfyldning af kolonner bestemmer, hvor meget indhold der skal være i hver kolonne. Balancerede kolonner forsøger at placere den samme mængde indhold i hver kolonne, mens auto bare flyder indholdet, indtil kolonnen er fuld og derefter går til den næste.

Flere funktioner i CSS3, der ikke er inkluderet i CSS2

Der er mange ekstra funktioner i CSS3, der ikke eksisterede i CSS2, herunder:

• CSS Template Layout Module og CSS3 Grid Positioning Module: Oprettelse af net med CSS.
• CSS3 Tekstmodul: Skitserer tekst, og opret endda drop-skygger med CSS.
• CSS3 Farvemodul: Nu med opacitet.
• Ændringer i boksmodellen: Herunder en telt ejendom, der fungerer som IE-taggen.
• CSS3-brugergrænseflademodul: Giver dig nye markører, svar på handlinger, påkrævede felter og endda størrelsesændring af elementer.
• Medieforespørgsler: Medieforespørgsler giver dig mere fleksibilitet, når du definerer, hvordan et stilark skal bruges. For eksempel kan du definere et typografiark, der kun er til håndholdte enheder, der har en visningsport større end 20 em.
• CSS3 Ruby-modul: Giver support til sprog, der bruger tekstlig rubin til at kommentere dokumenter.
• CSS3 Paged Media-modul: For endnu mere support til sidemedier (papir, transparenter osv.).
• Genereret indhold: Kører sidehoveder og sidefødder, fodnoter og andet indhold, der genereres programmatisk, især til sidemedier.
• CSS3 Talemodul: Ændringer i lyd-CSS.