Edit

Page

Page title:

Page body:

[REFS[
- [3] [CITE[The FOUC Problem | WebKit]] ([TIME[2017-05-25 18:53:31 +09:00]]) <https://webkit.org/blog/66/the-fouc-problem/>
-- [2]
[CITE[Surfin’ Safari - Blog Archive &#187; The FOUC Problem]] <http://webkit.org/blog/?p=66>
([[名無しさん]] [WEAK[2006-09-20 03:26:06 +00:00]])
]REFS]

[1]
[[すっぴん問題]] (Flash of Unstyled Content problem)

[4] [CITE@ja[大阪大学大学院情報科学研究科]] ([TIME[2017-05-25 19:15:35 +09:00]]) <http://www.ist.osaka-u.ac.jp/japanese/>

>>4 このサイト、なぜか [[CSS]] を直接読み込まず、 [CODE(HTMLe)@en[script]]
[[要素]]から参照される外部 [[JavaScript]] コードにより新しい 
[CODE(HTMLe)@en[link]] [[要素]]で [[CSS]] を追加している。
更にそこで [CODE[@import]] している [[CSS]] にほとんどのスタイル指定が含まれている。
そのためか、 [[Chrome]] で見ると [[FOUC]] する。
何度も見ていると[[キャッシュ]]が効いてくる ([[CSS]] ファイルそれぞれは[[キャッシュ]]されているが、
[[CSS]] の [[fetch]] に到達するまで時間がかかっていて、 [[preload scanner]]
も効かないので、 [[CSS]] を読み込むより先に[[レンダリングの開始]]条件に達してしまうのだろう)。
[TIME[2017-05-25T10:19:56.000Z]]

[FIG(quote)[
[FIGCAPTION[
[5] [CITE@ja[新潟県ホームページ]]
([TIME[2017-07-28 14:00:50 +09:00]])
<http://www.pref.niigata.lg.jp/>
]FIGCAPTION]

> 
[PRE(HTML code)[
 	<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' />
]PRE]

]FIG]

[6] >>5  ([[キャッシュ]]状況によりますが) 一瞬 [[CSS]] なしで表示されたり、
一瞬違う色で表示されてから再表示されたりします。
>>7 で変更したものを[[クッキー]]で保存する仕組みのようです。
(なぜ初期状態と既定値が違うのかは謎だ。。。)

[7] [CITE@ja[新潟県:文字の大きさ・色変更]] ([TIME[2016-01-21 15:55:50 +09:00]]) <http://www.pref.niigata.lg.jp/color.html>

[8] [[行政]]の [[Webサイト]]によくある[[アクセシビリティー]]基準を満たすために変なことやってるパターンですねぇ。
形骸化した基準を満たすためにすべての人に不快感を与えるというのは、
あるいみ[[ユニバーサルデザイン]]なのかもしれない。

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)