Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 2 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. De site die bij het boek hoort vind je HIER. (H.F.)

In deel 1 van deze serie is het raamwerk van de HSL-kleurkiezer gebouwd. Dit deel gaat over het maken van de regelaars voor de componenten van een HSL-kleur. Dat blijkt nog een mooie uitdaging.

De kleurwaarden

Eerst moeten we bedenken hoe we alle kleuren kunnen weergeven. Een HSL-kleur bestaat uit drie componenten: hue (tint), saturation (verzadiging) en lightness (helderheid). HSL is gebaseerd op de RGB-kleuren. Het model ziet eruit als een dubbele kegel, met de kleuren in een cirkel en zwart en wit op de toppen. Rood staat op 0/360 graden, groen op 120 en blauw op 240 graden. In CSS wordt bijvoorbeeld de volle kleur groen weergegeven als hsl(120, 100%, 50%). Hierbij is 120 de tint, 100% de verzadiging en 50% de helderheid. Met de hoofdkleuren van RGB maken we een kleurverloop waarin alle tinten voorkomen. CSS heeft daarvoor de eigenschap linear-gradient.

Het regelsysteem

Nu moeten we het regelsysteem bouwen om de drie waarden van HSL onafhankelijk van elkaar te kunnen instellen. In deel 1 hebben we al gezien dat de HTML-schuifregelaar (of slider) <input type="range"> perfect is voor deze klus. De attributen min en max bepalen het bereik van de regelaars. Het attribuut value bevat de waarde. Die kunnen we ophalen en gebruiken met JavaScript. Dat komt later.

Eerst de kleur. Daarvoor maken we een regelaar met een bereik van 0 tot 360 (graden).

<input class="color" max="360" min="0" type="range">

In CSS maken we de klasse .color. Daarin wordt een lineair kleurverloop gemaakt van links naar rechts met elke RGB-hoofdtint als kleurstop in de korte hexadecimale notatie:

.color {
  background-image: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

Met alleen deze code zul je het kleurverloop niet zien. We moeten ook de in de browser ingebouwde opmaak van de regelaar aanpassen. De belangrijkste regel in de CSS hieronder is -webkit-appearance: none. Daarmee wordt (ook in Firefox en Edge) de standaardopmaak van een schuifregelaar uitgeschakeld. Pas dan kun je er bijvoorbeeld een achtergrond op toepassen. De rest is minder spectaculair. We schakelen een eventuele rand uit, stellen een outline in, maken de regelaar hoger en stellen een marge boven en onder in.

input[type="range"] {
  -webkit-appearance: none;
  border: none;
  outline: 1px solid black;
  height: 50px;
  margin: 6px 0;
}

We hebben nu een balk met alle tinten, maar het schuifje is te klein en niet mooi. Om dat te kunnen opmaken moeten we naar The Upside Down van de pagina: het schaduw-DOM.

• In Chrome open je de doorgang door bij de instellingen van de DevTools Show user agent DOM in te schakelen.
• In Firefox typ je in de adresbalk about:config. Zet vervolgens de instelling devtools.inspector.showUserAgentShadowRoots op true.

In Chrome ziet het DOM van het element input er zo uit:

<input type="range">
#shadow-root (user-agent)




<div>
  



<div pseudo="-webkit-slider-runnable-track" id="track">
    



<div id="thumb"></div>




  </div>




</div>

De browser bevat eigen opmaakstijlen voor het schuifje (thumb) en het spoor waarover je het schuifje sleept (track). Het zijn pseudo-elementen en in Chrome heten ze ::-webkit-slider-runnable-track en ::-webkit-slider-thumb. Dit kun je vinden door de stijlregels van die onderdelen te bekijken op het tabblad Styles van de DevTools.

We maken de track even hoog als de container:

input[type="range"]::-webkit-slider-runnable-track {
  height: 100%;
}

Ook bij schuifje moet de standaardopmaak worden uitgeschakeld met -webkit-appearance: none;. De box-shadow zorgt ervoor dat het schuifje ook in donkere gebieden goed is te zien.

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: 0 0 4px 1px white;
  cursor: pointer;
  height: 100%;
  outline: 2px solid black;
  width: 20px;
}

Met deze toevoegingen is de regelaar voor de tint klaar. Ook de regelaars voor verzadiging en helderheid hebben nu de basisopmaak. In de broncode vind je ook de stijlregels voor de pseudo-elementen in Firefox. Die komen op hetzelfde neer als die voor Chrome, maar hebben het voorvoegsel ::-moz-range-.

In deel 3 gaan we verder met de opmaak en maken we een begin met het programmeren van de logica (JavaScript).

Deel 1 van de serie vind je HIER, deel 3 HIER en deel 4 HIER.