Dingen die je in CSS kan doen in plaats van Javascript

CSS parses & rendert niet alleen sneller dan Javascript maar vaak zijn de oplossingen in CSS ook sneller geschreven en handiger. Daarboven zal een JS error vaker een grote error in jouw gezicht gooien (geweldige UI/UX trouwens) maar als er bij CSS een property niet herkend wordt dan slaat hij deze simpelweg over en gaat die door naar de volgende lijn.Tot de dag van vandaag kom ik meermaals implementaties op ‘professionele’ sites tegen waarin voorrang gegeven werd aan Javascript terwijl er beter voor CSS gegaan was. Hoe deze keuzes zich soms nog voordoen ben ik niet zeker, vele hebben mogelijks al een outdated site maar bij sommige nieuwere sites vermoed ik soms dat old habits die hard.

Een simpel voorbeeld om automatisch naar een sectie op jouw site in een vlotte scrollende beweging te gaan is doormiddel van scroll-behavior. Wil je jouw gebruiker met één klik op een knop langzaam maar versnellend begeleiden naar de volgende sectie op jouw webpagina dan is deze CSS feature ideaal voor jou. Een tijd terug werd window.scrollY hiervoor echter gebruikt of zelfs JQuery en tot vandaag blijft men soms deze vuile gewoonte behouden. 🤯 Men begint met het instellen van de scroll-behavior op smooth.

html {
  scroll-behavior: smooth;
}

Vervolgens kan je een knop toevoegen dat gemaakt is van een a tag met de noodzakelijk href dat linkt naar een bepaalde sectie in jouw pagina doormiddel van een id toe te voegen.

<a href="#bottom">
  Click to scroll 👇
</a>
<section id="bottom"></section>

En op een magische wijze is jouw pagina nu nog een stuk makkelijker om te navigeren!

Daarnaast heb ik al implementaties tegengekomen waarbij je een gewone pagina hebt met aan de rechterkant een sidebar, zo één van die navigatie blokken dat jou doorheen de pagina meevolgt tot op het einde en daar vervolgens tot stilstand komt. Volledig geschreven in Javascript en volgt jou in een schokkende animatie naar het einde van de pagina, wat een geweldige user experience. 👍

Ook hiervoor bestaat een veel simpelere oplossing genaamd position sticky! Een simpel voorbeeld kan een sidebar zijn met position sticky en vanaf nu zal deze prachtige sidebar jou volgen tot zijn toebehorende content. 🧲

.sidebar {
  position: sticky;
  top: 0;
}

<div class="main">
  <h2>Main content</h2>
  <p>Scroll down the page!</p>
</div>

<div class="sidebar">
  <h3>Sticky sidebar</h3>
  <p>I will follow you!</p>
</div>

Ook voor teksten kunnen we kleine maar sterke veranderingen brengen zoals het limiteren van tekst in een beperkte ruimte. Zo kan je vermijden dat jouw teksten buiten jouw paragraaf gaan of een bepaald aantal lijnen niet te overschrijden. In plaats van substring te gebruiken in Javascript heb je een veel beter alternatief in CSS genaamd text-overflow en line-clamp.

Om jouw titel niet verder te laten gaan dan het einde van zijn lijn (of zelfs buiten je artikel) heb je text-overflow.

<article>
  <h1>This is a way too long title for a teaser of an article</h1>
</article>

h1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Vanaf nu zal jou titel binnen de grenzen van de parent tag blijven en in een te kleine ruimte zal jouw hoofdtitel automatisch afgesneden worden en op het einde verwisseld worden met drie puntjes. Om dit nog een stap verder te nemen en jouw perfect design mooi gelijk te houden over al jouw teaser artikels kan je het aantal lijnen ook limiteren dankzij line-clamp. Voeg een descriptie toe aan jouw teaser article met vervolgens een line-clamp van 3 lijnen met een verticale oriëntatie.

<article>
  <h1>This is a way too long title for a teaser of an article</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
    mollitia, molestiae quas vel sint commodi repudiandae consequuntur
    voluptatum laborum numquam
  </p>
</article>

h1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Nog een handige feature waarmee je een simpele lichte foto gallerij of swiper kan nabouwen. Of zoals bij fancy website waarbij je scrollt doorheen de website en ze een volledige sectie van de pagina locken op een bepaald onderwerp hier komt scroll-snap.

Voorzie jouw volledig site met een snap type mandotory in x of y richting en de child met een snap align en voila.

<main class="parent">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
</main>

.parent {
  scroll-snap-type: x mandatory;
}
.child {
  scroll-snap-align: start;
}

In plaats van jouw FAQ antwoorden onzichtbaar te maken doormiddel van Javascript kan je ook de tags details en summary gebruiken om ditmaal in html enkel een accordion menu te maken. Inderdaad dat heb je goed gehoord! 🤯 Maak een detail tag aan in jouw code met daarbinnen een tag summary dat jouw vraag of titel mag bevatten dat ten alle tijde zichtbaar moet zijn. Alle andere tags of woorden zullen automatisch onzichtbaar gemaakt worden zonder één lijn javascript of CSS te schrijven!

<details>
  <summary>Only the summary will show?</summary>
  <hr />
  <p>
    Yes only the summary, everything beneath will be shown once the
    summary has been clicked on.
  </p>
</details>

Dit waren natuurlijk enkele simpele voorbeelden om jullie breinen werkende te krijgen. Maar op codepen zijn mensen hier nog een stap verder gegaan dat ik hieronder zal linken. Desondanks dat niet allemaal met even propere code geschreven werden is er toch wel een wow moment voor wat er allemaal mogelijk is met css enkel.