Het grootste verschil tussen CSS2 en CSS3 is dat CSS3 is opgesplitst in verschillende secties, modules genaamd. Elk van deze modules vindt zijn weg door het W3C in verschillende stadia van het aanbevelingsproces. Dit proces heeft het voor verschillende stukken CSS3 veel gemakkelijker gemaakt om door verschillende fabrikanten in de browser te worden geaccepteerd en geïmplementeerd.
Als je dit proces vergelijkt met wat er gebeurde met CSS2, waar alles werd ingediend als een enkel document met alle informatie in Cascading Style Sheets erin, begon je de voordelen te zien van het verbreken van de aanbeveling in kleinere, individuele stukken. Omdat aan elk van de modules afzonderlijk wordt gewerkt, hebben we een veel breder scala aan browserondersteuning voor CSS3-modules.
Zoals met elke nieuwe en veranderende specificatie, moet je je CSS3-pagina's grondig testen in zoveel browsers en besturingssystemen als je kunt. Vergeet niet dat het doel niet is om webpagina's te maken die er in elke browser hetzelfde uitzien, maar om ervoor te zorgen dat alle stijlen die u gebruikt, inclusief CSS3-stijlen, er geweldig uitzien in de browsers die ze ondersteunen en dat ze netjes terugvallen voor oudere browsers die Niet doen.
Nieuwe CSS3-kiezers
CSS3 biedt een hele reeks nieuwe manieren om CSS-regels te schrijven met nieuwe CSS-selectors, evenals een nieuwe combinator en enkele nieuwe pseudo-elementen.
Drie nieuwe attribuutselectoren:
- Beginbegin komt precies overeen
element foo ^ = "bar" Het element heeft een kenmerk genaamd foo dat begint met een "balk", bijvoorbeeld
- Attribuut eindigende matches exact
element foo $ = "bar" Het element heeft een kenmerk genaamd foo dat eindigt op "balk", bijv.
- Kenmerk bevat de overeenkomst
element foo * = "bar" Het element heeft een kenmerk genaamd foo dat de tekenreeks "balk" bevat, b.v.
16 nieuwe pseudo-klassen:
- :wortel
- Het wortelelement van het document. In HTML is dit altijd.
- : N-kind (n)
- Gebruik dit om exacte onderliggende elementen te matchen of gebruik variabelen om afwisselende overeenkomsten te krijgen.
- : N-last-kind (n)
- Overeenkomen met exacte onderliggende elementen vanaf de laatste.
- : N-of-type (n)
- Pas sibling-elementen met dezelfde naam vóór elkaar aan in de documentenboom.
- : N-laatste-of-type (n)
- Pas sibling-elementen met dezelfde naam toe vanaf de onderkant.
- :laatste kind
- Pas het laatste onderliggende element van het bovenliggende element aan.
- : Eerste-van-type
- Overeenkomen met het eerste broer / zus-element van dat type.
- : Last-of-type
- Overeenkomen met het laatste broer / zus-element van dat type.
- :enig kind
- Overeenkomen met het element dat het enige kind is van het bovenliggende element.
- : Enkel-of-type
- Overeenkomen met het element dat de enige in zijn soort is.
- :leeg
- Overeenkomen met het element dat geen kinderen heeft (inclusief tekstknooppunten).
- :doelwit
- Zoek een element bij elkaar dat het doelwit is van de verwijzende URI.
- :ingeschakeld
- Overeenkomen met het element wanneer het is ingeschakeld.
- : disabled
- Overeenkomen met het element wanneer het is uitgeschakeld.
- : aangevinkt
- Overeenkomen met het element wanneer het is aangevinkt (keuzerondje of selectievakje).
- : Niet (s)
- Overeenkomen wanneer het element niet overeenkomt met de eenvoudige selector s.
Eén nieuwe combinator:
- elementA ~ elementB
- Overeenkomen wanneer elementB ergens na element A volgt, niet noodzakelijk onmiddellijk.
Nieuwe eigenschappen
CSS3 heeft ook een aantal nieuwe CSS-eigenschappen geïntroduceerd. Veel van deze eigenschappen moesten visuele stijlen creëren die waarschijnlijk meer zouden associëren met een grafisch programma zoals Photoshop. Sommige hiervan, zoals grensradius of doosschaduw, bestaan al sinds de introductie als CSS3. Anderen, zoals flexbox of zelfs CSS Grid, zijn nieuwere stijlen die nog vaak als CSS3-toevoegingen worden beschouwd.
In CSS3 is het boxmodel niet veranderd. Maar er zijn een heleboel nieuwe stijleigenschappen die u kunnen helpen bij het vormgeven van de achtergronden en randen van uw vakken.
Meerdere achtergronden I mages
Met de achtergrondafbeeldings-, achtergrondpositie- en achtergrondherhalingsstijlen kunt u meerdere achtergrondafbeeldingen opgeven om in het vak boven elkaar te worden geplaatst. De eerste afbeelding is de laag die zich het dichtst bij de gebruiker bevindt, met de volgende erop geschilderd. Als er een achtergrondkleur is, wordt deze onder alle afbeeldingslagen geschilderd.
Nieuwe achtergrondstijleigenschappen
Er zijn ook enkele nieuwe achtergrond-eigenschappen in CSS3.
- background-clip
- Deze eigenschap bepaalt hoe de achtergrondafbeelding moet worden bijgesneden. De standaardinstelling is het randvak, maar dit kan worden gewijzigd in het opvullingvakje of het inhoudvak.
- background-oorsprong
- Deze eigenschap bepaalt of de achtergrond moet worden geplaatst in het opvulvak, het randvak of het inhoudsvak.
- background-size
- Met deze eigenschap kunt u de grootte van de achtergrondafbeelding aangeven. Hiermee kunt u kleinere afbeeldingen rekken om op de pagina te passen.
Wijzigingen in bestaande achtergrondstijleigenschappen
Er zijn ook een paar wijzigingen in bestaande achtergrondstijlen:
- achtergrond herhaling
- Er zijn twee nieuwe waarden voor deze eigenschap: spatie en rond. Spatiëert het betegelde beeld gelijkmatig in de doos zonder te worden afgekapt. Met Ronde wordt de achtergrondafbeelding opnieuw geschaald zodat deze een heel aantal keren in de doos wordt weergegeven.
- background-attachment
- Er is een nieuwe waarde "lokaal" toegevoegd, zodat de achtergrond met de inhoud van het element schuift wanneer dat element een schuifbalk heeft.
- achtergrond
- De eigenschap voor de korte afkorting voegt de eigenschappen afmeting en oorsprong toe.
CSS3 Border-eigenschappen
CSS3-grenzen kunnen de stijlen zijn die we gewend zijn (solid, double, dashed, etc.) of ze kunnen een afbeelding zijn. Bovendien biedt CSS3 de mogelijkheid om afgeronde hoeken te maken.Randafbeeldingen zijn interessant omdat u een afbeelding van alle vier randen maakt en vervolgens de CSS vertelt hoe u die afbeelding op uw randen toepast.
Nieuwe Border Style-eigenschappen
Er zijn enkele nieuwe border-eigenschappen in CSS3:
- border-radius
- border-top-right-radius, border-bottom-rechts-radius, border-bottom-left-radius, border-top-left-radius
- Met deze eigenschappen kunt u afgeronde hoeken aan uw randen maken.
- border-image-source
- Specificeert het afbeeldingsbronbestand dat moet worden gebruikt in plaats van reeds gedefinieerde randstijlen.
- border-image-slice
- Vertegenwoordigt de binnenwaartse verschuivingen van de randen van de randen van de randen
- border-image-width
- Bepaalt de waarde van de breedte voor uw randafbeelding.
- border-image-begin
- Geeft de hoeveelheid aan dat het randafbeeldingsgebied buiten het randvak valt.
- border-image-stretch
- Bepaalt hoe de zijkanten en het middelste gedeelte van de randafbeelding moeten worden betegeld of geschaald.
- border-image
- De verkorte eigenschap voor alle eigenschappen van de afbeelding aan de rand.
Aanvullende CSS3-eigenschappen met betrekking tot grenzen en achtergronden
Wanneer een vakje bij een pagina-einde wordt onderbroken, kolomeinde voor regelafbreking (voor inline-elementen), bepaalt de eigenschap box-decoration-break hoe de nieuwe vakken zijn omwikkeld met rand en opvulling. Achtergronden kunnen met behulp van deze eigenschap worden verdeeld tussen meerdere gebroken kaders.
Er is ook een eigenschap voor vakschaduw die kan worden gebruikt om schaduwen aan kaderelementen toe te voegen.
Met CSS3 kunt u nu gemakkelijk een webpagina instellen met meerdere kolommen zonder tabellen of gecompliceerde div-tagstructuren. U vertelt de browser eenvoudig hoeveel kolommen het body-element zou moeten hebben en hoe breed ze zouden moeten zijn. Bovendien kunt u randen (regels) en achtergrondkleuren toevoegen die de hoogte van de kolom omspannen, en uw tekst automatisch door alle kolommen.
CSS3-kolommen - Definieer het aantal en de breedte van de kolommen
Er zijn drie nieuwe eigenschappen waarmee u het aantal en de breedte van uw kolommen kunt definiëren:
- kolombreedte
- Bepaalt de breedte die uw kolommen zouden moeten zijn. De browser zal dan de tekst laten vloeien om de ruimte met kolommen die breed zijn te vullen.
- column-count
- Definieert het aantal kolommen op de pagina. De browser maakt dan kolommen die breed genoeg zijn om in de spatie te passen, maar alleen het nummer dat u opgeeft.
- kolommen
- Shorthand-eigenschap waarbij u de breedte of het aantal (of beide, maar dat is zelden logisch) kunt definiëren.
CSS3 Kolomlacunes en regels
Hiaten en regels worden geplaatst tussen kolommen in hetzelfde scenario met meerdere kolommen. Hiaten zullen de kolommen uit elkaar duwen, maar regels nemen geen ruimte in beslag. Als een kolomregel breder is dan de opening, overlapt deze aangrenzende kolommen. er zijn vijf nieuwe eigenschappen voor kolomregels en hiaten:
- kolom-gap
- Bepaalt de breedte van de openingen tussen de kolommen.
- kolom-rule-color
- Bepaalt de kleur van de regel.
- kolom-rule-stijl
- Definieert de stijl van de regel (effen, gestippeld, dubbel, etc.).
- kolom-rule-width
- Bepaalt de breedte van de regel.
- kolom-regel
- Een verkorte eigenschap die alle drie eigenschappen van kolomregels tegelijk definieert.
CSS3 Kolomonderbrekingen, Spanningskolommen en Vulkolommen
Kolomeinden gebruiken dezelfde CSS2-opties die worden gebruikt om onderverdelingen in gepagineerde inhoud te definiëren, maar met drie nieuwe eigenschappen: break-before, break-after, en break-inside.
Net als bij tabellen kunt u elementen instellen om kolommen te spreiden met de eigenschap kolom-span. Hiermee kunt u koppen maken die meerdere kolommen omvatten, meer als een krant.
Vulkolommen bepaalt hoeveel inhoud in elke kolom zal staan. Evenwichtige kolommen proberen dezelfde hoeveelheid inhoud in elke kolom te plaatsen, terwijl de inhoud van de kolom automatisch wordt ingevoerd totdat de kolom vol is en vervolgens naar de volgende kolom gaat.
Meer functies in CSS3 die niet zijn opgenomen in CSS2
Er zijn veel extra functies in CSS3 die niet bestonden in CSS2, waaronder:
- CSS Template layout-module en CSS3 grid positioneringsmodule: Rasters maken met CSS.
- CSS3-tekstmodule: Maak een overzicht van tekst en maak zelfs slagschaduwen met CSS.
- CSS3 Kleurmodule: Nu met dekking.
- Wijzigingen aan het doosmodel: Inclusief een selectiekadereigenschap die werkt als de IE-tag.
- CSS3 Gebruikersinterfacemodule: Geeft je nieuwe cursors, reacties op acties, verplichte velden en zelfs resizing-elementen.
- Media Queries: Mediaquery's bieden u meer flexibiliteit bij het definiëren van hoe een stylesheet moet worden gebruikt. U kunt bijvoorbeeld een stijlpagina definiëren die alleen voor handheld-apparaten is die een kijkvenster groter dan 20em hebben.
- CSS3 Ruby-module: Biedt ondersteuning voor talen die tekstuele robijn gebruiken om documenten te annoteren.
- CSS3 Paged Media-module: Voor nog meer ondersteuning voor opgeroepen media (papier, transparanten, enz.).
- Gegenereerde inhoud: L met kop- en voetteksten, voetnoten en andere inhoud die programmatisch wordt gegenereerd, met name voor opgeroepen media.
- CSS3 Speech-module: Wijzigingen in auditieve CSS.
