Her på kode24 er vi i en spennende posisjon i forhold til andre sider på huset. Forholdet mellom mobiltrafikk og desktop-trafikk holder seg nemlig ganske stabilt!
Uke etter uke ligger fordelingen på rundt 50/50 mellom desktop og mobil, sansynligvis fordi mange av dere leser oss på jobben. Og kanskje fordi utviklere generelt bruker mer desktop? Uansett er det en god unnskyldning for oss til å bruke litt ekstra tid på å fiffe opp desktop-versjonen vår.
Fikk du prøvd kodekrimmen vår?
En hacker truet med å lekke e-poster fra Porsgrunn Rådhus! 🐤
Du har kanskje lagt merke til den nye stilen på scrollbaren vår? Det er megalett å få til, og ikke så skummelt å bruke som en skulle tro.
Her er hvordan vi gjorde det.
Dette kan du stile
For ja, det går faktisk an å stile scrollbaren i nettleseren. Du kan stile både hovedscrollbaren, den store på høyresiden, og alle små scrollbarer inne på nettsiden, slike som dukker opp hvis du bruker overflow:auto på et blokk-element.
Det er bare en hake, du kan bare stile om nettlesere som tolker -webkit prefikset. Det vil si Safari og Chrome, for det meste. ::webkit-scrollbar er nemlig ikke en standard-selector, og er heller ikke på vei til å bli det, ifølge MDN Web Docs.
Men i nettleserne som støttes har du en rekke CSS-selektorer å velge mellom - ofte kalt CSS pseudo-elementer, fordi de lar deg styre en spesifikk del av et element. Elementene du kan velge mellom er:
- ::-webkit-scrollbar — Stiler hele skrollbaren.
- ::-webkit-scrollbar-button — Stiler knappene på scrollbaren. De som peker oppover og nedover.
- ::-webkit-scrollbar-thumb — Selve scrolle-stripen som du drar i.
- ::-webkit-scrollbar-track — Sporet scrolle-stripen ligger i - altså bakgrunnen.
- ::-webkit-scrollbar-track-piece — Hvis du ønsker å stile området av track-bakgrunnen som ikke dekkes av scrolle-stripen du drar i, annerledes (ja, det er litt merkelig).
- ::-webkit-scrollbar-corner — Stiler hjørnet nederst til høyre i nettlesere, hvor scrollepilene fra den horisontale og vertikale scrollbaren møtes.
- ::-webkit-resizer — Stiler knappen for å endre størrelsen på et vindu med scroll. Denne er ikke alltid synlig i nettlesere som Chrome, men dukker opp i for eksempel textarea-taggen, hvis den får scroll på seg.
Innenfor disse pseudo-klassene kan du finne på mye sprell, siden det meste av CSS-attributter støttes.
#1: kode24-scrollbaren
På kode24 styler vi scrollbar-tracken med vår egen gradient, resten har vi gjort gjennomsiktig. Her er koden, og hvordan resultatet blir.
<style>
#scroll-example-1 {
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 300px;
color: white;
background: #474747;
}
#scroll-example-1 p {
padding: 20px;
}
#scroll-example-1::-webkit-scrollbar {
width: 10px;
background: transparent;
}
#scroll-example-1::-webkit-scrollbar-thumb {
background: linear-gradient(0deg, #821599, #492792);
border-radius: 0;
}
#scroll-example-1::-webkit-scrollbar-track {
background: transparent;
border-radius: 0;
}
</style>
<div id="scroll-example-1">
<p>innhold</p>
</div>
Must go faster. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. You know what? It is beets. I've crashed into a beet truck. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I was part of something special. Must go faster... go, go, go, go, go! I gave it a cold? I gave it a virus. A computer virus. Yes, Yes, without the oops!
You really think you can fly that thing? You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Must go faster... go, go, go, go, go!
God help us, we're in the hands of engineers. You know what? It is beets. I've crashed into a beet truck. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
#2: CSS-tricks-scrollbaren
Hva med å kombinere en gradient med litt box-shadow-magi for å lage en emboss-effekt? En teknikk som CSS-tricks benytter til sin hoved-scrollbar, forøvrig. Box-shadow støtter nemlig å sette så mange skygger man vil, dermed kan man kombinere både en lys og en mørk skygge. En teknikk vi tidligere har skrevet om i forbindelse med CSS-kunst.
<style>
#scroll-example-2 {
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 300px;
color: white;
background: #474747;
}
#scroll-example-2 p {
padding: 20px;
}
#scroll-example-2::-webkit-scrollbar {
width: 20px;
background: black;
}
#scroll-example-2::-webkit-scrollbar-thumb {
background: linear-gradient(0deg, #fcd107, #eb4e03);
border-radius: 20px;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
#scroll-example-2::-webkit-scrollbar-track {
background: #1d2129;
border-radius: 0;
}
</style>
<div id="scroll-example-2">
<p></p>
</div>
Must go faster. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. You know what? It is beets. I've crashed into a beet truck. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I was part of something special. Must go faster... go, go, go, go, go! I gave it a cold? I gave it a virus. A computer virus. Yes, Yes, without the oops!
You really think you can fly that thing? You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Must go faster... go, go, go, go, go!
God help us, we're in the hands of engineers. You know what? It is beets. I've crashed into a beet truck. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
#3: Totalt crazy scrollbar
Eller hva med å bare gå totalt crazy? Du kan for eksempel sette bakgrunnen på både sporet og scrolle-stripen til hver sin animerte GIF, for å makse ut på brutalisme-skalaen.
<style>
#scroll-example-3 {
overflow: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 300px;
color: white;
background: black;
}
#scroll-example-3 p {
padding: 20px;
}
#scroll-example-3::-webkit-scrollbar {
width: 40px;
background: black;
}
#scroll-example-3::-webkit-scrollbar-thumb {
background: url(https://media1.giphy.com/media/Xva7a4hQsozE4/200.webp?cid=790b76115cb598104f7778486b712708);
border-radius: 20px;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
#scroll-example-3::-webkit-scrollbar-track {
background: url(https://media3.giphy.com/media/2tTiCSfEEP5QS5TjGr/200w.webp?cid=790b76115cb59771675171665987eac0);
opacity: 0.4;
border-radius: 0;
}
</style>
<div id="scroll-example-3">
<p></p>
</div>
Must go faster. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. You know what? It is beets. I've crashed into a beet truck. Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.
My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I was part of something special. Must go faster... go, go, go, go, go! I gave it a cold? I gave it a virus. A computer virus. Yes, Yes, without the oops!
You really think you can fly that thing? You really think you can fly that thing? Must go faster... go, go, go, go, go! God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Must go faster... go, go, go, go, go!
God help us, we're in the hands of engineers. You know what? It is beets. I've crashed into a beet truck. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?
Gjør noe andre ikke gjør!
Men hvorfor skal man gidde å gjøre det her, tenker du kanskje? Scrollbaren er vel fin som den er?
Joda, men er det ikke gøy å gjøre noe ikke alle andre gjør? En kul scrollbar blir garantert et blikkfang for besøkende. Kanskje kan du stile den så den passer inn med det grafiske temaet på siden, eller står i kontrast til det?
Det viktigste argumentet for å style scrollbaren som utvikler må riktignok være "fordi det er mulig". 😝
.
13-åringen til kode24:
- Slik fant jeg de 35.000 passordene
- Det var en helt åpen fil, forteller eleven i Bergen, som fant den med et C#-skript.