css

Insights

Dingen die je in CSS kan doen in plaats van Javascript

🛠 Frontend development

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓


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.

🖱️ Smooth scrolling

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.

Smooth scrolling

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!

🧭 Sticky navigation

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. 👍

Sticky NavigationOok 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>

💬 Truncate text

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.

Truncate text

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;
}

🖱️ Scroll snapping

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.

Scroll SnappingVoorzie 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;
}

🎵 Accordion menus

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.

Nico

Nico

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

nextjs-13

🛠 Frontend development

Next.js 13

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

Nx Workspace

🛠 Frontend development

NX workspace: Opzetten met Angular

Nx workspace is een tool om monorepos te builden van elke grootte voor frameworks zoals Angular, React als backend technologieën zoals Next en Express. De belangrijkste doelen van NX zijn het versnellen van de workflow met minimale inspanning en een goede developer experience creeëren. Om deze doelen goed te illustreren kijken we dus best ook even wat de voordelen zijn van het werken met monorepos.