Een vrouwelijke webdesigner aan het werk op haar computer in een modern kantoor
Afbeelding tegoed: monkeybusinessimages/iStock/Getty Images
De originele Cascading Style Sheets-specificatie, evenals de veel recentere CSS3-revisie, zijn technologieën die worden gebruikt om HTML-webpagina's te verbeteren en op te maken. CSS is oorspronkelijk ontworpen om de presentatielaag van een webpagina op een efficiëntere manier te verwerken dan: formatteren met HTML, dat nooit bedoeld was om de complexe constructie van het hedendaagse web aan te kunnen. Omdat CSS2 een universeel aanvaarde uitbreiding van CSS1 is, impliceert de term CSS zonder nummer de opname van CSS2. De CSS3-specificatie is nog in ontwikkeling vanaf juli 2014, dus webontwikkelaars moeten er rekening mee houden dat de ondersteuning van functies per browser verschilt.
CSS3 is achterwaarts compatibel met CSS
CSS3 is een update van CSS2 die compatibiliteit behoudt met alle CSS-functies -- CSS3 verwerpt geen enkele CSS-code. De CSS3-code is ontworpen om webpagina's er beter uit te laten zien en sneller te laden, en om de ontwikkelingstijd voor het bouwen van pagina's in de browser van een gebruiker te verminderen. CSS3 maakt webdesign minder afhankelijk van afbeeldingsbestanden voor pagina-ontwerpelementen en reduceert aanvragen voor bestandsoverdracht en downloadtijd door minder afbeeldingen te gebruiken. CSS1 richtte zich op de opmaak van uiterlijk, terwijl CSS2 positioneringsmogelijkheden voor tekst en objecten toevoegde. Oudere browserversies zoals IE 9 en eerder ondersteunen de toegevoegde functies van CSS3 niet op grote schaal, wat extra ontwikkelingstijd kan vergen om CSS-terugvalcode te behouden.
Video van de dag
CSS3 voegt afgeronde hoeken en verlopen toe
Voorafgaand aan CSS3 moesten webontwikkelaars afbeeldingsbestanden ontwerpen om dingen toe te voegen zoals afgeronde hoeken voor structurele randen en achtergrondafbeeldingsgradiënten; CSS3 bevat vergelijkbare functies die met een paar regels code kunnen worden toegevoegd. In CSS moet een webontwikkelaar een rand of verloop ontwerpen, deze uploaden naar de afbeeldingsserver, de afbeelding op de pagina plaatsen en CSS gebruiken om de rand correct te positioneren. In CSS3 kan de webontwikkelaar iets soortgelijks bereiken met code zoals ".roundBorder{border-radius: 10px;}". Achtergrondverlopen zijn iets gecompliceerder en vereisen verschillende code voor verschillende browsers. Een wit-naar-zwart verloop voor Chrome en IE gebruikt bijvoorbeeld code als ".gradBG{background: liner-gradient (white, black);}".
CSS3 voegt animatiefuncties en teksteffecten toe
CSS3 heeft een handvol functies die niet aanwezig zijn in CSS om het uiterlijk van uw pagina-elementen te verbeteren. Met CSS3 kunnen webontwikkelaars een tekstschaduw toevoegen aan tekst om het leesbaarder te maken of visuele flair toevoegen en kunnen ze regeleinden binnen langere woorden forceren om ze met tekstomloop in kolommen te laten passen. Vóór CSS3 moesten webontwikkelaars animatie coderen in scripttalen zoals JavaScript en jQuery; CSS3 voegt verschillende animatiefuncties toe aan de ontwerplaag. Het W3C werkt nog steeds aan een standaard voor webanimaties om compatibiliteitsproblemen tussen de verschillende animatietechnieken op te lossen.
CSS3 definieert tekstkolommen
CSS3 voegt de mogelijkheid toe om tekstsecties in meerdere kolommen te splitsen om te lezen als een krant. In de CSS2-specificatie hebben webontwikkelaars moeite om tekstsecties met meerdere kolommen te construeren, omdat de standaard niet is uitgerust om tekst automatisch te splitsen. Vooral bij sites met een responsief ontwerp, een ontwikkelingstechniek die inhoud herschikt en verkleint op basis van de schermresolutie van het apparaat bekijken, kunnen mensen met grotere monitoren moeite hebben met het lezen van tekstrijen die zich over de scherm.
