Nylig ble det lansert en CSS-selektor som er rene drømmetreffet for en side som kode24. Siden starten har vi nemlig tilbudt en såkalt «darkmode» på nettavisa vår.

Modusen gir lesere mørk bakgrunn og lys tekst. Inspirert av temaene mange utviklere bruker i editorene sine.

Lag tekst med animert gradient-bakgrunn

Få liv i teksten din med disse CSS-triksene.

onsdag 14. november 2018

Vi innså selvsagt at ikke alle ønsket mørk modus på siden vår. Derfor implementerte vi en liten lysbryter, som du foreløpig finner i footer-en. Knappen skrur av og på en CSS-klasse på body-taggen, og lagrer valget til brukeren i en cookie.

Ulempen med den løsningen er at vi ikke vet hva brukeren foretrekker før han eller hun besøker siden vår og tar et valg. Inntil nå.

Detektere darkmode

Darkmode er tydeligvis i vinden om dagen. Både Microsoft og Apple har nylig sluppet oppdateringer til operativsystemene sine med støtte for modusen. Selv om oppdateringen til Mac OS Mojave muligens mer vellykket enn Windows sin.

All spøk til side; Apple ønsker at brukerne sine skal få servert mørkmodus på tvers av operativsystemet, også i nettleseren. Derfor slapp de nylig en preview-versjon av nettleseren Safari med støtte for en prefers-color-scheme media query.

Foreløpig støtter den valgene no-preference, light og dark. Under kan du teste funksjonaliteten.

Lag effekten fra Red Dead Redemption 2 i ren CSS

tirsdag 6. november 2018

W3C diskuterer allerede om query-en, som foreløpig kun er tilgjengelig i Safari 68 og nyere, skal bli en del av CSS.

Det finnes derfor håp om at dette skal dukke opp i større nettlesere som Chrome og Firefox fremover. Mozilla-teamet diskuterer allerede støtte i Firefox.

Og mens vi venter på en global standard har Windows-brukere med Edge-nettleseren et alternativ. Den proprietære selektoren -ms-high-contrast har nemlig vært tilgjengelig for nettleseren en periode, og kan brukes på lignende måte, ifølge bloggeren Greg Whiteworth.

Har du nyeste Mac Os og preview-versjonen av Safari, og vil teste? Om du har mørkmodus bør du se hvit kode24-logo i boksen under.

.logo-boks {
  display: block;
  border: 2px dashed seashell;
  background-color: seagreen;
  color: black;
  padding: 20px;
  font-size: 20px;
  text-align: center;

}

@media (prefers-color-scheme: dark) {
  .logo-boks {
    background-color: black;
    color: white;
  }
}

kode24

Ikke alle får se disse Unicode-penisene

Du kan bytte ut 🍆-tegnene, om du ikke bruker Windows.

fredag 16. november 2018