CSS3 versus CSS - Cascading Style Sheets of CSS is een belangrijk element van webontwerp. Als webontwikkelaar of ontwerper moet u een goed begrip hebben van CSS, met name het verschil tussen CSS3 en CSS.

Misschien heb je de term CSS3 gehoord of tegengekomen als je hebt gelezen over webontwikkeling of webontwerp. Als je ooit hebt gedacht wat het verschil zou kunnen zijn tussen CSS3 versus CSS, hier zullen al je twijfels liggen: ze zijn allebei hetzelfde.

Dat klopt: CSS3 versus CSS zijn net zo verschillend van elkaar als HTML en HTML5. CSS3 is gewoon de nieuwste versie van CSS. Mensen die nu over CSS coderen, verwijzen eigenlijk alleen maar naar CSS3.

Zowel HTML5 als CSS3 zijn over het algemeen modewoorden geworden, met betekenissen die verder gaan dan hun eigenlijke technologieën. Ze symboliseren de naleving van bepaalde kernstandaarden bij webontwikkeling in plaats van het gebruik van eigen software. Voor het grootste deel is de hype rond deze modewoorden al verdwenen. De meeste bedrijven, zelfs degenen die zweren door alles in eigen huis te houden, zouden het erover eens zijn dat het volgen van deze kernstandaarden het leven voor iedereen veel gemakkelijker maakt.

Nu is het alweer een tijdje geleden dat CSS3 door iedereen is gelanceerd en geaccepteerd. Het bracht veel geweldige dingen voor de industrie en betekende een vrij grote stap voorwaarts voor webontwikkeling in het algemeen. De vorige versie, CSS2, werd helemaal in 1998 gelanceerd. Dat is bijna 20 jaar geleden. De enige revisie die het kreeg na de lancering was in 2011, CSS2.1 genaamd. Zelfs met de herziening waren de meeste experts al begonnen te vertellen dat CSS3 onvermijdelijk is. CSS3 kwam met een aantal functies en mogelijkheden die tegen die tijd volledig noodzakelijk waren geworden.

Wat je misschien nog niet wist over CSS3, is dat het al een jaar nadat de vorige versie was ingediend, met de ontwikkeling ervan begon. Dit betekent dat de W3C sinds 1999 aan de verbeterde versie werkte. Het duurde meer dan 12 jaar om de eerste stabiele versie van CSS3 uit te brengen.

Er zijn grote verschillen tussen CSS3 en CSS (waar we binnenkort op ingaan). Maar het feit is dat webbrowsers al klaar waren voor de toevoegingen aan CSS3 tegen de tijd dat het uitkwam. Als gevolg hiervan pasten ze zich vrij snel aan de nieuwe release aan. Elke grote webbrowser ondersteunt nu CSS3, zelfs Internet Explorer!

Natuurlijk blijft de W3C CSS3 en HTML5 blijven ontwikkelen, dus een definitieve versie is onwaarschijnlijk. Om eerlijk te zijn, is een definitieve versie momenteel ook niet nodig, gezien de snelheid waarmee het internet vordert. Nu webvereisten en de industrie zelf zo snel groeit en verandert, moet codering even snel, zo niet meer, verder gaan.

CSS3 versus CSS Infographics

CSS3 versus CSS-verschillen gedefinieerd

Nu je een beetje weet over de achtergrond achter CSS3, laten we eens nader bekijken wat het is veranderd. Misschien is het grootste verschil tussen CSS3 en de vorige release die het verving de modulescheiding. In CSS2 was alles een enkele grote specificatie die verschillende functies definieerde. CSS3 heeft dit echter gewijzigd door verschillende documenten met de naam modules in te brengen. Elke module heeft zijn eigen nieuwe mogelijkheden die geen invloed hebben op de compatibiliteit van de vorige stabiele CSS-release.

Mediaquery's

Er zijn veel modules beschikbaar, maar slechts vier worden gepubliceerd als formele aanbevelingen door W3C. Deze grote vier modules zijn als volgt:

  1. Kleur, gepubliceerd 2011
  2. Selectors niveau 3, gepubliceerd 2011
  3. Namespaces, gepubliceerd 201
  4. Mediavragen, gepubliceerd 2012

Onder deze is de belangrijkste module Media-zoekopdrachten. In feite zou deze module misschien wel de belangrijkste toevoeging zijn die CSS3 in het algemeen aan CSS bracht. Mediaquery's zijn vrij eenvoudig: het maakt de toepassing van bepaalde voorwaarden op verschillende stylesheets mogelijk. Hierdoor kunnen websites vloeiend of 'reageren' op verschillende schermformaten. Met andere woorden, websites kunnen hun afmetingen en elementen aanpassen aan verschillende apparaten. Tegenwoordig is responsief webontwerp waarschijnlijk het grootste modewoord. Aangezien het grootste deel van het internetgebruik nu op mobiele apparaten wordt gebruikt, is responsief ontwerp absoluut essentieel en vragen van media helpen dit te bereiken. Met de module kunnen ontwikkelaars websites aanpassen aan verschillende resoluties zonder de inhoud te wijzigen of te verwijderen.

Mediaquery's zijn ook vrij eenvoudig te achterhalen en toe te voegen. Als je ze een paar keer gebruikt, kun je de rest vrijwel uitzoeken. Hier zijn enkele voorbeeldregels:

@media-scherm en (max-breedte: 600 px) (

achtergrond: #FFF;

)

Lijkt eenvoudig genoeg, nietwaar? Met deze paar coderegels kunt u stijlen voor schermen met een maximale breedte van 600 pixels inschakelen. Dit betekent dat alle schermen met een maximale breedte van 600 pixels een witte achtergrond hebben. De maximale breedte is slechts een van de verschillende voorwaarden die u kunt toepassen op een stylesheet op CSS3. Een andere is de maximale apparaatbreedte. Dit is de schermresolutie en niet het weergavegebied. Ook kan een minimumwaarde worden vermeld in plaats van maximum; gebruik gewoon 'min' in plaats van 'max'. Je zou de twee ook kunnen combineren, zoals hieronder:

@media-scherm en (min-width: 600px) en (max-width: 900px) (

achtergrond: #FFF;

)

Hier is de stijl alleen van toepassing op schermen met een kijkbreedte van 600-900 pixels. CSS3 wordt geleverd met een aantal vooraf gedefinieerde stylesheets voor populaire mobiele apparaten, zoals de Apple iPad en iPhone. Hier zijn er een aantal:

Het zou nu vrij duidelijk moeten zijn hoe belangrijk mediavragen zijn. Deze module is erg handig voor ontwikkelaars die een responsief webontwerp willen maken met zo min mogelijk codering.

Afgeronde randen

CSS3 komt ook met een aantal zeer belangrijke overwegingen voor webontwerp. Voor gevallen kunnen de randen worden afgerond zonder hacks met CSS3 die afgeronde randen introduceert. Dit was een enorm pluspunt voor webontwikkelaars en ontwerpers die eerder met CSS-grenzen worstelden. Het is niet verrassend dat sommige van deze functies nog steeds niet werken in oude versies van Internet Explorer. De enige extra code die u moet toevoegen aan de specifieke klasse in het stijlblad is bijvoorbeeld:

-moz-border-radius: 5 px;

-webkit-border-radius: 5px;

border: 2px solid # 897048;

Zo maakt CSS3 het leven een stuk eenvoudiger voor de webontwikkelaar en ontwerper. De release kwam ook met verlopen, die verrassend niet beschikbaar was in eerdere releases.

Aanbevolen cursussen

  • Online training over webservices in Java
  • Professionele game-ontwikkeling in C ++ training
  • Ethisch hackprogramma
  • Vegas Pro 13 trainingsbundel

Randafbeeldingen, tekstschaduwen

Andere elementen die werden toegevoegd met CSS3 maar die in vorige versies ontbraken, waren randafbeeldingen en schaduwen in vakken / tekst. CSS3 maakte dingen veel eenvoudiger, waardoor het niet langer nodig was om hacks toe te voegen voor een van de bovengenoemde veel voorkomende stylingelementen. Hier is bijvoorbeeld de eenzame coderegel die moet worden toegevoegd voor tekstschaduwen:

text-shadow: 2px 2px 2px # ddccb5;

columns

CSS3 vereenvoudigde ook het toevoegen van kolommen aan inhoud. Het enige dat u nu hoeft te doen is vier regels code toevoegen:

  1. column-count
  2. kolombreedte
  3. kolom-gap
  4. kolom-regel

Meerdere achtergronden

De nieuwste CSS-release heeft ook de mogelijkheid toegevoegd om direct meerdere achtergronden van CSS te gebruiken in plaats van rotonde-hacks zoals eerder te gebruiken. De code is ongelooflijk eenvoudig te onthouden en te schrijven en is ook super belangrijk voor het maken van moderne webontwerpelementen. Hier is een voorbeeld:

.multiplebackgrounds (

hoogte: 100 px;

breedte: 200 px;

vulling: 20 px;

achtergrond: url (top.gif) rechtsboven geen herhaling,

url (bottom.gif) herhaal links-boven,

url (middle.gif) onderste herhaling-z;

)

Voorvoegsels van leveranciers

Voorvoegsels van leveranciers werden vaak gebruikt in de tijd dat CSS3 net was uitgebracht. Ze hielpen browsers bij het interpreteren van CSS-code. Ze worden tot op de dag van vandaag gebruikt, voor het geval uw webbrowser de code niet kan lezen. Hier zijn de leveranciersvoorvoegsels voor belangrijke browsers:

  • -moz- : Firefox
  • -webkit- : Webkit-browsers zoals Apple Safari en Google Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Opera's voorvoegsel is ook overbodig geworden sinds het bedrijf zijn mobiele en desktopbrowser overschakelde naar het Webkit-platform vanuit zijn Presto-rendering-engine. Hoewel het leveranciersvoorvoegsel tot op zekere hoogte nog steeds wordt gebruikt, is het op dit moment grotendeels verdwenen.

Pseudo-klassen toegevoegd

Met de toevoeging van CSS3 hebben we ook veel extra pseudoklassen gekregen, waaronder structurele klassen voor targetingelementen op basis van hun documentpositie en relatie tot andere verschillende elementen. Hier zijn er een aantal:

  • : root richt zich op het root-element van het document
  • : not (s) target-elementen die niet overeenkomen met de selectors opgegeven in (s)
  • : first-child target het eerste kind in een container, ongeacht het type item
  • : first-of-type target het eerste gespecificeerde type element binnen een bovenliggend element
  • : nth-child (n) gebruikt numerieke waarden binnen (n) om onderliggende elementen te targeten met betrekking tot hun positie in de ouder. U kunt dit bijvoorbeeld gebruiken om afwisselende achtergrondkleuren toe te voegen aan blogreacties
  • : lege doelelementen die geen tekst of onderliggende elementen hebben, zoals lege elementen zoals
  • : alleen-kind richt zich op elementen in een documentstructuur die het enige onderliggende element binnen het bovenliggende element is

Nieuwe CSS3-selectors

CSS3 biedt een aantal manieren om CSS-regels op te schrijven via de nieuwe selectors, een nieuwe combinatie en pseudo-elementen: hier zijn de drie nieuwe attribuut selectors:

  • Voor exacte overeenkomsten, element (foo = ”bar”)
  • Voor het matchen van een element met een attribuut genaamd foo beginnend met 'bar', element (foo $ = ”bar”)
  • Voor het matchen van een element met een attribuut genaamd foo eindigend op 'bar', element (foo * = ”bar”)

CSS3 wordt geleverd met verschillende nieuwe pseudoklassen, waarvan sommige hierboven zijn besproken. Hier zijn er nog een paar:

  • : nth-last-child (n) komt overeen met de exacte onderliggende elementen van de laatste
  • : nth-of-type (n) komt overeen met elementen van broers en zussen met dezelfde naam ervoor in de documentstructuur
  • : nth-last-of-type (n) komt overeen met broer / zus-elementen met dezelfde naam vanaf de onderkant
  • : last-of-type doelen het laatst gespecificeerde type element binnen een ouder
  • : alleen-van-type doelen waarvan het element het enige type is
  • : target target elements die wordt getarget door de verwijzende URI
  • : enabled komt overeen met het element wanneer het is ingeschakeld
  • : uitgeschakeld komt overeen met het element wanneer het is uitgeschakeld
  • : aangevinkt richt het element wanneer het is aangevinkt via een selectievakje of keuzerondje

Een nieuwe combinator

CSS3 wordt ook geleverd met een gloednieuwe combinator: elementA ~ elementB

Deze nieuwe combinator komt overeen wanneer elementA ergens later wordt gevolgd door elementB, maar niet onmiddellijk daarna.

Nieuwe doosstijleigenschappen

CSS3 heeft hetzelfde boxmodel als de vorige release, maar met enkele nieuwe stijleigenschappen waarmee u randen en achtergronden van uw boxes kunt opmaken. De nieuwe achtergrondeigenschappen in CSS3 zijn:

  • background-clip

Deze eigenschap wordt gebruikt om te definiëren hoe een achtergrondafbeelding wordt geknipt. De standaardknipafmetingen zijn het randvak, maar u kunt dit wijzigen in het inhoudsvak of het opvulvak.

  • background-oorsprong

Deze specifieke eigenschap wordt gebruikt om te bepalen of de achtergrond in het randvak, inhoudvak of opvulvak moet worden geplaatst.

  • background-size

Met deze eigenschap kan de ontwikkelaar de grootte van de achtergrondafbeelding aangeven en kleinere afbeeldingen uitrekken voor het aanpassen van de pagina.

CSS3 heeft ook enkele bestaande achtergrondstijleigenschappen gewijzigd. Hier is een blik op de veranderingen:

  • achtergrond herhaling

Deze eigenschap heeft nu twee nieuwe waarden: rond en spatie. Met Round wordt de afbeelding opnieuw geschaald voor meerdere keren betegeling in een vak. Met Spatie wordt de tegelafbeelding gelijkmatig verdeeld in het vak zonder te knippen.

  • background-attachment

De eigenschap no bevat een 'lokale' waarde zodat de achtergrond met de elementinhoud schuift voor het geval het element een schuifbalk heeft.

Nieuwe randeigenschappen

Met CSS3 kunnen randen worden gestileerd als dubbel, effen, onderbroken of zelfs als een afbeelding. Randafbeeldingen zijn een interessante toevoeging: hiermee kunt u een afbeelding van alle vier randen maken en CSS vervolgens vertellen de afbeelding op de randen toe te passen. Hier zijn een paar van de nieuwe randeigenschappen die bij CSS3 worden geleverd:

  • border-radius, border-bottom-right-radius, border-top-right-radius, border-top-left-radius, border-bottom-left-radius laat je afgeronde randen maken
  • Met border-image-source kunt u een afbeeldingsbronbestand opgeven in plaats van vooraf gedefinieerde randstijlen
  • border-image-slice vertegenwoordigt binnenwaartse offset van de randen van de randafbeeldingen
  • border-image-width definieert de breedtewaarde voor uw randafbeelding
  • border-image-outset geeft de hoeveelheid aan buiten het kader dat de afbeelding uitbreidt
  • border-image-stretch definieert de tegels of schalen van de middelste en zijkanten van de randafbeelding

Conclusie - CSS3 versus CSS

Je leert veel meer over CSS3 naarmate je meer codeert. Maar er is één voorbehoud: je kunt CSS3 niet beheersen tenzij je CSS kent. CSS3 leren houdt in dat u voortbouwt op uw begrip van en ervaring met CSS. Als u CSS niet kent, moet u het samen met CSS3 van boven leren. Het goede is dat als je niet bekend bent met CSS, het gemakkelijker zou moeten zijn om beide CSS3 versus CSS samen te leren om het gemakkelijker en sneller te maken.

Aanbevolen artikelen

Hier zijn enkele artikelen die u zullen helpen om meer details over de CSS3 versus CSS te krijgen, dus ga gewoon door de link.

  1. CSS versus HTML
  2. Spannend om de CSS Flexbox Essentials voor beginners te kennen
  3. HTML5 versus JavaScript Beste ding om te leren
  4. CSS versus CSS3: Verschillen

Categorie:

Software ontwikkeling