FOUC(Flash Of Unstyled Content)는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게된다.
FOUC는 CSS와 HTML의 버전 변화와는 관계가 없으며, 이것은 브라우저의 문제로 보인다. 하지만 이 문제는 브라우저에서 큰 문제가 아닌 것으로 보이는데, 브라우저 내에 프로그램된 우선 사항들이 페이지를 보여줄 때 아래와 같은 방식으로 처리하기 때문이다.
브라우저는 웹 페이지의 마크업에서 참조된 모든 부수적인 파일들을 모아 그 즉시 DOM을 빌드한다. 브라우저는 처음으로 표시할 가장 빠르게 분석할 수 있는, 즉 글의 내용을 골라 먼저 화면에 표시한다. 화면에 표시된 내용에 마크업의 순서에 따라 스타일을 적용하고 스크립트를 실행한다.
최근의 웹 페이지들은 아래와 같은 방법으로 여러 개의 스타일 시트를 참조하는 경향이 있으므로 FOUC는 더 일반적이고 더 빈번하게 관찰된다.
CSS 규칙의 종속적인 성격은 일부 브라우저에서 모든 스타일 데이터를 적용하기 전에 필요한 내용들이 수집될 때 까지 기다리기를 권장한다. 스타일이 적용되지 않은 내용이 보이는 것을 방지하기 위해, 개발자는 전체가 로드될 때 까지 모든 내용을 숨길 수 있지만 이벤트 핸들러가 실행되고 콘텐츠가 표시되기 전에 종종 마찬가지로 산만한 빈 페이지가 나타날 수 있다.
다음과 같은 코드로 해결해 볼 수 있다. html의 head 부분에 넣는다. Paul Irish's solution
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>