Stop Using JS for That

Developer Kilian Valkhof bouwt al bijna 20 jaar websites. Hij heeft onder andere gewerkt aan Electron, een tool om desktop apps te bouwen met code van het web, maar maakt momenteel de Polypane browser, een browser speciaal voor web developers. In deze eerste weekly nerd vertelde hij over hoe er steeds meer kan met HTML en CSS zonder gebruik te maken van JavaScript.

The Rule of Least Power

Kilian begon met 'the Rule of Least Power', ofwel: kies de programmeertaal die net genoeg kan voor wat je wilt. Kan het niet met HTML, voeg dan CSS toe. Kan dat ook niet, gebruik dan pas JavaScript. JavaScript is het breekbaarst, kost veel tijd en maakt grote bestanden. Bovendien moet het web bruikbaar zijn met alleen HTML.

Alles wat je nu met JavaScript bouwt en nu werkt, blijft altijd werken (backwards compatibility). Zo werkt ook de eerste website nog op een moderne browser. Maar er komen wel betere manieren om hetzelfde te doen. Iets wat nu kan met JavaScript, kan in de toekomst misschien wel met CSS. Blijf dus altijd leren en kijk of er ondertussen een betere manier is, concludeert Kilian.

Die volgorde van HTML, naar CSS, naar JavaScript spreekt voor mij voor zich. Zo wordt een website ook progressive enhanced. Maar naar mijn idee vergeet Kilian een belangrijk punt. Al die moderne functionaliteiten worden niet ondersteund door oudere browserversies. Zoiets als forwards compatibility bestaat gewoon niet. Als je naar browser versie gebruik tabel van caniuse kijkt valt op dat niet iedereen de nieuwste versie gebruikt. Ik wil dus toevoegen dat je ook eerst goed moet kijken of de nieuwe functionaliteit ook goed wordt ondersteund door verschillende browsers.

Voorbeelden van hoe het beter kan

Kilian heeft een aantal voorbeelden van betere manieren laten zien. Van de voorbeelden die ik interessant vind, heb ik een lijstje gemaakt:

• Custom toggles

  Een veelvoorkomend element is een schakelaar in plaats van een checkbox. Input elementen zijn van zichzelf helaas niet goed te stylen. Die elementen worden namelijk door de browser geleverd en kunnen dus ook per browser verschillen.

  <label>
      <input type="checkbox" />
  </label>

  In CSS is het mogelijk om het standaard uiterlijk niet toe te voegen. Zo wordt het mogelijk om het element wel te stylen en kan een checkbox als een schakelaar worden weergegeven.

  input[type="checkbox"] {
      appearance: none;
  }

  De appearance: none; zorgt dat niet de standaard van het operating system wordt geladen. Hierdoor zijn opeens ook de :before en :after pseudo-class beschikbaar.

  Daarnaast is Safari gestart met een nieuw HTML-attribuut om een switch te maken. Dit is nog niet de standaard.

  <input type="checkbox" switch />

• Datalist

  Met een datalist kun je opties geven voor een input. Meer kan het op dit moment niet. De lijst is bijvoorbeeld nog niet te stylen. In de toekomst komt dit misschien wel.

• Carrousel

  • Scroll snap kun je gebruiken om een element aan zijn parent te laten snappen.
  • Op de parent zet je scroll-snap-type met de richting x of y, en de optie mandatory (altijd) of proximity (als het dicht bij de rand komt).
  • Op het element zelf gebruik je scroll-snap-align, voor de positie waar je het wil laten snappen.
  • Codepen

• Accordion

  Gebruik

  Accordions zijn handig voor het opsplitsen van content. In HTML kan dit met de <details> en <summary> elementen.

  Stijlen

  Met summary::marker kan je het pijltje stijlen. Van zichzelf is het niet duidelijk of het element klikbaar is, dus voeg hier zelf iets voor toe.

  Eén of meerdere open

  Details met dezelfde naam kan er maar één tegelijk van open zijn. Maar de vraag is of dit wel de juiste manier is. Zo is het onmogelijk om te vergelijken.

• Dialog

  Waar je voorheen een modal kon maken met prompt of confirm in JavaScript is het nu mogelijk met het nu mogelijk met het <dialog> element in HTML. Het voordeel is dat die niet de JavaScript stopt en zelf te stylen is met CSS. Hierbij is ook de nieuwe form method 'dialog', die sluit vanzelf de dialog.

  Er is wel Javascript nodig om de modal te openen, namelijk met showModal(), en om de teruggegeven waarde te krijgen, met dialog.returnValue.

  ::backdrop is in de CSS te gebruiken om de achtergrond die over de pagina komt te stylen.

Kilian sloot af met een aantal functionaliteiten die in de nabije toekomst naar browsers komen. Kijk dus vooral wanneer deze beschikbaar zijn.