<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><refs xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:"><ul xmlns="http://www.w3.org/1999/xhtml"><li><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> <cite>The FOUC Problem | WebKit</cite> (<time>2017-05-25 18:53:31 +09:00</time>) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://webkit.org/blog/66/the-fouc-problem/">https://webkit.org/blog/66/the-fouc-problem/</anchor-external><ul><li><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end>
<cite>Surfin’ Safari - Blog Archive &amp;#187; The FOUC Problem</cite> <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://webkit.org/blog/?p=66">http://webkit.org/blog/?p=66</anchor-external>
(<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">名無しさん</anchor> <weak xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">2006-09-20 03:26:06 +00:00</weak>)</li></ul></li></ul></refs><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end>
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">すっぴん問題</anchor> (Flash of Unstyled Content problem)</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> <cite xml:lang="ja">大阪大学大学院情報科学研究科</cite> (<time>2017-05-25 19:15:35 +09:00</time>) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.ist.osaka-u.ac.jp/japanese/">http://www.ist.osaka-u.ac.jp/japanese/</anchor-external></p><p><anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;4</anchor-internal> このサイト、なぜか <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> を直接読み込まず、 <code class="HTMLe" xml:lang="en">script</code>
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>から参照される外部 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">JavaScript</anchor> コードにより新しい 
<code class="HTMLe" xml:lang="en">link</code> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>で <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> を追加している。
更にそこで <code>@import</code> している <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> にほとんどのスタイル指定が含まれている。
そのためか、 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Chrome</anchor> で見ると <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">FOUC</anchor> する。
何度も見ていると<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">キャッシュ</anchor>が効いてくる (<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> ファイルそれぞれは<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">キャッシュ</anchor>されているが、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> の <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">fetch</anchor> に到達するまで時間がかかっていて、 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">preload scanner</anchor>
も効かないので、 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> を読み込むより先に<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">レンダリングの開始</anchor>条件に達してしまうのだろう)。
<time>2017-05-25T10:19:56.000Z</time></p><figure class="quote"><figcaption><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> <cite xml:lang="ja">新潟県ホームページ</cite>
(<time>2017-07-28 14:00:50 +09:00</time>)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.pref.niigata.lg.jp/">http://www.pref.niigata.lg.jp/</anchor-external></figcaption><blockquote><pre class="HTML code"> 	&lt;script type=&quot;text/javascript&quot; src='/common/js/style.js'&gt;&lt;/script&gt; 
 	&lt;script type=&quot;text/javascript&quot; src='/common/js/common.js'&gt;&lt;/script&gt;
 	&lt;link class=&quot;colorChange&quot; rel=&quot;stylesheet&quot; href='/common/css/spring.css' type=&quot;text/css&quot; title=&quot;spring&quot; /&gt;
 	&lt;link class=&quot;colorChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/summer.css' type=&quot;text/css&quot;  title=&quot;summer&quot; /&gt;
 	&lt;link class=&quot;colorChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/autumn.css' type=&quot;text/css&quot;  title=&quot;autumn&quot; /&gt;
 	&lt;link class=&quot;colorChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/winter.css' type=&quot;text/css&quot;  title=&quot;winter&quot; /&gt;
 	&lt;link class=&quot;colorChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/black.css' type=&quot;text/css&quot;  title=&quot;black&quot; /&gt;
 	&lt;link class=&quot;colorChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/blue.css' type=&quot;text/css&quot;  title=&quot;blue&quot; /&gt;
 	&lt;link class=&quot;fontChange&quot; rel=&quot;stylesheet&quot; href='/common/css/fonts.css' type=&quot;text/css&quot; title=&quot;small&quot; /&gt;
 	&lt;link class=&quot;fontChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/fontl.css' type=&quot;text/css&quot; title=&quot;large&quot; /&gt;
 	&lt;link class=&quot;fontChange&quot; rel=&quot;alternate stylesheet&quot; href='/common/css/fontm.css' type=&quot;text/css&quot; title=&quot;medium&quot; /&gt;
 	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href='/common/css/slick/slick.css' /&gt;
 	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href='/common/css/slick/slick-theme.css' /&gt;</pre></blockquote></figure><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> <anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;5</anchor-internal>  (<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">キャッシュ</anchor>状況によりますが) 一瞬 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> なしで表示されたり、
一瞬違う色で表示されてから再表示されたりします。
<anchor-internal xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">&gt;&gt;7</anchor-internal> で変更したものを<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">クッキー</anchor>で保存する仕組みのようです。
(なぜ初期状態と既定値が違うのかは謎だ。。。)</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> <cite xml:lang="ja">新潟県:文字の大きさ・色変更</cite> (<time>2016-01-21 15:55:50 +09:00</time>) <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://www.pref.niigata.lg.jp/color.html">http://www.pref.niigata.lg.jp/color.html</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">行政</anchor>の <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Webサイト</anchor>によくある<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">アクセシビリティー</anchor>基準を満たすために変なことやってるパターンですねぇ。
形骸化した基準を満たすためにすべての人に不快感を与えるというのは、
あるいみ<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ユニバーサルデザイン</anchor>なのかもしれない。</p></body></html>