가장 작은 스타일시트

반응형

이것은 가장 작은 CSS 스타일시트를 만들거나 찾기 위한 저의 실험입니다.

실험은 접근성 및 사용자 경험에 대해 염려하면서도 내 웹 사이트의 가장 작은 스타일시트를 찾아 만드는 것입니다.

면책의 경우 스타일시트가 없고 Google Analytics를 사용하므로 Sheat-King 웹 사이트와 같은 웹 사이트는 계산되지 않습니다.

두 번째 참가자는 3가지 규칙이 있는 스타일시트와 다크 모드에 대한 미디어 쿼리(다크 모드에 대한 포인트!)가 있는 Ferfect Sheat-cking 웹사이트입니다. 스타일시트를 다운받아서 444바이트를 받았는데 압축이 풀리고 마이닝이 되지 않았습니다.

스타일시트:

 

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
   }
}

그러나 그것의 전작인 Better Sheat-cking 웹사이트는 사실 더 작은 공간을 가지고 있다: 120바이트로, 두 가지 규칙만 가지고 있다. 스타일시트가 축소됩니다.

코드:

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}

이건 좀 어렵네요.

 

하지만 다크레이아웃을 위한 노력은 하지 않기 때문에 제가 타협을 해야 할 수도 있습니다.

본문에 대한 스타일시트의 몇 가지 조정 사항:

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

최대 내용과 여백은 일반적으로 이전과 동일하지만, 일부 비트를 저장하기 위해 일반 글꼴 속성을 사용했습니다. 배경과 색은 밝은 화면(예: 나)에서 계속 읽기가 어려운 사람들을 위해 거의 바뀌고 있다. 사용자에게 선호도를 물어봐야 한다는 것은 알지만, 개인 사이트의 맥락에서 의무적인 다크 인터페이스를 얻는 것은 문제가 되지 않는다.

나머지는 읽기 쉽도록 링크 색상을 변경할 필요가 있습니다.

 

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

색상은 퍼펙트 웹 사이트에서 가져온 것입니다.

그러면 미니 스타일시트에서 170바이트가 남습니다.

만약 누군가가 내가 가진 것으로 더 나은 결과를 얻을 방법을 안다면 - 가급적이면 - 알려주세요.

이것은 원래 제 웹사이트 https://daepher.com에 게시되었습니다.