平衡点
2023/03/14
_ WebのCSSをbasscssからPico.cssに変更した
これまで Basscss で組んでいたサイトのCSSを Pico.css に変更した.
個人のサイトは AMP HTML のみで作成しているので サイズが気になる所ではあるが:
- basscss ベース: 24 kb(24142)
- picocss ベース: 45 kb(45649)
というわけで, 許容範囲.
basscss は用途に応じたクラスが細かく用意されていて,
HTML 側で必要に応じて class を追加していく感じだったけれども,
Pico.css は極力 class や div を指定せずに「それっぽく」作るという塩梅.
HTML がスッキリして嬉しい.
例えばサイトの上部ナビゲーション. basscss の場合, HTML は
<header class="container right-0 left-0 top-0 z4 fixed">
<nav class="navigation flex items-center justify-between">
<div class="pr1 py1 order-0">
<a href="index.html">
<amp-img layout="fixed"
width="1.2rem"
height="1.2rem"
src="/assets/img/top.webp"
alt="About"
id="top"
class="logo left">
<amp-img fallback
layout="fixed"
width="1.2rem"
height="1.2rem"
src="/assets/img/top.jpg"
alt="About"
id="top"
class="logo left">
</amp-img>
</amp-img>
</a>
</div>
<input type="checkbox" id="tm" class="navigation-input">
<label for="tm" class="pl1 py1 order-3 md-hide lg-hide h2">☰</label>
<div class="navcontents items-center md-flex lg-flex order-1">
<div class="px1 py0">
<a href="/research/index.html">
Research
</a>
<div class="dmenu px1 py0">
<input type="checkbox" id="dmenu" class="dmenu-input">
<label for="dmenu">Software ▾</label>
<div class="dcontents">
<ul class="list-reset p0 m0">
<li class="px1 py0">
<a href="/software/index.html">
Repository
</a>
</li>
<li class="px1 py0">
<a href="/cc-env/index.html">
Comp. Memo
</a>
</li>
</ul>
</div>
</div>
<div class="px1 py1">
<a href="https://uwabami.junkhub.org/log">blog</a>
</div>
</div>
<div class="flex-auto"></div>
<div class="px1 py0 order-2">
<form method="GET"
class="p0 m0"
action="https://www.google.com/cse"
target="_top">
<div class="inline-block relative p0 m0 small">
<input name="cx" type="hidden"
value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
<input name="ie" type="hidden" value="UTF-8" />
<input class="gsearch" type="search" placeholder="検索" name="q" required>
</div>
</form>
</div>
</div>
</nav>
</header>
となっていて,
ついでに dropdown メニューを組むのに
結構苦労して
dmenu, dcontents クラスを作成していた.
これが Pico.css の場合, HTML は
<header>
<nav>
<ul>
<li>
<a href="/index.html">
<amp-img layout="fixed"
width="1.2rem"
height="1.2rem"
src="/assets/img/top.webp"
alt="About"
id="top">
<amp-img fallback
layout="fixed"
width="1.2rem"
height="1.2rem"
src="/assets/img/top.jpg"
alt="About"
id="top">
</amp-img>
</amp-img>
</a>
</li>
</ul>
<input class="menu-btn" type="checkbox" id="menu-btn"/>
<label class="menu-icon" for="menu-btn"><span></span></label>
<ul class="menu">
<li>
<a href="/research/index.html">
Research
</a>
</li>
<li>
<details role="list">
<summary aria-haspopup="listbox" role="link">Software</summary>
<ul>
<li>
<a href="/software/index.html">
Repository
</a>
</li>
<li>
<a href="/cc-env/index.html">
Comp. Memo
</a>
</li>
</ul>
</details>
</li>
<li>
<a href="https://uwabami.junkhub.org/log">blog</a>
</li>
<li>
<form method="GET"
action="https://www.google.com/cse"
target="_top">
<input name="cx" type="hidden"
value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
<input name="ie" type="hidden" value="UTF-8" />
<input type="search" placeholder="検索" name="q" required>
</form>
</li>
</ul>
</nav>
</header>
とスッキリ.
元々 semantic に組んでくれているので,
div や span がほとんど無い.
せいぜいモバイル用に breakpoint を指定してハンバーガーメニューにする所だけだった.
というわけで, イロイロとスッキリ.
とはいえ, 残念ながら Picocss が提供してくれた折角のダークモードとの切り替えは使えていない.
amp-bindかamp-scriptあたりでswitcher組めば良いかもしれない.
ただ, その前にamp自体が過去のモンになりそうではある
_ Word の文書「中国語(台湾)で書かれた文字が…」 となる場合
某所文書のテンプレートを貰ったので作業していたら
「このドキュメントには中国語（台湾）で書かれた文字があるため、公正の対象にできませんが、この言語に対応する校正ツールを入手できる場合があります。」
とか言われたり(こういう事があるからWordは嫌いだ).
元の文書作成者の環境によるんだろうかねぇ.
「検索」で言語を置換すると良いみたい. 試してみたら確かに治った.
そういや, 少し前はこんな事もあったな.
…もうまともに開発リソースが割かれない様になってきたのかねぇ.