![Thomas De Vriese](/sites/default/files/styles/user_profile_thumbnail/public/2023-01/thomasdevriese-1600.jpg?h=00546c34&itok=fXypw6Jt)
Thomas De Vriese
Als front-end ontwikkelaar ben je voortdurend op zoek naar manieren om efficiënter te werken en om de gebruikservaring van de bezoeker te verbeteren. Eén van de manieren om dit te bereiken, is door gebruik te maken van CSS logical properties and values. Deze eigenschappen bieden niet alleen een meer intuïtieve manier om elementen te stijlen, ze dragen ook bij aan een betere code-opmaak en bovendien geven ze een meerwaarde aan de gebruiker.
Eén van de grootste voordelen van logische CSS-eigenschappen is dat ze zich aan passen aan verschillende schrijf- en leesrichtingen. In plaats van specifieke eigenschappen te gebruiken voor links-naar-rechts (LTR) en rechts-naar-links (RTL) talen, worden nu de logische assen automatisch aangepast. Inhoud met “tekst-align: start” zal in een LTR taal links uitgelijnd worden en met dezelfde code zal deze tekst in een RTL taal zich rechts uitlijnen.
In plaats van te vertrouwen op fysische richtingen, past de logica zich automatisch aan de context van de gebruiker. Ongeacht de taal of tekstrichting, zorgt dit voor een consistent uiterlijk en voor duidelijke, makkelijk te onderhouden code.
Traditioneel bepalen we de afmetingen van elementen op een website met fysische eigenschappen. Zo hebben ze een hoogte en een breedte of kunnen we elementen positioneren van boven naar onder en van links naar rechts. Maar ook marges, padding, border-radius en alignment worden met fysische eigenschappen bepaald. Met CSS Logical properties and values koppelen we de oriëntatie van elementen aan twee logische assen.
De as van de leesrichting is de “inline” as en daarop staat de “block” as. Iedere as heeft een “start” en een “end” punt.
Zo wordt bijvoorbeeld “width” nu “inline-size”, “height” wordt “block-size” en “padding-top” wordt “padding-block-start”.
Websites evolueren en richten zich meer en meer op een wereldwijd publiek. Met een groeiende vraag naar meertalige en internationale websites is het gebruik van 'logical properties and values' van essentieel belang. Door het aanpassen van het “dir” attribuut, zal de lay-out zich aanpassen aan de leesrichting. Extra aanpassingen na een vertaling naar een RTL-taal blijven beperkt.
<html dir=”ltr”>
<html dir=”rtl”>
Het “dir” attribuut informeert browsers dat de inhoud in LTR of in RTL-modus moet worden weergegeven. Dit attribuut werd vroeger ook gebruikt om voor elke CSS-klasse de specifieke stijling voor RTL aan te passen.
.quote {
margin-left: 1rem; /* LTR */
}
[dir="rtl"] .quote {
margin-left: 0;
margin-right 1rem; /* RTL*/
}
.quote {
margin-inline-start: 1rem;
}
/* height: 1rem; */
block-size: 1rem;
/* max-width: 1rem; */
max-inline-size: 1rem;
/* text-align: right; */
text-align: end;
/* right: 1rem; */
inset-inline-end: 1rem;
/* border-bottom-width: 1rem; */
border-block-end-width: 1rem;
/* padding-left: 1rem; */
padding-inline-start: 1rem;
/* border-top-right-radius: 1rem; */
border-start-end-radius: 1rem;
:where(.breadcrumbs, .pager):dir(ltr) svg {
scale: -1 1;
}
Het gebruik van 'logical properties and values' biedt tal van voordelen voor ontwikkelaars, variërend van flexibiliteit en onderhoudsgemak tot verbeterde internationale ondersteuning en toekomstbestendigheid. Door deze aanpak te omarmen, kun je efficiënter werken en hoogwaardige webervaringen leveren aan een wereldwijd publiek.