[1] すっぴん問題 (Flash of Unstyled Content problem)
[4] 大阪大学大学院情報科学研究科 () <http://www.ist.osaka-u.ac.jp/japanese/>
>>4 このサイト、なぜか CSS を直接読み込まず、 script
要素から参照される外部 JavaScript コードにより新しい
link 要素で CSS を追加している。
更にそこで @import している CSS にほとんどのスタイル指定が含まれている。
そのためか、 Chrome で見ると FOUC する。
何度も見ているとキャッシュが効いてくる (CSS ファイルそれぞれはキャッシュされているが、
CSS の fetch に到達するまで時間がかかっていて、 preload scanner
も効かないので、 CSS を読み込むより先にレンダリングの開始条件に達してしまうのだろう)。
<script type="text/javascript" src='/common/js/style.js'></script> <script type="text/javascript" src='/common/js/common.js'></script> <link class="colorChange" rel="stylesheet" href='/common/css/spring.css' type="text/css" title="spring" /> <link class="colorChange" rel="alternate stylesheet" href='/common/css/summer.css' type="text/css" title="summer" /> <link class="colorChange" rel="alternate stylesheet" href='/common/css/autumn.css' type="text/css" title="autumn" /> <link class="colorChange" rel="alternate stylesheet" href='/common/css/winter.css' type="text/css" title="winter" /> <link class="colorChange" rel="alternate stylesheet" href='/common/css/black.css' type="text/css" title="black" /> <link class="colorChange" rel="alternate stylesheet" href='/common/css/blue.css' type="text/css" title="blue" /> <link class="fontChange" rel="stylesheet" href='/common/css/fonts.css' type="text/css" title="small" /> <link class="fontChange" rel="alternate stylesheet" href='/common/css/fontl.css' type="text/css" title="large" /> <link class="fontChange" rel="alternate stylesheet" href='/common/css/fontm.css' type="text/css" title="medium" /> <link rel="stylesheet" type="text/css" href='/common/css/slick/slick.css' /> <link rel="stylesheet" type="text/css" href='/common/css/slick/slick-theme.css' />
[6] >>5 (キャッシュ状況によりますが) 一瞬 CSS なしで表示されたり、 一瞬違う色で表示されてから再表示されたりします。 >>7 で変更したものをクッキーで保存する仕組みのようです。 (なぜ初期状態と既定値が違うのかは謎だ。。。)
[7] 新潟県:文字の大きさ・色変更 () <http://www.pref.niigata.lg.jp/color.html>
[8] 行政の Webサイトによくあるアクセシビリティー基準を満たすために変なことやってるパターンですねぇ。 形骸化した基準を満たすためにすべての人に不快感を与えるというのは、 あるいみユニバーサルデザインなのかもしれない。