Den største forskel mellem CSS2 og CSS3 er, at CSS3 er opdelt i forskellige sektioner, kaldet moduler. Hver af disse moduler gør sin vej gennem W3C i forskellige faser af anbefalingsprocessen. Denne proces har gjort det meget lettere for forskellige dele af 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-oplysningerne i det, begynder du at se fordelene ved at bryde anbefalingen op i mindre, individuelle stykker. Fordi hver af modulerne arbejdes individuelt, har vi et meget bredere udvalg af browser support til CSS3 moduler.
Som med enhver ny og skiftende specifikation, skal du sørge for at teste dine CSS3 sider grundigt i så mange browsere og operativsystemer som du kan. Husk, at målet ikke er at oprette websider, der ser nøjagtigt ens ud i hver browser, men for at sikre, at alle stilarter, du bruger, herunder CSS3-stilarter, ser godt ud i de browsere, der understøtter dem, og at de falder tilbage graciøst for ældre browsere, der lade være med.
Nye CSS3 Selectors
CSS3 tilbyder en flok nye måder, du kan skrive CSS-regler med nye CSS-selektorer, samt en ny kombinerer og nogle nye pseudoelementer.
Tre nye attributtselskaber:
- Attributbegyndelsen matcher nøjagtigt
element foo ^ = "bar" Elementet har en attribut kaldet foo, der begynder med "bar" f.eks.
- Attributters slutning matcher nøjagtigt
element foo $ = "bar" Elementet har en attribut kaldet foo, der slutter med "bar" f.eks.
- Attribut indeholder kampen
element foo * = "bar" Elementet har en attribut kaldet foo, der indeholder strengen "bar" f.eks.
16 nye pseudoklasser:
- :rod
- Rødelementet i dokumentet. I HTML er det altid.
- : N'te-barn (n)
- Brug dette til at matche nøjagtige barnelementer eller brug variabler for at få alternerende kampe.
- : N'te-sidste-barn (n)
- Match præcise barnelementer, der optæller fra den sidste.
- : N'te-of-type (n)
- Match søskende elementer med samme navn før det i dokumentet træet.
- : N'te sidste-of-type (n)
- Match søskende elementer med samme navn, der optæller 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-of-typen
- Match det sidste søskendeelement af den pågældende type.
- :enebarn
- Match elementet, der er det eneste barn i sin forælder.
- : Kun-of-typen
- Match elementet, der er den eneste af sin type.
- :tom
- Match elementet der ikke har børn (inklusiv tekst noder).
- :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 (radioknap eller afkrydsningsfelt).
- : Ikke (er)
- Match når elementet ikke passer til den enkle vælger s.
En ny kombinerer:
- elementA ~ elementB
- Match når element B følger et sted efter elementA, ikke nødvendigvis straks.
Nye Egenskaber
CSS3 introducerede også en række nye CSS-egenskaber. Mange af disse egenskaber skulle skabe visuelle stilarter, der sandsynligvis ville forbinde mere med et grafikprogram som Photoshop. Nogle af disse, som grænseradius eller boxskygge, har eksisteret siden introduktionen, hvis CSS3. Andre, som flexbox eller endda CSS-net er nyere stilarter, der stadig betragtes som CSS3-tilføjelser.
I CSS3 er boxmodellen ikke ændret. Men der er en flok nye stilegenskaber, som kan hjælpe dig med at style bagkassen og grænserne på dine kasser.
Flere baggrund jeg mages
Ved hjælp af baggrundsbilledet, baggrundsstillingen og baggrundsreagent stilarter kan du angive flere baggrundsbilleder, der skal lagres oven på hinanden i boksen. Det første billede er laget nærmest brugeren, med de følgende malede bagved. Hvis der er en baggrundsfarve, er den malet under alle billedlagene.
Egenskaber for ny baggrundsstil
Der er også nogle nye baggrundsegenskaber i CSS3.
- background-clip
- Denne egenskab definerer, hvordan baggrundsbilledet skal klippes. Standardværdien er grænsekassen, men den kan ændres til polstringskassen eller indholdsboksen.
- baggrund-oprindelse
- Denne egenskab bestemmer, om baggrunden skal placeres i kassen, grænseboksen eller indholdsboksen.
- baggrund-størrelse
- Denne egenskab giver dig mulighed for at angive størrelsen af baggrundsbilledet. Det giver dig mulighed for at strække mindre billeder, så de passer til siden.
Ændringer i eksisterende Egenskaber for baggrundsstil
Der er også få ændringer i eksisterende baggrundsstil egenskaber:
- background-repeat
- Der er to nye værdier for denne ejendom: plads og runde. Rummet rummer det flisebelagte billede jævnt inden i kassen uden at blive klippet. Runde rescales baggrundsbilledet, så det vil flise et antal gange i boksen.
- background-attachment
- En ny værdi "lokal" tilføjes, så baggrunden vil rulle med elementets indhold, når elementet har en rullefelt.
- baggrund
- Baggrundshorthandegenskaben tilføjer i størrelse og oprindelse egenskaber.
CSS3 Border Properties
I CSS3 kan grænser være de stilarter, vi er vant til (solid, dobbelt, stiplede osv.), Eller de kan være et billede. Plus, CSS3 bringer i evnen til at skabe afrundede hjørner.Borderbilleder 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.
Egenskaber for nye grænsestile
Der er nogle nye grænseegenskaber i CSS3:
- border-radius
- border-top-højre-radius, border-bottom-højre-radius, border-nederste venstre-radius, border-top-venstre-radius
- Disse egenskaber giver dig mulighed for at skabe afrundede hjørner på dine grænser.
- border-image-source
- Angiver den billedkildefil, der skal bruges i stedet for grænsestiler, der allerede er defineret.
- border-image-skive
- Representerer de indadvendte forskydninger fra kantbilledkanterne
- border-image-bredde
- Definerer værdien af bredden for dit grænsebillede.
- border-image-starten
- Angiver det beløb, som grænsebilledeområdet strækker sig ud over grænsekassen.
- border-image-strækning
- Definerer, hvordan sider og midterdele af grænsebilledet skal flises eller skaleres.
- border-billede
- Shorthand-ejendommen for alle billedegenskaberne.
Yderligere CSS3 Egenskaber relateret til grænser og baggrunde
Når en kasse er brudt ved en sideskift, sætter søjlepause for linjeskift (for inline-elementer) definitionen af box-decoration-break, hvordan de nye kasser er pakket med kant og polstring. Baggrunde kan opdeles mellem flere brudte kasser ved hjælp af denne egenskab.
Der er også en boks-skyggeegenskab, som kan bruges til at tilføje skygger til bokseelementer.
Med CSS3 kan du nu nemt oprette en webside med flere kolonner uden tabeller eller komplicerede div tag strukturer. Du fortæller blot browseren, hvor mange kolonner kroppsdelen skal have, og hvor bred de skal være. Plus du kan tilføje grænser (regler), baggrundsfarver, der spænder over højden af kolonnen, og din tekst vil automatisk strømme gennem alle kolonnerne.
CSS3-kolonner - Definer kolonneantalet og bredden
Der er tre nye egenskaber, der giver dig mulighed for at definere antallet og bredden af dine kolonner:
- kolonne bredde
- Definerer den bredde, dine kolonner skal være. Browseren vil derefter flyde teksten for at fylde rummet med de store kolonner.
- kolonne-count
- Definerer antallet af kolonner på siden. Browseren vil derefter oprette kolonner bredt nok til at passe ind i rummet, men kun det nummer, du angiver.
- kolonner
- Shorthand ejendom, hvor du kan definere enten bredden eller nummeret (eller begge, men det giver sjældent mening).
CSS3 kolonne huller og regler
Gab og regler er placeret mellem kolonner i samme multicolumn scenario. Huller vil skubbe søjlerne ud, men regler tager ikke plads. Hvis en kolonneregel er bredere end den er mellemrum, overlapper den tilstødende kolonner. der er fem nye egenskaber for kolonne regler og huller:
- kolonne-kløften
- Definerer bredden af hullerne mellem kolonnerne.
- kolonne-regel-farve
- Definerer regelens farve.
- kolonne-regel-stil
- Definerer statens stil (fast, prikket, dobbelt osv.).
- kolonne-regel-bredde
- Definerer bredden af reglen.
- kolonne-reglen
- En stenografiegenskab definerer alle tre kolonneregulationsegenskaber på én gang.
CSS3 kolonne pauser, spænding kolonner og fylde kolonner
Kolonne pauser bruger de samme CSS2 indstillinger, der bruges til at definere pauser i pageret indhold, men med tre nye egenskaber: break-før, break-efter, og break-inde.
Ligesom med tabeller kan du indstille elementer til at spænde over kolonner med kolonneoverskridelsesegenskaben. Dette giver dig mulighed for at oprette overskrifter, der spænder over flere kolonner mere som en avis.
Fyldning af kolonner bestemmer, hvor meget indhold der vil være i hver kolonne. Balancerede kolonner forsøger at lægge samme mængde indhold i hver kolonne, mens auto bare flyder indholdet ind, 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-skabelonlayoutmodul og CSS3-netopstillingsmodul: Oprettelse af net med CSS.
- CSS3-tekstmodul: Skitse tekst og endda oprette drop-skygger med CSS.
- CSS3 farve modul: Nu med uigennemsigtighed.
- Ændringer i boxmodellen: Inkluderer en markeringsegenskab, der virker som IE-mærket.
- CSS3 brugergrænseflade modul: Giver dig nye markører, svar på handlinger, obligatoriske felter og endda størrelseselementer.
- Medieforespørgsler: Medieforespørgsler giver dig større fleksibilitet, når du definerer, hvordan et stilark skal bruges. Du kan f.eks. Definere et stilark, der kun er til håndholdte enheder, der har en visningsport større end 20em.
- CSS3 Ruby modul: Giver støtte til sprog, der bruger tekst rubin til at annotere dokumenter.
- CSS3 Paged Media-modul: For endnu mere support til paged media (papir, transparenter osv.).
- Genereret indhold: L løbende overskrifter og footers, fodnoter og andet indhold, der genereres programmatisk, især for paged media.
- CSS3 Talemodul: Ændringer i aural CSS.
