CSS voor Joomla
Kijk naar een willekeurige Joomla-site en vraag je af waardoor die eruitziet zoals hij eruitziet: de kleuren, de witruimte, de lettertypes, de manier waarop een menu op een telefoon in een knop verandert, de schaduw onder een kaartje. Niets daarvan is de inhoud, en niets daarvan is de programmalogica. Het is CSS, de taal die bepaalt hoe elk stukje HTML op het scherm verschijnt. Joomla bouwt de pagina in PHP en brengt hem tot leven met JavaScript, maar CSS zorgt ervoor dat het op een afgewerkte website lijkt in plaats van een kale muur van tekst.
Dit artikel legt CSS uit vanuit een Joomla-oogpunt. Het behandelt de basis voor site-eigenaren en redacteuren, de manier waarop Joomla stylesheets laadt en beheert voor beheerders, en de ontwikkelaarsgereedschappen (de Web Asset Manager, het Cassiopeia-template, SCSS, CSS-variabelen, moderne lay-out en template-overrides) voor wie templates en extensies bouwt.
HTML is de inhoud, JavaScript is het gedrag, en CSS is het uiterlijk.
Het doel is eenvoudig: je helpen begrijpen hoe Joomla CSS gebruikt, goed genoeg om het uiterlijk van je site te veranderen, dat te doen op een plek die updates overleeft, en je pagina's snel en toegankelijk te houden.
1. De basis
1.1 Wat is CSS?
CSS staat voor Cascading Style Sheets. Het is de taal die de browser vertelt hoe HTML eruit moet zien: welke kleur een kop heeft, hoeveel ruimte er rond een alinea zit, welk lettertype de pagina gebruikt, en hoe de lay-out verandert op een klein scherm. De HTML zegt wat de inhoud is; de CSS zegt hoe die eruit moet zien.
Een stijlregel heeft twee delen: een selector die kiest welke elementen je opmaakt, en een set declaraties die zeggen hoe. Deze regel maakt bijvoorbeeld elke hoofdkop donkerblauw:
h1 {
color: #112855;
margin-bottom: 1rem;
}De browser leest de CSS, vergelijkt elke regel met de HTML, en tekent het resultaat. Verander een regel CSS en de hele site kan er anders uitzien, zonder dat je een enkel artikel aanraakt.
1.2 Wat "cascading" betekent
Het "cascading"-deel is de regel die bepaalt wie wint als twee stijlen hetzelfde element raken. De browser combineert stijlen uit verschillende bronnen en lost conflicten daarna op met drie dingen, in deze volgorde: belang, specificiteit en bronvolgorde.
- Specificiteit: een specifiekere selector wint van een minder specifieke. Een ID (
#main) wint van een class (.box), die weer wint van een tag (div). - Bronvolgorde: als twee regels even specifiek zijn, wint degene die later wordt geladen.
- Belang:
!importantoverschrijft normale regels, en dat is precies waarom het later zoveel problemen geeft.
Dit is belangrijk in Joomla omdat jouw stijlen, de stijlen van het template, de stijlen van Bootstrap en de stijlen van een extensie allemaal op dezelfde pagina laden. Weten welke wint is de helft van alle CSS-probleemoplossing.
1.3 Cascade layers en nesting
Moderne CSS voegt twee functies toe die grote stylesheets makkelijker beheersbaar maken, en beide werken in de huidige browsers. De eerste is cascade layers (@layer), waarmee je regels in benoemde lagen groepeert en hun prioriteit bewust bepaalt, in plaats van te vechten met specificiteit. Regels in een latere laag winnen van regels in een eerdere, hoe specifiek die ook zijn:
@layer base, theme, overrides;
@layer base {
a { color: #224faa; }
}
@layer overrides {
a { color: #1b6e3c; } /* wint: 'overrides' is de laatste laag */
}De tweede is native CSS-nesting, waarmee je onderliggende regels binnen een bovenliggende schrijft, net als in SCSS maar zonder buildstap:
.card {
padding: 1rem;
& .title { font-weight: 700; }
}Je hebt geen van beide nodig om een Joomla-site op te maken, maar layers zijn een nette manier om je eigen overrides voorspelbaar te houden, en nesting laat gewone CSS bijna lezen als de SCSS waarvan Cassiopeia is gebouwd (paragraaf 7).
1.4 Waar Joomla CSS gebruikt
Je hoeft geen CSS te schrijven om er profijt van te hebben. Een verse Joomla 6-site laadt al een volledige set stylesheets:
- Het frontend-template (standaard Cassiopeia) maakt de hele publieke site op.
- Bootstrap 5 levert het grid, de knoppen, de kaartjes en andere bouwstenen.
- Font Awesome levert de iconen die je overal in de interface ziet.
- Het beheerderstemplate (Atum) maakt de hele backend op.
- Componenten en modules leveren hun eigen kleine stylesheets voor hun eigen uitvoer.
Dit alles wordt door Joomla geladen en geordend. Jouw taak, als je je eigen CSS toevoegt, is om die op de juiste plek toe te voegen zodat hij netjes bovenop de rest laadt in plaats van ertegen te vechten.
Naar boven2. Een korte geschiedenis: van LESS naar SCSS en CSS-variabelen
2.1 De overstap naar SCSS
Oudere Joomla-templates werden opgemaakt met handgeschreven CSS en, in Joomla 3, met LESS, een taal die naar CSS compileert. Vanaf Joomla 4 is het standaardtemplate, Cassiopeia, gebouwd met SCSS (ook Sass genoemd), de meest gebruikte CSS-preprocessor van dit moment. Met SCSS kunnen ontwikkelaars variabelen, nesting en herbruikbare stukken gebruiken, en daarna compileert alles tot gewone CSS die de browser begrijpt.
2.2 Native CSS-variabelen kwamen er ook
Tegelijkertijd kregen browsers hun eigen CSS custom properties (vaak gewoon CSS-variabelen genoemd), geschreven als --naam en gelezen met var(--naam). Cassiopeia gebruikt deze voor zijn kleuren, zodat je een groot deel van de site opnieuw kunt thematiseren door een paar variabelen te veranderen, helemaal zonder buildstap (paragraaf 10).
2.3 Bootstrap 5, zonder jQuery
Joomla 4, 5 en 6 leveren Bootstrap 5 als het onderliggende CSS-framework. Dat is een grote verandering ten opzichte van Joomla 3, dat Bootstrap 2 gebruikte. Bootstrap 5 liet jQuery vallen en voegde een eigen set CSS-variabelen toe, waardoor het goed past bij de moderne, framework-lichte richting van Joomla.
2.4 Waarom dit voor jou belangrijk is
Het praktische resultaat is dat je nu drie nette manieren hebt om het uiterlijk van een Joomla-site te veranderen, van makkelijk naar gevorderd: verander een CSS-variabele, voeg gewone CSS toe in het juiste bestand, of bouw de SCSS opnieuw. Je hoeft de gecompileerde CSS zelden met de hand te bewerken, en je moet die nooit in de core-bestanden bewerken, want de volgende update overschrijft je werk.
Naar boven3. Hoe de browser Joomla's CSS laadt
3.1 Stylesheets verzameld, gesorteerd en ontdubbeld
Wanneer Joomla een pagina rendert, verzamelt het elke stylesheet die het template, de componenten, de modules en de plugins hebben aangevraagd. Het verwijdert duplicaten, sorteert ze op hun opgegeven afhankelijkheden, en schrijft de <link>-tags in de <head> van de pagina. Je voegt nooit dezelfde stylesheet twee keer toe; Joomla regelt dat voor je.
3.2 De volgorde bepaalt de winnaar
Omdat bronvolgorde deel uitmaakt van de cascade (paragraaf 1.2), is de volgorde waarin Joomla de links schrijft van belang. Een algemene regel is dat het template eerst laadt en je eigen aangepaste bestand als laatste moet laden, zodat je stijlen het template kunnen overschrijven zonder dat je !important nodig hebt. Joomla's assetsysteem geeft elke stijl een gewicht zodat de juiste bestanden achteraan eindigen; het aangepaste bestand van Cassiopeia (user.css) heeft expres een hoog gewicht, zodat het na de rest laadt.
3.3 Geminificeerde en voorgecomprimeerde bestanden
Op een live site laadt Joomla de geminificeerde versie van elke stylesheet (het .min.css-bestand), die kleiner en sneller is. Veel core-bestanden leveren ook een voorgecomprimeerde .min.css.gz-versie zodat de server ze met minder werk kan afleveren. Je ziet alle drie naast elkaar in de media-map:
template.css de leesbare bron (voor debuggen)
template.min.css de geminificeerde versie (kleiner, voor productie)
template.min.css.gz voorgecomprimeerd voor snellere leveringHet punt voor jou is dat je de leesbare bron (of je eigen bestand) bewerkt, niet het geminificeerde, want dat geminificeerde bestand wordt gegenereerd en zal worden vervangen.
Naar boven4. De Web Asset Manager voor stijlen
De Web Asset Manager (WAM) is de moderne, juiste manier om zowel CSS als JavaScript toe te voegen in Joomla 4, 5 en 6. Hij verving de oude gewoonte om $document->addStyleSheet() aan te roepen met een vast pad. Dezelfde manager die scripts afhandelt, handelt stijlen af, met overeenkomende methodenamen.
4.1 Het probleem dat hij oplost
Voor WAM voegde elke extensie zijn eigen stylesheets direct toe, soms dezelfde bibliotheek twee keer, in de verkeerde volgorde, zonder gedeelde versie. WAM lost dit op door elke stylesheet te behandelen als een benoemd asset met opgegeven afhankelijkheden. Je vraagt een asset op naam; Joomla bepaalt de bestanden, de volgorde en de duplicaten.
4.2 Het assetregister en joomla.asset.json
Stijlen worden gedeclareerd in een bestand met de naam joomla.asset.json, hetzelfde bestand dat voor scripts wordt gebruikt. (Let op: dit is JSON, niet de oude naam webassets.xml die je in verouderde handleidingen kunt tegenkomen.) Joomla's core-assets staan in media/system/joomla.asset.json, en elk template of elke extensie kan een eigen bestand meeleveren. Dat van Cassiopeia staat in templates/cassiopeia/joomla.asset.json. Elke vermelding heeft een naam, een type, een bestand en zijn afhankelijkheden:
{
"name": "myextension.site",
"type": "style",
"uri": "com_myextension/site.min.css",
"dependencies": ["fontawesome"]
}Omdat de asset zijn afhankelijkheid van fontawesome declareert, laadt Joomla eerst de icoonstijlen en dan die van jou. Je beheert die volgorde nooit zelf.
4.3 Een stijl gebruiken
Vanuit PHP (in een view-template, een module of een plugin) bereik je de manager via het document en roep je useStyle() aan met de assetnaam:
use Joomla\CMS\Factory;
$wa = Factory::getApplication()
->getDocument()
->getWebAssetManager();
// Laad een geregistreerde stijl op naam:
$wa->useStyle('myextension.site');Als je een enkel bestand hebt dat een volledige vermelding in joomla.asset.json niet waard is, kun je het in een stap registreren en gebruiken:
$wa->registerAndUseStyle(
'myextension.extra',
'com_myextension/extra.css',
[],
[],
['fontawesome']
);4.4 De belangrijkste methoden
| Methode | Wat hij doet |
|---|---|
useStyle('naam') |
Een geregistreerde stylesheet inschakelen (en zijn afhankelijkheden). |
registerStyle('naam', 'uri', ...) |
Een stylesheet declareren zonder hem al in te schakelen. |
registerAndUseStyle(...) |
Een stylesheet declareren en inschakelen in een aanroep. |
addInlineStyle('css') |
Een klein blok inline-CSS toevoegen. |
disableStyle('naam') |
Een stylesheet uitschakelen die een andere extensie inschakelde. |
Dezelfde methodenamen bestaan voor scripts (useScript, registerScript, enzovoort). Dit is de API om te leren; daarmee hoef je zelden nog een kale <link>-tag aan te raken. WAM voegt ook een versie toe aan elke asset-URL, zodat browsers de nieuwe kopie ophalen in plaats van een oude uit de cache wanneer je een bestand wijzigt en de mediaversie ophoogt.
5. Cassiopeia: de CSS van het standaardtemplate
Cassiopeia is het frontend-template dat met Joomla wordt meegeleverd. Het meeste van wat een bezoeker ziet, komt uit zijn stylesheets, en het is zo gebouwd dat je veel kunt veranderen zonder ook maar een regel CSS te schrijven. De instellingen staan in de template-opties, die je in de backend bereikt.
5.1 Waar de bestanden staan
In Joomla 4 en later staat de media van een template niet in de template-map; die staat onder media/. De stylesheets van Cassiopeia staan hier:
media/templates/site/cassiopeia/css/ de gecompileerde CSS
media/templates/site/cassiopeia/scss/ de SCSS-bron
media/templates/site/cassiopeia/css/global/ kleur- en lettertype-presetsDe hoofd-stylesheet is template.css (met zijn tweelingbestand template.min.css). Het beheerderstemplate, Atum, volgt dezelfde indeling onder media/templates/administrator/atum/.
5.2 Kleur- en lettertype-presets, geen code nodig
Open Systeem → Site-templates → Cassiopeia Details en bestanden → Opties en je kunt het uiterlijk veranderen zonder CSS aan te raken:
| Optie | Wat het verandert |
|---|---|
Kleur (colorName) |
Kiest een kleur-presetbestand, zoals colors_standard of colors_alternative. |
| Lettertypeschema | Kiest de lettertypes voor tekst en koppen, inclusief lokale Roboto. |
| Logo, sitetitel, beschrijving | Het merkgedeelte boven aan de pagina. |
| Vloeiende / vaste container | Of de lay-out de volle breedte beslaat of in een vak met vaste breedte zit. |
| Plakkende header, terug-naar-boven | Veelgebruikte lay-outgedragingen, aan of uit te zetten. |
De kleur-presets zijn kleine CSS-bestanden in css/global/ die CSS-variabelen instellen. Daarom kleurt het wisselen van preset de hele site meteen opnieuw: elk component leest dezelfde variabelen.
5.3 Het user.css-bestand: jouw makkelijkste aangepaste CSS
Cassiopeia bevat een asset met de naam template.user die verwijst naar een bestand met de naam user.css. Het bestaat niet totdat je het aanmaakt, en het krijgt een hoog gewicht zodat het na alle template-stijlen laadt. Dat maakt het de eenvoudigste juiste plek om je eigen CSS toe te voegen: alles wat je erin zet, kan het template overschrijven zonder !important.
Maak dit bestand aan en Joomla laadt het automatisch:
media/templates/site/cassiopeia/css/user.cssEr is een bijbehorend user.js voor JavaScript. Houd er rekening mee dat deze bestanden onder media/ staan en dat een onzorgvuldige update ze kan overschrijven, dus voor serieus werk is een child-template (paragraaf 6) veiliger. Voor snelle aanpassingen is user.css ideaal.
6. Waar je je eigen CSS plaatst
Net als bij PHP en JavaScript is de gouden regel om nooit core-bestanden te bewerken. De gecompileerde CSS, Bootstrap en de eigen bestanden van het template worden allemaal bij een update vervangen. Joomla geeft je verschillende nette plekken om CSS toe te voegen die updates overleven; kies op basis van hoe groot en hoe blijvend de wijziging is.
6.1 De juiste plekken, van snel naar robuust
| Je wilt... | Plaats de CSS in... |
|---|---|
| Een snelle visuele aanpassing maken | user.css in de media-map van het actieve template. |
| Een echt, update-veilig thema onderhouden | Een child-template met een eigen stylesheet. |
| De uitvoer van een component of module opmaken | Een template-override, met de stijl van daaruit geladen. |
| Site-breed stijlen toevoegen vanuit code | Een plugin die de Web Asset Manager aanroept. |
| Een op zichzelf staande functie leveren | Een component of module met eigen assets. |
6.2 Child-templates: de update-veilige manier
Een child-template erft alles van een ouder (zoals Cassiopeia) en laat je alleen de delen overschrijven die je wilt. Je aangepaste CSS leeft in de child, dus een Joomla-update van de ouder raakt je werk nooit. Joomla kan een child-template voor je aanmaken vanuit de templatebeheerder, waarna je je stylesheet toevoegt en registreert in de joomla.asset.json van de child.
6.3 Een stijl laden vanuit een plugin
Een systeemplugin is een nette manier om een stylesheet aan elke pagina toe te voegen zonder het template aan te raken. Hij luistert naar een pagina-event en schakelt de asset in:
public function onBeforeCompileHead(): void
{
$wa = $this->getApplication()
->getDocument()
->getWebAssetManager();
$wa->registerAndUseStyle(
'myplugin.skin',
'plg_system_myplugin/skin.css'
);
}6.4 Vermijd inline-stijlen in inhoud
Het is verleidelijk om een kleur in te stellen met een style="..."-attribuut rechtstreeks in een artikel. Het werkt, maar het is moeilijk te onderhouden, onmogelijk te hergebruiken, en het wint van je stylesheet op specificiteit, waardoor het juist het ding wordt waartegen je later moet vechten. Houd ontwerp in je CSS-bestanden en laat artikelen alleen inhoud bevatten.
7. SCSS en CSS bouwen
De CSS die Cassiopeia meelevert, is niet hetzelfde als de code die zijn ontwikkelaars schrijven. De bron is SCSS, opgesplitst in veel kleine bestanden; de versie die naar browsers wordt gestuurd, is gecompileerd, samengevoegd en geminificeerd tot gewone CSS. Dit weten helpt je te begrijpen wat je in de media-map ziet.
7.1 Bron versus gebouwde bestanden
De SCSS van Cassiopeia staat in media/templates/site/cassiopeia/scss/, geordend in mappen zoals blocks, global, tools en vendor. Deze compileren naar de css/-map ernaast. Jij bewerkt de SCSS; de buildstap produceert de CSS. De browser ziet de SCSS nooit.
7.2 De buildgereedschappen
Het compileren van SCSS gebruikt Node.js en npm, het standaard frontend-gereedschap, met een buildscript in het Joomla-project. Je hebt dit alleen nodig als je de SCSS van het core-template wijzigt of je eigen template met een SCSS-pijplijn bouwt. Voor een normale site staat de gecompileerde CSS er al en hoef je nooit een build te draaien.
7.3 Je hebt zelden een build nodig voor aangepaste CSS
Voor je eigen wijzigingen heb je meestal helemaal geen SCSS nodig. Gewone CSS in user.css of een child-template werkt overal, en CSS-variabelen (plus native nesting uit paragraaf 1.3) geven je veel van wat mensen vroeger SCSS voor nodig hadden. Grijp pas naar een SCSS-build als je een groot, gestructureerd thema onderhoudt, niet voor een handvol overrides.
8. Bootstrap 5 en de opmaak van Joomla
Joomla levert Bootstrap 5 mee in media/vendor/bootstrap/, en Cassiopeia bouwt daarop voort. Dit betekent dat je al een compleet, getest CSS-framework op elke pagina hebt: een responsief grid, knoppen, kaartjes, meldingen, badges, witruimte-helpers en meer. Dit gebruiken is meestal beter dan je eigen versie uitvinden.
8.1 Gebruik het grid en de utilities
Het grid van Bootstrap zet kolommen neer die op kleine schermen onder elkaar stapelen, en zijn utility-classes stellen witruimte, kleur en uitlijning in zonder aangepaste CSS. Een lay-out met twee kolommen die op een telefoon een kolom wordt, heeft geen eigen CSS nodig:
<div class="row">
<div class="col-md-8">Hoofdinhoud</div>
<div class="col-md-4">Zijbalk</div>
</div>Classes zoals mt-3 (marge boven), p-2 (padding) en text-center dekken de meeste kleine aanpassingen. Een tiental hiervan leren bespaart een hoop aangepaste CSS.
8.2 Laad alleen wat je nodig hebt
Net als zijn JavaScript is de CSS van Bootstrap beschikbaar als benoemde assets, zodat je alleen het deel laadt dat je gebruikt in plaats van het hele framework als je dat niet nodig hebt. Cassiopeia haalt al binnen wat zijn lay-out nodig heeft; geef bij het toevoegen van een component de voorkeur aan de Bootstrap-classes die al op de pagina staan boven het meeleveren van een tweede framework.
8.3 Overschrijf Bootstrap met variabelen, niet met kopieën
Bootstrap 5 stelt veel CSS-variabelen beschikbaar (zoals --bs-primary). Je kunt Bootstrap-componenten opnieuw kleuren door deze variabelen in je eigen CSS in te stellen, wat veel netter is dan de regels van Bootstrap kopiëren en bewerken. Zo blijven je overrides klein en makkelijk te onderhouden bij Bootstrap-updates.
9. Moderne CSS: lay-out, selectors en functies
Het grid van Bootstrap dekt de meeste pagina-lay-outs, maar het is gebouwd op gewone CSS-functies die je rechtstreeks kunt gebruiken. Voor een sectie, een kaartje of een module is native CSS vaak eenvoudiger dan framework-classes aan de opmaak toevoegen. Alles hieronder werkt in elke huidige browser, dus je kunt het gebruiken in user.css, een child-template of een template-override.
Niet elke moderne CSS-functie wordt in alle browsers even goed ondersteund. Controleer, voordat je een nieuwere eigenschap of selector in een productieve omgeving gebruikt, de browsercompatibiliteit ervan op Can I Use (https://caniuse.com/). De site biedt actuele ondersteuningstabellen en helpt je te bepalen of je een fallback nodig hebt.
9.1 Flexbox voor een richting
Flexbox rangschikt items in een enkele rij of kolom en verdeelt de ruimte ertussen. Het is ideaal voor een navigatiebalk, een rij knoppen of iets centreren. Het eigen grid van Bootstrap gebruikt het onder de motorkap:
.toolbar {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
}De eigenschap gap voegt gelijkmatige ruimte tussen items toe zonder marges, en align-items en justify-content regelen de verticale en horizontale uitlijning.
9.2 CSS Grid voor twee richtingen
CSS Grid zet items tegelijk in rijen en kolommen neer, wat perfect is voor kaartjesgalerijen en dashboards. Met auto-fill en minmax krijg je een responsief grid dat geen media queries nodig heeft: het past zoveel kolommen als de minimumbreedte toelaat, en breekt dan af.
.cards {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}Deze ene regel verandert een lijst artikelkaartjes in een net, zelf aanpassend grid dat er goed uitziet van een telefoon tot een breed beeldscherm.
9.3 Vloeiende afmetingen met clamp() en aspect-ratio
Twee nieuwere functies nemen een hoop werk met media queries weg. clamp() stelt een afmeting in die met het scherm meeschaalt maar nooit onder een minimum of boven een maximum komt, wat uitstekend is voor koppen:
h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
}En aspect-ratio reserveert de juiste vorm voor afbeeldingen en video, zodat de pagina niet verspringt terwijl media laden (wat ook de layout-shiftscore in paragraaf 16 helpt):
.media {
aspect-ratio: 16 / 9;
}9.4 Container queries
Een media query reageert op de grootte van het hele scherm. Een container query reageert op de grootte van de eigen container van het element, en dat is precies wat je wilt voor een module die in een breed hoofdgebied of een smalle zijbalk kan staan. Dezelfde module kan zich anders indelen afhankelijk van waar hij wordt geplaatst:
.module-wrap {
container-type: inline-size;
}
@container (min-width: 400px) {
.module-wrap .item { display: flex; }
}Container queries passen goed bij Joomla, waar dezelfde module op veel posities verschijnt. Gebruik ze wanneer een component zich aan zijn plek moet aanpassen, niet alleen aan het scherm.
9.5 Moderne selectors
Drie nieuwere selectors beperken lange, breekbare regels en JavaScript dat je anders nodig zou hebben. De eerste is :has(), de "ouder"-selector: hij maakt een element op aan de hand van wat het bevat. Geef bijvoorbeeld een Joomla-artikelkaartje alleen extra ruimte als het ook echt een afbeelding heeft:
.card:has(img) {
padding-bottom: 1.5rem;
}De andere twee, :is() en :where(), groeperen meerdere selectors tot een. Ze lezen hetzelfde, maar verschillen in specificiteit: :is() neemt de specificiteit van zijn sterkste argument, terwijl :where() altijd als nul telt. Dat maakt :where() perfect voor basisstijlen met lage prioriteit die je eigen regels later zonder gevecht kunnen overschrijven:
/* Makkelijk te overschrijven: dit voegt geen specificiteit toe. */
:where(h1, h2, h3) {
margin-top: 0;
}
/* Hetzelfde doel, normale specificiteit. */
:is(article, .content) p {
line-height: 1.6;
}Naar :where() grijpen in je basisstijlen is een rustige manier om de specificiteitswedloop uit paragraaf 14.4 te vermijden.
9.6 Moderne functies: clamp() en color-mix()
Naast clamp() uit paragraaf 9.3 is color-mix() de functie die het meest de moeite waard is voor thematisering. Hij mengt twee kleuren in de browser, zodat je een hover- of randkleur rechtstreeks uit een enkele merkvariabele kunt afleiden in plaats van een tweede hex-waarde vast te leggen:
:root {
--brand: #1b6e3c;
}
.button {
background: var(--brand);
}
.button:hover {
/* 85% merk, 15% zwart: een donkerdere hover, zonder extra variabele. */
background: color-mix(in srgb, var(--brand) 85%, black);
}Dit past natuurlijk bij de CSS-variabelen in paragraaf 10: definieer een merkkleur en meng er dan lichtere en donkerdere versies uit. Één waarde om te veranderen, een heel palet dat volgt.
Naar boven10. CSS custom properties (variabelen), thematisering en donkere modus
CSS custom properties zijn de meest bruikbare moderne CSS-functie om een Joomla-site te thematiseren. Je definieert een waarde een keer en hergebruikt die overal, en verandert hem daarna op één plek om de hele site bij te werken. Cassiopeia en Bootstrap leunen er beide op, zodat je een groot deel van een site opnieuw kunt thematiseren zonder hun stylesheets te bewerken.
10.1 Hoe ze werken
Een custom property wordt gedeclareerd met een dubbel streepje en gelezen met var(). De gebruikelijke plek voor site-brede waarden is de :root-selector, die "het hele document" betekent:
:root {
--brand-color: #c0392b;
}
a {
color: var(--brand-color);
}Verander die ene waarde in :root en elke plek die var(--brand-color) gebruikt, wordt tegelijk bijgewerkt. Precies zo werken de kleur-presets van Cassiopeia: elk presetbestand stelt simpelweg een groep variabelen in.
10.2 Cassiopeia opnieuw thematiseren
Om de kleuren van Cassiopeia te veranderen zonder het template te bewerken, stel je zijn variabelen in je user.css (of child-template) in. Omdat je bestand als laatste laadt, winnen jouw waarden:
:root {
--cassiopeia-color-primary: #1b6e3c;
--cassiopeia-color-link: #1b6e3c;
--cassiopeia-color-hover: #155030;
}Dit kleurt links en accenten over de hele site opnieuw met een paar regels en zonder buildstap. Het is de netste manier om een Joomla-site bij een merk te laten passen.
10.3 Waarom variabelen beter zijn dan zoeken-en-vervangen
Voor variabelen betekende een merkkleur veranderen elke vastgelegde hex-waarde door veel bestanden heen zoeken en stuk voor stuk vervangen, hopend dat je er geen miste. Met variabelen leeft de kleur op één plek. Dat is veiliger, sneller en veel makkelijker over te dragen aan wie de site na jou onderhoudt.
10.4 Donkere modus met prefers-color-scheme
Omdat je thema uit variabelen leest, is een donkere modus toevoegen vooral een kwestie van die variabelen andere waarden geven wanneer het apparaat van de bezoeker om donker vraagt. De media query prefers-color-scheme detecteert die keuze:
:root {
--page-bg: #ffffff;
--page-text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--page-bg: #14171c;
--page-text: #e8e8e8;
}
}
body {
background: var(--page-bg);
color: var(--page-text);
}Dit is nog een reden om kleuren van begin af aan als variabelen te definieren: een donkere modus wordt dan een extra blok, geen tweede kopie van je hele stylesheet. Controleer het contrast van zowel de lichte als de donkere set (paragraaf 15).
Naar boven11. Template-overrides en CSS
Soms is het probleem niet de kleur of de witruimte maar de HTML zelf: een extensie geeft een omhulsel uit dat je met CSS niet kunt bereiken, of je wilt een class toevoegen zodat je stijlen iets hebben om op te richten. Het Joomla-antwoord is een template-override, waarmee je de HTML die een component of module produceert kunt veranderen zonder de extensie te bewerken.
11.1 Voeg een haakje toe voor je CSS
Een override is een kopie van een lay-outbestand van een extensie, geplaatst in je template, waar Joomla het in plaats van het origineel gebruikt. Een veelvoorkomende reden om er een te maken is puur voor opmaak: je voegt een class of een omhulsel toe zodat je CSS een nette, stabiele selector heeft om op te richten.
Originele lay-out:
components/com_content/tmpl/article/default.php
Jouw override (Joomla gebruikt deze in plaats daarvan):
templates/yourtemplate/html/com_content/article/default.phpIn de override kun je een class toevoegen en die daarna opmaken in je eigen CSS-bestand. Omdat je een kopie hebt gewijzigd, laat de volgende update van het component je override op zijn plek (al moet je hem na grote updates wel opnieuw controleren).
11.2 Maak op, herbouw niet
Gebruik een override alleen voor opmaak wanneer CSS alleen niet kan bereiken wat je nodig hebt. Als een kleur- of witruimtewijziging genoeg is, doe je dat in CSS; een override is meer onderhoud. De twee werken goed samen: de override geeft je CSS een net doel, en de CSS doet de eigenlijke opmaak.
Naar boven12. CSS in de backend: het Atum-template
De Joomla-beheerder heeft een eigen template, Atum, met eigen CSS onder media/templates/administrator/atum/. De meeste site-eigenaren hoeven het nooit aan te raken, maar het helpt om te weten dat het bestaat en dezelfde regels volgt als de frontend.
12.1 Hetzelfde systeem, een ander template
Atum is gebouwd met SCSS, gecompileerd naar CSS en geladen via de Web Asset Manager, precies zoals Cassiopeia. Als je een component bouwt, erven zijn backend-views de opmaak van Atum, dus gebruik de bestaande classes van Atum en Bootstrap in plaats van zware aangepaste CSS aan de beheerder toe te voegen.
12.2 Je eigen beheerdersviews opmaken
Wanneer een component een beetje aangepaste CSS in de backend nodig heeft, registreer die dan op dezelfde manier als elke andere stijl, vanuit de view van het component, met de Web Asset Manager. Houd het licht: de beheerder hoort er consistent uit te zien en zich consistent te gedragen, zodat bezoekers die ook de site beheren niet in de war raken van een view die het standaarduiterlijk negeert.
Naar boven13. CSS debuggen met de developer tools van de browser
De meeste CSS-problemen los je niet op door te gokken maar door te kijken. Elke moderne browser heeft ingebouwde developer tools die je precies laten zien welke regel wint en waarom. Open ze met F12, of klik met de rechtermuisknop op een element en kies "Inspecteren". Een paar panelen leren verandert "waarom verandert dit niet?" in een antwoord van twee minuten.
13.1 Element inspecteren en het Styles-paneel
Klik met de rechtermuisknop op iets op de pagina en kies Inspecteren. De browser markeert de HTML van het element en somt in het Styles-paneel elke regel op die het raakt, in volgorde. Regels die zijn doorgestreept, zijn overschreven door iets specifiekers of door iets dat later is geladen. Deze ene weergave beantwoordt de meeste "welke CSS geldt hier?"-vragen, en hij laat zien uit welk bestand en welke regel elke regel komt.
13.2 Berekende stijlen en het boxmodel
Het tabblad Computed toont de uiteindelijke waarde die de browser daadwerkelijk voor elke eigenschap gebruikte, nadat de hele cascade is opgelost. Ernaast toont het boxmodel-diagram de inhoud, padding, rand en marge van het element als geneste vakken. Wanneer witruimte er verkeerd uitziet, laat dit diagram meestal zien of het marge of padding is, en aan welke kant.
13.3 De Grid- en Flexbox-inspecteurs
Wanneer je CSS Grid of Flexbox gebruikt (paragraaf 9), voegen de developer tools kleine grid- en flex-badges naast het element toe. Klik op een ervan en de browser tekent de gridlijnen of flex-assen over de pagina, zodat je de sporen, gaten en uitlijning kunt zien in plaats van ze je in te beelden. Dat maakt een misdragende lay-out veel makkelijker te begrijpen.
13.4 Een snelle checklist voor probleemoplossing
- Laadt de regel überhaupt wel? Controleer het Styles-paneel; als hij ontbreekt, is het bestand niet geladen of past de selector niet.
- Is hij doorgestreept? Iets specifiekers of iets dat later in de bronvolgorde staat, wint.
- Heb je de cache geleegd? Joomla en de browser cachen beide CSS; een oud bestand is een veelvoorkomend vals alarm.
- Overschrijft een inline-
style-attribuut je? Inline-stijlen winnen van bijna alles. - Juiste element? Bevestig dat de selector het element raakt dat je denkt.
14. Prestaties: houd CSS snel
CSS is render-blokkerend: de browser tekent de pagina pas als hij de stylesheets in de <head> heeft geladen. Daardoor is CSS een van de eerste dingen om naar te kijken wanneer een site traag lijkt te verschijnen.
14.1 Laad minder CSS
- Lever geen tweede CSS-framework mee als Bootstrap al op de pagina staat.
- Verwijder stylesheets van extensies die je niet meer gebruikt; een alleen-in-naam-verwijderde extensie kan zijn CSS nog steeds laden.
- Schakel een stylesheet alleen in op de pagina's die hem nodig hebben, niet site-breed uit gewoonte.
14.2 Samenvoegen, minificeren en comprimeren
Joomla laadt geminificeerde core-bestanden al. Voor de rest kan een goede cache- of optimalisatie-extensie meerdere kleine stylesheets in een verzoek samenvoegen en ze minificeren. Op de server verkleint het inschakelen van Gzip- of Brotli-compressie de CSS verder onderweg naar de browser. Minder, kleinere, gecomprimeerde bestanden betekenen minder retourtjes en een snellere eerste weergave, vooral op HTTP/1.1-hosts.
14.3 Kritieke CSS en preload
Voor de snelste eerste weergave plaatsen geavanceerde opstellingen het kleine beetje kritieke CSS dat de bovenkant van de pagina nodig heeft inline en laden ze de rest daarna, en gebruiken ze <link rel="preload"> om een belangrijke stylesheet vroeg op te halen. Deze helpen, maar voegen complexiteit toe; grijp ernaar zodra de basis (minder laden, samenvoegen, comprimeren) klaar is en een meting nog steeds render-blokkerende CSS toont.
14.4 Vermijd de specificiteitswedloop
Elke keer dat je naar !important of een heel lange selector grijpt om een stijl af te dwingen, maak je de volgende wijziging moeilijker en de stylesheet zwaarder te doorgronden. Je CSS als laatste laden (zoals user.css en child-templates doen), of een cascade layer gebruiken (paragraaf 1.3), laat eenvoudige selectors winnen, wat het bestand klein en voorspelbaar houdt.
14.5 Meet, gok niet
Gebruik de developer tools van de browser om te zien welke stylesheets laden en hoe groot ze zijn, en een gereedschap als Lighthouse om render-blokkerende of ongebruikte CSS op te sporen. Optimaliseer wat de meting toont, niet wat je aanneemt.
Naar boven15. Toegankelijkheid en CSS
CSS bepaalt niet alleen hoe een site eruitziet maar ook hoe bruikbaar hij is voor mensen met een slecht zicht, kleurenblindheid, bewegingsgevoeligheid, of voor iedereen die een toetsenbord gebruikt. Goede CSS maakt een site makkelijker voor iedereen; slordige CSS sluit mensen stilletjes buiten. Deze controles overlappen ook met de WCAG-normen waaraan veel sites moeten voldoen.
15.1 Kleurcontrast
Tekst moet duidelijk afsteken tegen de achtergrond. WCAG vraagt om een contrastverhouding van minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst. Lichtgrijs op wit ziet er misschien elegant uit maar zakt voor veel lezers door deze test. Controleer je kleuren (de inspecteur van de browser en veel gratis gereedschappen tonen de verhouding) voordat je ze kiest, en hercontroleer zowel je lichte als je donkere variabelenset uit paragraaf 10.
15.2 Houd een zichtbare focusaanduiding
Wanneer iemand met de Tab-toets door een pagina beweegt, toont de browser een omtrek op de huidige link of knop. Een veelgemaakte en schadelijke fout is die voor het uiterlijk verwijderen:
/* Doe dit nooit: het haalt navigatiehulp voor het toetsenbord weg. */
:focus { outline: none; }Als de standaardomtrek niet bij je ontwerp past, vervang hem dan door een duidelijke eigen omtrek, verwijder hem niet:
:focus-visible {
outline: 3px solid var(--brand-color);
outline-offset: 2px;
}15.3 Respecteer beperkte beweging
Animaties en grote overgangen kunnen voor sommige mensen ongemak of misselijkheid veroorzaken. Browsers maken deze voorkeur kenbaar, en je hoort die te respecteren door beweging te temperen:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}15.4 Leesbare typografie en zoomen
Stel lettergroottes en regellengtes in voor comfortabel lezen, en gebruik relatieve eenheden (rem, em) in plaats van vaste pixels zodat de lay-out blijft werken wanneer een bezoeker inzoomt of zijn standaardlettergrootte verhoogt. Schakel zoomen nooit uit. Een site die 200% zoom overleeft zonder te breken, is zowel toegankelijker als meestal beter gebouwd.
16. SEO en metadata
CSS bevat geen inhoud die een zoekmachine leest, maar het beïnvloedt de ranking op twee echte manieren: snelheid en bruikbaarheid. Beide voeden de Core Web Vitals, de pagina-ervaringssignalen die zoekmachines gebruiken.
- Render-blokkerende CSS vertraagt de eerste weergave. Kleinere, samengevoegde, geminificeerde stylesheets helpen je Largest Contentful Paint-score.
- Layout shift schaadt de Cumulative Layout Shift-score. Reserveer ruimte voor afbeeldingen met
aspect-ratio(paragraaf 9.3) en vermijd stijlen die inhoud laten verspringen terwijl de pagina laadt. - Mobielvriendelijkheid is een rankingfactor. Gebruik een responsieve lay-out zodat de site op elk schermformaat werkt.
- Verborgen inhoud: gebruik CSS niet om tekst te verbergen die je geïndexeerd wilt hebben, en verberg nooit tekst puur voor zoekmachines, want dat kan als een truc worden gezien.
Kortom, goed georganiseerde CSS die snel laadt en op elk apparaat netjes wordt ingedeeld, helpt je SEO stilletjes; opgeblazen, render-blokkerende CSS schaadt die stilletjes.
Naar boven17. Veelgemaakte fouten en valkuilen
17.1 Core- of gecompileerde CSS bewerken
Symptoom: je opmaak verdwijnt na een Joomla- of template-update.
Oplossing: bewerk nooit de gecompileerde CSS van het template of de core-bestanden. Zet je CSS in user.css of een child-template, die updates overleven.
17.2 !important te veel gebruiken
Symptoom: stijlen werken alleen met !important, en later kun je je eigen regels niet meer overschrijven.
Oplossing: laad je CSS als laatste en gebruik eenvoudige selectors zodat de bronvolgorde wint, of orden regels met cascade layers. Houd !important voor echte, zeldzame uitzonderingen.
17.3 Met de hand tegen specificiteit vechten
Symptoom: een stijl wil niet toegepast worden terwijl hij er correct uitziet.
Oplossing: open het element in de developer tools van de browser (paragraaf 13) en lees welke regel wint en waarom. Een specifiekere selector of een inline-stijl overschrijft de jouwe meestal.
17.4 Inline-stijlen in artikelen
Symptoom: een artikel ziet er anders uit en negeert je wijzigingen in de stylesheet.
Oplossing: verwijder style="..."-attributen uit de inhoud en verplaats het ontwerp naar je CSS, waar het herbruikbaar en makkelijk bij te werken is.
17.5 Een tweede framework meeleveren
Symptoom: pagina's zijn traag en twee CSS-frameworks laden met botsende stijlen.
Oplossing: gebruik de Bootstrap 5 die al met Joomla wordt meegeleverd in plaats van een ander framework toe te voegen, en verwijder extensies die hun eigen versie meeleveren.
17.6 De focusomtrek verwijderen
Symptoom: toetsenbordgebruikers kunnen niet zien op welke link of knop ze staan.
Oplossing: stel nooit outline: none in zonder vervanging. Bied in plaats daarvan een duidelijke :focus-visible-stijl aan (paragraaf 15.2).
17.7 Vergeten de cache te legen
Symptoom: je verandert de CSS maar de site toont nog steeds het oude uiterlijk.
Oplossing: leeg de cache van Joomla en van je browser. Joomla voegt ook een versie toe aan asset-URL's, dus het ophogen van de mediaversie dwingt browsers om gewijzigde bestanden opnieuw te laden.
Naar boven18. Best practices
Als je maar een paar dingen uit dit artikel onthoudt, onthoud dan deze:
- Bewerk nooit core- of gecompileerde CSS; voeg je stijlen toe in
user.cssof een child-template. - Gebruik de Web Asset Manager (
useStyle,registerAndUseStyle) voor elke stylesheet die je vanuit code laadt. - Laad je CSS als laatste zodat eenvoudige selectors winnen op bronvolgorde, en vermijd de
!important-gewoonte; grijp naar cascade layers als volgorde alleen niet genoeg is. - Thematiseer opnieuw met CSS-variabelen (die van Cassiopeia en Bootstrap) in plaats van regels te kopiëren en bewerken, en voeg een donkere modus toe door die variabelen te wisselen.
- Gebruik het meegeleverde Bootstrap 5-grid en de utilities, en grijp naar native Flexbox, Grid en container queries voor fijnmazige lay-out.
- Grijp alleen naar SCSS voor grote thema's; gewone CSS, variabelen en native nesting dekken de meeste behoeften.
- Gebruik een template-override wanneer je een nette class nodig hebt om op te richten, niet als vervanging voor CSS.
- Houd CSS klein, samengevoegd, geminificeerd en gecomprimeerd zodat hij de eerste weergave niet blokkeert.
- Bouw voor toegankelijkheid: genoeg kleurcontrast, een zichtbare focusstijl, respect voor beperkte beweging, en relatieve eenheden die zoom overleven.
- Debug met de developer tools van de browser, leeg de cache na een wijziging, en meet de snelheid in plaats van te gokken.
- Controleer de browsercompatibiliteit voor moderne CSS-functies met behulp van Can I Use voordat je wijzigingen in de productieomgeving implementeert.
19. In het kort
WAT HET IS CSS bepaalt hoe Joomla's HTML eruitziet (kleur, ruimte, lay-out)
CASCADE belang > specificiteit > bronvolgorde bepaalt de winnaar
LAYERS @layer naam { ... } latere laag wint, los van specificiteit
STD TEMPLATE Cassiopeia (frontend), Atum (beheerder)
FRAMEWORK Bootstrap 5 meegeleverd in media/vendor/bootstrap/
TEMPLATE-CSS media/templates/site/cassiopeia/css/ (scss/ bevat de bron)
KLEURPRESET Template-opties → Kleur (colors_standard, colors_alternative)
EIGEN CSS media/templates/site/cassiopeia/css/user.css (laadt als laatste)
UPDATE-VEILIG Gebruik een child-template voor serieuze, blijvende eigen CSS
VANUIT CODE $wa = $doc->getWebAssetManager(); $wa->useStyle('naam');
REGISTER+USE $wa->registerAndUseStyle('naam', 'pad.css', [], [], ['fontawesome'])
ASSETBESTAND joomla.asset.json (name, type:style, uri, dependencies, weight)
VARIABELEN :root { --naam: waarde } gelezen met var(--naam)
HERTHEMATISEER Stel --cassiopeia-color-* of --bs-* in in user.css
DONKERE MODUS @media (prefers-color-scheme: dark) { :root { ... } }
LAY-OUT Flexbox (een as), Grid (twee assen), container queries per element
VLOEIENDE MAAT clamp(min, ideaal, max); aspect-ratio: 16 / 9
SELECTORS :has() (ouder), :is() (groepeert), :where() (nul specificiteit)
FUNCTIES color-mix(in srgb, var(--brand) 85%, black) voor tinten
OVERRIDE templates/jouwtpl/html/com_xxx/... om een class te richten
A11Y contrast 4,5:1; houd :focus-visible; respecteer beperkte beweging
DEBUG F12 / Inspecteren: Styles, Computed, boxmodel, grid + flex
GEBOUWD *.css bron, *.min.css productie, *.min.css.gz voorgecomprimeerd
PRESTATIES Samenvoegen, minificeren, comprimeren, minder laden; render-blokkerend
GEEN CORE-HACK user.css, child-template, override of plugin - nooit core20. Samenvatting
CSS is de laag van Joomla die bepaalt hoe alles eruitziet. PHP bouwt de pagina en JavaScript maakt hem interactief; CSS maakt er een ontworpen, bruikbare website van. Joomla 6 hanteert er een moderne, op standaarden gebaseerde aanpak voor:
- Een duidelijke cascade: belang, specificiteit en bronvolgorde bepalen welke stijl wint, met cascade layers en nesting als moderne hulpmiddelen, en Joomla laadt je eigen bestand als laatste zodat je zelden
!importantnodig hebt. - De Web Asset Manager: de juiste manier om stylesheets toe te voegen, met benoemde assets en opgegeven afhankelijkheden, zodat niets dubbel of in de verkeerde volgorde laadt.
- Cassiopeia en Atum: template-opties, kleur-presets en een
user.css-bestand laten je een site met weinig of geen code opnieuw opmaken, en child-templates maken die wijzigingen update-veilig. - SCSS, CSS-variabelen en moderne lay-out: een buildpijplijn voor grote thema's, native variabelen voor snelle thematisering en een donkere modus, en Flexbox, Grid en container queries voor lay-out.
- Snel en toegankelijk: voeg CSS samen, minificeer en comprimeer hem zodat pagina's snel tekenen, en respecteer contrast, focus en beweging zodat de site voor iedereen werkt.
De meeste CSS-problemen op een Joomla-site zijn geen diepe ontwerpuitdagingen. Het zijn stijlen die op de verkeerde plek zijn toegevoegd en bij een update verloren gaan, een !important-oorlog die niemand kan ontwarren, een tweede framework dat elke pagina vertraagt, of een kleur die in twintig bestanden is vastgelegd in plaats van in een variabele. Elk daarvan is snel op te lossen zodra je weet waar Joomla verwacht dat eigen CSS leeft en hoe de cascade de winnaar bepaalt.
Als je site er na een update net iets verkeerd uitziet, je tegenwerkt elke keer dat je een kleur verandert, traag laadt door zware stylesheets, of zakt voor een toegankelijkheidscontrole, dan zitten de oorzaak en de oplossing meestal in hoe de CSS is georganiseerd en geladen. Dat is precies het soort Joomla-template- en frontend-werk waarmee ik help, zodat een site er jarenlang goed uit blijft zien, snel, toegankelijk en makkelijk te onderhouden blijft.
Naar boven
Veelgestelde vragen
CSS (Cascading Style Sheets) bepaalt het uiterlijk van een Joomla-website, waaronder kleuren, lettertypen, spatiëring, lay-outs en responsief gedrag. In Joomla wordt CSS doorgaans geladen door de actieve sjabloon, maar ook extensies en aangepaste code kunnen hun eigen stijlen toevoegen. Als je begrijpt hoe Joomla CSS laadt, kun je je website aanpassen zonder dat updates hierdoor worden verstoord.
De beste plek om aangepaste CSS toe te voegen is in het aangepaste CSS-bestand van je sjabloon of via een sjabloonoverride, afhankelijk van je sjabloon. Vermijd het rechtstreeks bewerken van de CSS-bestanden van de Joomla-kern of van het sjabloon, aangezien je wijzigingen bij updates verloren gaan. Door aangepaste CSS te gebruiken, blijft je website onderhoudbaar en ben je beschermd tegen problemen bij updates.
Je kunt CSS overschrijven door specifiekere selectors te maken, een aangepast stylesheet na de oorspronkelijke CSS te laden of, indien van toepassing, sjabloonoverschrijvingen te gebruiken. Met de ontwikkelaarstools van de browser kun je eenvoudig vaststellen welke CSS-regels worden toegepast en welke selectors je moet overschrijven.
CSS werkt mogelijk niet omdat een ander stylesheet een hogere specificiteit heeft, je aangepaste stylesheet vóór de originele CSS wordt geladen, de browsercache een oude versie weergeeft, of omdat bij CSS- en JavaScript-optimalisatie bestanden worden samengevoegd of geminimaliseerd. Door de pagina te inspecteren met de ontwikkelaarstools van je browser kun je meestal de oorzaak achterhalen.
Responsieve CSS maakt gebruik van flexibele lay-outs, relatieve eenheden en mediaquery’s, zodat je Joomla-website zich aanpast aan desktops, tablets en smartphones. Moderne Joomla-sjablonen bevatten al responsieve frameworks, maar met aangepaste CSS kun je de gebruikerservaring op verschillende schermformaten nog verder optimaliseren.
Tot de beste CSS-werkwijzen voor Joomla behoren
- het gebruik van aangepaste CSS in plaats van het bewerken van core bestanden
- het eenvoudig en onderhoudbaar houden van selectors
- het tot een minimum beperken van ongebruikte CSS
- het logisch ordenen van stijlen
- het gebruik van ontwikkelaarstools van browsers voor het opsporen van fouten
- en het testen van wijzigingen op meerdere apparaten.
Als je deze werkwijzen volgt, verbetert het de prestaties van de website, vereenvoudigt het onderhoud en waarborgt de compatibiliteit met toekomstige Joomla-updates.
Voordat je moderne CSS-functies gaat gebruiken, is het verstandig om te controleren of deze worden ondersteund door de browsers die je bezoekers gebruiken. De website Can I Use biedt actuele compatibiliteitstabellen voor CSS-eigenschappen, HTML-functies en JavaScript-API’s voor Chrome, Firefox, Safari, Edge en vele andere browsers. Door de browserondersteuning te controleren, voorkom je onverwachte lay-outproblemen en kun je indien nodig geschikte fallbacks kiezen. Je kunt de browsercompatibiliteit controleren op https://caniuse.com/.
