Teorija

Nuorodos, paveikslėliai ir spalva

Tavo puslapis semantiškas ir apiformintas. Ši pamoka — apie smulkmenas, kurios nulemia, ar juo malonu, ar skausminga naudotis: kaip elgiasi nuorodos, kaip kraunasi paveikslėliai ir ar spalvos įskaitomos.

Keliai (paths): kur rodo nuoroda ar paveikslėlis

Kiekvienas href ir src yra kelias, ir jų būna trys rūšys:

Reliatyvus — style.css, ./style.css, ../images/logo.png. Skaičiuojamas nuo dabartinio failo aplanko. Tavo <link href="style.css"> veikia, nes stiliaus failas guli tiesiai šalia index.html.
Absoliutus — https://apod.nasa.gov/apod/image/1604/…jpg. Pilnas kažko adresas kitame serveryje. Tavo kortelių paveikslėliai yra absoliutūs, nes gyvena NASA serveriuose, ne tavo.
Nuo šaknies (root-relative) — /about.html. Pradedamas nuo svetainės šaknies, ignoruojant dabartinį aplanką. Naudinga, kai svetainė turi daug puslapių daugelyje aplankų.

Nykščio taisyklė: reliatyvus — savo failams (svetainė gali persikelti į bet kokį domeną ir vis tiek veiks), absoliutus — tik kai rodai į kitą serverį.

Nuorodų būsenos ir fokuso žiedas, kurio reikia klaviatūros naudotojui

Nuoroda — ne viena išvaizda, o kelios, ir CSS leidžia apiforminti kiekvieną:

:hover — virš jos yra pelė.
:focus-visible — ji turi klaviatūros fokusą ir naršyklė mano, kad žiedas turėtų būti rodomas (t. y. naudotojas naviguoja klaviatūra, o ne spragteli).
:visited — naudotojas jau ten buvo.

Svarbiausias skirtumas — :focus prieš :focus-visible. :focus suveikia visada, kai elementas turi fokusą — įskaitant iškart po pelės spragtelėjimo, todėl paprastas :focus kontūras blyksteli žiedą prie kiekvieno paspaudimo. :focus-visible suveikia tik tada, kai žiedas iš tikrųjų naudingas: naviguojant klaviatūra. Tad pelės naudotojas gauna švarų paspaudimą, klaviatūros — aiškų žiedą. Apiformink :focus-visible, ne :focus.

Viena detalė tyliai nulemia, ar žiedas apskritai matomas — outline-offset. Teigiamas poslinkis nustumia žiedą nuo valdiklio ant puslapio už jo; 0 nupiešia jį ant paties valdiklio krašto. Taisyklė yra outline-offset: 2px, kad žiedas atsisėstų ant puslapio ir liktų aiškiai atskirtas nuo mygtuko — būtent tai ir pridėsi.

Paveikslėliai: trys atributai, kurie svarbūs

Kiekvienas <img> tavo kortelėse neša tris dalykus, ir kiekvienas užsitarnauja savo vietą:

<img src="…/DustAngelNebula_rba1024.jpg" alt="A Dust Angel Nebula"
     width="1024" height="664" loading="lazy">

alt — ką rodo paveikslėlis, tam, kas jo nemato (ekrano skaitytuvo naudotojui arba naršyklei, kuriai nepavyko jo užkrauti). Aprašyk turinį ar paskirtį, ne failą: alt="A Dust Angel Nebula", niekada alt="image" ar alt="DustAngelNebula_rba1024.jpg". Jei paveikslėlis vien dekoratyvinis, duok jam tuščią alt="", kad ekrano skaitytuvas jį praleistų — tuščias alt yra sprendimas, trūkstamas alt — klaida.
width ir height — tikras paveikslėlio dydis pikseliais. Naršyklė naudoja santykį, kad rezervuotų vietą dar prieš užkraunant paveikslėlį, tad tekstas nešokteli žemyn, kai jis atkeliauja. (Šie trys paveikslėliai yra 1024×664, 500×743 ir 640×480 — labai skirtingų formų — tačiau object-fit: cover vis tiek atvaizduoja juos kaip vienodas plyteles.)
loading="lazy" — neatsisiųsk paveikslėlio, kol jis netrukus pasirodys ekrane. Ilgoje galerijoje tai skirtumas tarp trijų ir trisdešimties atsisiųstų paveikslėlių.

srcset: teisinga idėja, bet čia netinkami duomenys

Yra ketvirtas atributas, apie kurį paskaitysi — srcset — kitokio dydžio failui skirtingiems ekranams pateikti. Sintaksė tikra:

<img src="…/DustAngelNebula_rba1024.jpg"
     srcset="…/DustAngelNebula_rba1024.jpg 1024w,
             …/DustAngelNebula_rba.jpg 2400w"
     sizes="280px" alt="A Dust Angel Nebula">

1024w yra sąžininga — taip sako failo vardas. 2400w yra spėjimas: NASA duoda peržiūros kopiją ir pilnos raiškos kopiją, bet niekada nepaskelbia pilnos raiškos pločio. O klaidingas pločio deskriptorius negenda tyliai — naršyklė juo pasitiki, tad didelio tankio telefone ji mielai atsisiųstų kelių megabaitų pilnos raiškos nuotrauką 280 pikselių plytelei užpildyti. Puslapis pasunkėja — būtent tame įrenginyje, kur svoris labiausiai skaudžiai — dėl eilutės, kurią pridėjai, kad būtų lengviau.

Tad srcset lieka už tavo kortelių ribų. Tai visa pamoka miniatiūroje: įrankis teisingas, duomenys netinkami, o vis tiek jį įdiegti būtų blogiau nei nenaudoti. O gilesnė priežastis, kodėl srcset čia nepadeda — nėra pakankamai mažo dydžio: peržiūros kopija ir pilnos raiškos kopija abi kur kas didesnės už 280px plytelę. Tikras projektas generuotų plytelės dydžio versijas kūrimo metu (build time) arba per paveikslėlių paslaugą (pavyzdžiui, Cloudinary ar imgix); NASA pateikia paveikslėlį pažiūrėti, o ne miniatiūrų rinkinį.

Spalva, kurią iš tikrųjų galima perskaityti

Prigesink tekstą pasirinkdamas prigesintą spalvą, kurią gali išmatuoti, niekada — jį blukindamas. Kontrastas — tai santykis tarp teksto ir jo fono; kūno tekstui reikia 4.5:1.

Išmatuok savo prigesintą pilką naršyklės įrankiuose. Tamsioje temoje --text-muted (#8b93b0) yra 6.32:1 ant puslapio ir 5.67:1 ant kortelės — abu viršija 4.5:1. Perjunk į šviesią temą, ir jos pačios prigesinta pilka (#5c6480) rodo 5.46:1 ir 5.85:1 — irgi viršija. Kol kas gerai.

Dabar — spąstai. Šviesi tema sąmoningai apsibrėžia savo pačios prigesintą pilką. Jei ji būtų tingiai perėmusi tamsiosios temos #8b93b0, ta pilka ant blyškaus fono rodo 2.84:1 — aiškus nesėkmingas rezultatas; datos taptų vaiduokliu. Spalva, kuri praeina vienoje temoje, gali nueiti perniek kitoje, ir vienintelis sprendimas — atskira reikšmė kiekvienai temai, būtent todėl stiliaus faile yra atskiras [data-theme="light"] blokas. Štai kodėl matuoji spalvą, kuri iš tikrųjų atsiduria ekrane, abiejose temose, o ne pasitiki viena.

Niekada vien spalva

Ir navigacijos nuorodos, ir įterptinė „Astronomy Picture of the Day" nuoroda pažymėtos vien tuo, kad yra kitokios spalvos nei aplinkinis tekstas. Skaitytojui, kuris tos spalvos neskiria, įterptinė ištirpsta sakinyje. Navigacijai tai praeina, nes jos padėtis — piliulių eilė viršuje — jau sako „tai nuorodos". Įterptinė nuoroda pastraipoje tokio signalo neturi, todėl daug komandų įterptines nuorodas visada pabraukia. Taisyklė: niekada neleisk spalvai būti vieninteliu prasmės nešėju. Poruok ją su pabraukimu, ikona, užrašu ar forma.