Taigi, kaip švariai įgyvendinti tą tamsųjį režimą CSS’e ? Štai čia mes viską išnarpliosim, žingsnis po žingsnio, be bereikalingų kalbų.

Kodėl verta siūlyti tamsųjį režimą?

Na, visų pirma – tai ne tik dėl to, kad „atrodo kietai“ (nors, pripažinkim, atrodo tikrai gerai). Tamsusis režimas yra :

• patogesnis akims tamsioje aplinkoje
• gali sumažinti energijos suvartojimą OLED ekranuose (taip, tikrai)
• tikras naudotojų lūkestis – daugelis jį įjungia kaip numatytą

Ir, tarp mūsų kalbant, tai dar ir pliusas prie prieinamumo bei asmeninio pritaikymo. Nauda visomis prasmėmis.

Pagrindinis dalykas : media query prefers-color-scheme

Tai yra CSS perlas, leidžiantis nustatyti, ar naudotojas pageidauja šviesaus ar tamsaus režimo. Jau keletą metų visi pagrindiniai naršyklės tai puikiai palaiko (Chrome, Firefox, Safari, Edge… visi žaidime).

Štai bazinis pavyzdys :

@media (prefers-color-scheme : dark) {
  body {
    background-color : #121212;
    color : #f5f5f5;
  }
}

Paprasta, efektyvu. Su tuo tavo svetainė automatiškai prisitaiko prie naudotojo sistemos nustatymų. Magija ? Ne. Tiesiog geras sprendimas.

Du galimi būdai : automatinis vs rankinis

1 variantas : automatinis prisitaikymas
Tiesiog pasitiki prefers-color-scheme. Jei naudotojas savo OS nustato tamsųjį režimą, tavo svetainė prisitaiko automatiškai.

2 variantas : leisti naudotojui pasirinkti
Šitas – mano mėgstamiausias. Kombinuojam media query su JavaScript logika, kad naudotojas galėtų pats rinktis.

Klasikinis (ir naudingas) pavyzdys :

// Išsaugoti pasirinkimą localStorage
const toggleTheme = () => {
  const current = document.documentElement.getAttribute("data-theme");
  const next = current === "dark" ? "light" : "dark";
  document.documentElement.setAttribute("data-theme", next);
  localStorage.setItem("theme", next);
};

O CSS’e darom kažką panašaus :

:root[data-theme="dark"] {
  --bg-color : #121212;
  --text-color : #f5f5f5;
}

body {
  background-color : var(--bg-color);
  color : var(--text-color);
}

Supranti principą? Ir su CSS kintamaisiais viskas tampa labai lengvai valdomi. Pakeiti spalvą vienoje vietoje – viskas automatiškai prisitaiko. Tvarkinga.

Ar reikia perrašyti visą CSS? (spoileris : ne)

Tai klausimas, kuris dažnai iškyla : „ar turiu dubliuoti visą CSS dėl tamsaus režimo ?“. Atsakymas – ne. Tikrai nereikia visko kurti iš naujo, nusiramink.

Protingiausia strategija – nuo pat pradžių organizuoti temas su CSS kintamaisiais :

:root {
  --bg-color : #fff ;
  --text-color : #111;
}

@media (prefers-color-scheme : dark) {
  :root {
    --bg-color : #121212;
    --text-color : #f5f5f5;
  }
}

Tada šiuos kintamuosius naudok visur : fonams, tekstui, rėmeliams, nuorodoms… Galiausiai turėsi vieną tvarkingą CSS failą, o temos keisis automatiškai.

Klaidos, kurių reikėtų vengti (ir pats į kai kurias pakliuvau)

Keletas dalykų, kuriuos verta turėti omeny, nes pirmą kartą dažnai kažkur paslystam :

• Vaizdai: atsargiai su per šviesiais logotipais ar iliustracijomis. Geriau pasiruošti tamsias versijas arba naudoti SVG su dinaminėmis spalvomis.
• Kontrastai: įsitikink, kad tekstas išlieka skaitomas net ir tamsiame fone. Naudok tokius įrankius kaip color-contrast-checker, jie gali išgelbėti nuo nesąmonių.
• Testavimas: aktyvuok tamsųjį režimą savo naršyklėje ir OS, ištestuok viską iki galo. Ir būtinai pažiūrėk per mobilų! Ten kartais viskas atrodo kitaip.

Papildomai : super paprastas dark/light perjungiklis

Mygtukas svetainės kampe ? Naudotojai dažnai tai vertina labiau nei galvoji. Kažkas tokio :

&lt ;button onclick="toggleTheme()"&gt ;🌙 / ☀&lt ;/button&gt ;

Ir viskas – naudotojas turi kontrolę, nepriklausomai nuo savo sistemos. Man asmeniškai tai atrodo pagarbesnis sprendimas (ir šiek tiek smagiau).

Išvada : tamsusis režimas – taip, bet daryk jį gerai

Tamsusis režimas – tai ne šiaip užgaida. Tai tikras naudotojų poreikis, komforto pagerinimas, ir proga parodyti, kad tau rūpi detalės.

Tai ką, dar nebandai ? Tikrai nėra taip sudėtinga, ypač su šiuolaikiniais įrankiais. Ir rimtai, efektas kai tavo svetainė švelniai pereina į tamsų režimą – visada palieka įspūdį. Eksperimentuok, žaisk ir svarbiausia – pasirūpink, kad viskas išliktų malonu skaityti.

O tu – kuri režimą labiau mėgsti dirbdamas : šviesų ar tamsų?

Bet ne visi jie vienodi. Vieni labai galingi, kiti – paprasti ir greiti. Taigi, skyriau laiko ir patikrinau nemažai jų (tarp kitko, važiuodamas traukiniu iš Vilniaus į Kauną), ir štai mano asmeninis geriausių CSS generatorių palyginimas.

1. CSS Grid Generator – Tobulas greitam grid’o sudėliojimui

Jeigu esi kada nors nervinęsis bandydamas išdėstyti blokus su grid-template-areas, tau šitas įrankis patiks.

Užeini į puslapį, pasirinki stulpelių skaičių, sureguliuoji tarpus… ir štai, kodas paruoštas. Viskas paprasta, aišku, be jokių nesąmonių.

Ką man patinka : viskas vizualu. Nereikia galvoti apie sintaksę – iš karto matai rezultatą.
Ko gal šiek tiek trūksta : paruoštų responsive šablonų. Bet greitam prototipavimui – tobula.

2. Fancy Border Radius – Kai norisi kažko daugiau nei apvalių kampų

Šitą įrankį radau visiškai atsitiktinai forume, ir rimtai… wow. Visi žinom border-radius : 50%, ok. Bet čia viskas žymiai įdomiau. Gali susikurti organines, šiek tiek « blob » stiliaus formas, su asimetriškais kampais.

Yra mažas vizualus redaktorius, tampai rankenėles, ir tau sugeneruoja tokį CSS kodą:
border-radius : 60% 40% 30% 70% / 60% 30% 70% 40%;
Jo, skamba painiai, bet atrodo tikrai įdomiai.

Mano nuomonė: puikus būdas išsiskirti su kažkuo netradiciniu. Ne būtinas, bet labai smagus.

3. CSS Buttons Generator – Tinginiams, kurie skuba (tarp jų ir aš, kartais)

Sukurti gražų CSS mygtuką – nesunku. Bet kai reikia 12 skirtingų landing page’ui, jau tampa vargas. Šitas įrankis siūlo begalę stilių: flat, 3D, ghost, su hover efektais, animuoti…

Pasirenki, šiek tiek pakoreguoji (dydį, spalvą, šešėlį), ir gali kopijuoti kodą. Rimtai, per 5 minutes turi visą mygtukų rinkinį.

Kas patinka : jie pateikia ir HTML, ne tik CSS. Smulkmena, bet labai naudinga.

4. Animista – Kad animuoti būtų smagu, ne skausmas

Tai geriausias CSS animacijų generatorius, kurį rekomenduoju visiems. Animista – tarsi švediškas stalas : spaudi, bandai, keiti, ir matai efektą iš karto. Įėjimai, išėjimai, atšokimai, sukimai, vėlavimai – viskas čia yra.

Ir svarbiausia : gali pilnai pritaikyti animaciją prieš kopijuodamas kodą. Ne tik šiaip kopijuoti « ką davė ».

Mano verdiktas : būtinas įrankis. Net jei gerai moki CSS, jis sutaupo krūvą laiko.
Mažas minusas : svetainė kiek lėta. Senesniame kompe – šiek tiek stringa.

5. Glassmorphism Generator – Tiems, kas mėgsta “elegantišką blur’ą”

Žinai tą stilių “matinio stiklo”, kurį visi pamėgo po to, kai macOS jį sugrąžino į madą? Šis generatorius paruoš tau viską, ko reikia tam įspūdžiui CSS’e : blur’as, permatomumas, švelnios ribos…

Pasireguliuoji opacity, blur’ą – ir štai, CSS kodas paruoštas. Nereikia galvoti, kaip kombinuoti backdrop-filter su rgba().

Pastaba : ne visi naršyklės tai dar gerai rodo (žiūrime į tave, Firefox). Bet kai veikia – atrodo tikrai įspūdingai.

6. Neumorphism.io – Tarp šešėlio ir šviesos

Šis stilius, labai populiarus apie 2020-uosius, turi tiek fanų, tiek skeptikų. Asmeniškai naudoju saikingai, bet kai kuriais atvejais – labai pataiko.

Generatorius padeda rasti tinkamus box-shadow parametrus “minkštam” iškėlimo efektui. Ir tai tikrai sunku padaryti rankiniu būdu be vizualinio testavimo, todėl čia jis labai naudingas.

Trumpas patarimas : nepersistenk su blur’u – kitaip atrodys kaip senas, neryškus 2000-ųjų puslapis.

Ir bonusas : Figma + CSS Scan duetas

Gerai, tai ne visiškai “klasikiniai” CSS generatoriai. Bet Figma, su tinkamais įskiepiais, gali tau realiu laiku pateikti CSS’ą, kai kuri dizainą. O CSS Scan (naršyklės plėtinys) leidžia tau užvesti pelę ant bet kurio elemento puslapyje… ir bam, visas CSS kodas – vienu spustelėjimu.

Integruotojams, kurie skuba (arba tiems, kas nori pamatyti, kaip kitas puslapis padarė kokį efektą) – tai tiesiog magija.
Dėmesio : ne visada generuotas kodas bus tobulas, todėl geriau vis tiek peržiūrėti. Bet mokymuisi ar greitam prototipavimui – puikus pasirinkimas.

Išvada : ar verta naudoti visus ?

Tikrai ne. Bet turėti 2–3 po ranka – tarsi turėti gerą įrankių rinkinį: labai padeda, kai spaudžia terminai arba tiesiog nenori visko rašyti ranka.

O tu, ar jau naudoji kokį nors ? Gal turi mėgstamiausią, kurio nepaminėjau ? Parašyk – visada ieškau ko nors naujo išbandyti.

Nes galų gale, visi mes norim vieno… kad atrodytų šauniai ir būtų greita. Ar ne taip ?

Optimizuoti CSS – tai ne tik kodo švaros ar estetikos klausimas. Tai – o svarbiausia – greičio klausimas. O greitis šiandien reiškia labai daug.

Štai kaip padaryti, kad tavo CSS nebežlugdytų našumo.

1. Įkelk tik tai, kas tikrai būtina

Labai vilioja naudoti didelį CSS karkasą kaip Bootstrap ar visą Tailwind – ypač kai skubi. Bet būkim atviri : iš 3000 eilučių, kiek tu tikrai naudoji ? 150? Gerai, 200 jei tavo svetainė labai turtinga turiniu.

Pirmas žingsnis – *išvalyti*. Pašalink viską, ko nenaudoji. Gali daryti tai rankiniu būdu (šiek tiek vargo), arba geriau : naudoti įrankius kaip PurgeCSS ar UnCSS. Jie peržiūri tavo HTML, nustato, kurios klasės iš tikrųjų naudojamos, ir pašalina likusias. Paprasta ir efektyvu.

Asmeniškai, kai tai padariau su React + Tailwind projektu, galutinis CSS failas sumažėjo 10 kartų. Tiesiogine prasme. Nuo 250 KB iki 24 KB. Ne smulkmena.

2. Sujunk ir minifikuok CSS

Atrodo akivaizdu, bet vis dar randu svetainių su 5 ar 6 atskirais CSS failais, kurie visi įkeliami atskirai. Kodėl taip daryti ? Rimtai ?

Kiekvienas HTTP užklausa – tai stabdis. Tad sujunk viską į vieną failą, jei įmanoma.

Tada – minifikuok. Pašalink tarpus, komentarus, eilutes… Visa tai, ko naršyklė nereikalauja. Naudok įrankius kaip cssnano ar CleanCSS. Jų yra daug. Kai kurie redaktoriai, kaip VSCode, tai daro automatiškai eksportuojant.

3. Naudok critical CSS

Šitas dažnai gąsdina, bet verta. Idėja tokia : įkelk pirmiausia tą CSS, kuris reikalingas viršutinei puslapio daliai (vadinamai „above the fold“).

Visa kita gali palaukti sekundę ar dvi, kai pagrindinis turinys jau matomas. Rezultatas : svetainė atrodo kraunasi greičiau, net jei techniškai dar ne viskas paruošta.

Yra įrankių, kaip Critical (taip, pavadinimas ne itin originalus), kurie automatiškai sugeneruoja šį CSS fragmentą, kurį įterpi į &lt ;head&gt ; dalį.

Tai pritaikiau viename WordPress tinklaraštyje su gana sunkiu šablonu… Lighthouse balas pakilo nuo 71 iki 91 vien šiuo žingsniu. Įspūdinga.

4. Saugokis blokuojančio CSS

Primename : CSS pagal nutylėjimą yra *blokuojantis*. Kol jis neįkeltas, naršyklė nerodo… nieko. Balta tuščia ekranas.

Taigi, jei turi didelį CSS failą &lt ;head&gt ; dalyje – tai tarsi pakabinti ženklą „Grįžkite vėliau“.

Triukas – įkelti CSS neblokuojančiu būdu. Pvz., su atributu media="print" + onload, arba naudoti preload su atsarginiu variantu. Bet reikia atsargiai – blogai padarius, gali sulūžti stilius. Bet padaryta gerai – viską keičia.

5. Naudok klases, o ne sudėtingus selektorius

Žinai, tokius selektorius kaip div > ul li span :nth-child(3)? Taip, tokius. Naršyklė užtrunka juos apdoroti ilgiau nei paprastą .mano-klase. Kiekvieną kartą tai nedidelis skirtumas, bet didelėje svetainėje tai jaučiasi.

Tad kiek įmanoma – paprastos, gerai pavadintos, pakartotinai naudojamos klasės. Pliusas : tavo CSS tampa aiškesnis ir lengviau prižiūrimas.

6. Įjunk suspaudimą serveryje

Gerai, tai nėra tiesiogiai CSS, bet jei tavo CSS failas suspaustas Gzip ar Brotli formatu prieš siunčiant – jis bus žymiai lengvesnis. Pvz., 100 KB failas gali sumažėti iki 20–30 KB. Ir tai tikrai juntama.

Pažiūrėk savo serverio konfigūracijoje (Apache, Nginx…) ar CDN nustatymuose – dažnai tai tik vienas varnelės paspaudimas. Kam to nepadarius ?

Apibendrinant ?

CSS optimizavimas – tai ne tik pedantų reikalas. Tai realus našumo svertas. Tai pagerina krovimo laiką, vartotojo patirtį, ir netgi SEO (Google mėgsta greitas svetaines – tai ne naujiena).

Tad jei tavo svetainė lėtoka, prieš kaltindamas backend’ą ar paveikslėlius – pažvelk į CSS. Galbūt ten slypi tavo greičio lobynas.

O tu, ar bandei naudoti critical CSS ar automatinį išvalymą? Buvo netikėtumų? Papasakok, įdomu !