Ky është eksperimenti im në ndërtimin ose gjetjen e fletës më të vogël të stilit CSS.

Eksperimenti është të gjej dhe të krijojë fletën më të vogël të stilit për faqen time të internetit, ndërkohë që jam ende i shqetësuar për aksesin dhe përvojën e përdoruesit.

Për mohimin e përgjegjësisë, faqet e internetit të tilla si "Motherf-king Website" nuk llogariten sepse nuk ka një fletë stili (dhe përdor Google Analytics për disa arsye).

Konkurrenti i dytë është një nga pasardhësit e tij përfundimtarë, Perfect Motherf-cking Website që ka një fletë stilesh me 3 rregulla dhe një pyetje mediatike për modalitetin e errët (pikat për modalitetin e errët!). Shkarkova fletën e stilit dhe mora 444 bajt prej saj, të pazikuar dhe të pakinifikuar.

Kjo është fleta e stilit:

body {
 max-width:650px;
 margin:40px auto;
 padding:0 10px;
 font:18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 color:#444
}
h1,
h2,
h3 {
 line-height:1.2
}
@media (prefers-color-scheme: dark) {
 body {
  color:#ccc;
  background:black
 }
 a:link {
  color:#5bf
 }
 a:visited {
  color:#ccf
 }
}

Por paraardhësi i tij, "Better Motherf-cking Website" në fakt mori një gjurmë më të vogël: 120 byte me vetëm dy rregulla. Fleta e stilit është minimizuar gjithashtu.

Kodi:

body{margin:40px
auto;max-width:650px;line-height:1.6;font-size:18px;color:#444;padding:0
10px}h1,h2,h3{line-height:1.2}

Vështirë ta kryesh këtë.

Por nuk bën përpjekje për paraqitjen e errët, kështu që ky është një kompromis që mund të më duhet të bëj.

Disa rregullime në fletën time të stilit për trupin:

body{margin:40px auto;max-width:600px;font:normal 1.2em sans-serif;background:#121212;color:#fafafa;padding:0 10px;line-height:1.4}

Përmbajtja maksimale dhe kufijtë janë përgjithësisht të barabarta me ato të mëparshme, por unë përdora vetinë e përgjithshme të shkronjave për të ruajtur disa pjesë. Sfondi dhe ngjyra pothuajse po ndërrohen për njerëzit që e kanë vazhdimisht të vështirë të lexohen në ekranet më të ndritshëm (si unë). E di që duhet të pyes përdoruesin për preferencat e tij, por në kontekstin e sajteve personale, marrja e një ndërfaqe të errët të detyrueshme nuk është problem.

Pjesa tjetër vjen me domosdoshmërinë e ndryshimit të ngjyrave të lidhjeve për ta bërë atë të lexueshme.

a:link{color:#5bf}a:visited{color:#ccf}

Ngjyrat vijnë nga Perfect Website nga lart.

Kjo më lë me 170 bajt nga një fletë stili e minuar.

Nëse dikush di se si të arrijë rezultate më të mira me - mundësisht - atë që kam, më njoftoni.

—
Kjo fillimisht u postua në faqen time të internetit: https://daepher.com