Pomoc - Dyrektywa @import i efekt FOUC

Start

Programowanie

Szablon

Dyrektywa @import i efekt FOUC

Niekiedy konieczne jest dołączenie dodatkowego arkusza stylów za pomocą dyrektywy @import. Dyrektywa ta musi się znajdować wewnątrz elementu style.

Dołączanie arkusza CSS za pomocą dyrektywy @import powoduje czasem w przeglądarkach IE błąd FOUC, opisany na stronie BlueRobot. Wygląda to jak chwilowy "błysk" strony niesformatowanej przez CSS. Temu efektowi można zapobiec w dwojaki sposób:

umieszczając przed instrukcją importującą arkusz stylów znacznik LINK, włączający inny arkusz (może to być włączenie stylu dla innego medium, np. syntezatora mowy albo
poprzedzając importowanie stylu odwołaniem do skryptu typu javascript.

Podstawowy kod:

<head> 
<title>Moja strona</title>
<style type="text/css" media="screen">@import "style.css";</style>
</head>

Kod zmodyfikowany: wcześniejsze podlinkowanie arkusza stylów dla drukarki:

<head>
<title>Moja strona</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="screen">@import "style.css";</style>
</head>

Kod zmodyfikowany: wcześniejsze odwołanie do skryptu:

<head>
<title>Moja strona</title>
<script type="text/javascript">Tu treść skryptu</script>
<style type="text/css" media="screen">@import "style.css";</style>
</head>

Warto pamiętać, że każda dyrektywa @import, w przeciwieństwie do polecenia link zostanie załadowana i użyta (przez przeglądarki, które ją interpretują).

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ

« poprzedni artykuł		następny artykuł »

Wstecz

Poradniki

Dodatki

Uwagi, źródła

Poradniki

Dodatki

Reklama

Uzupełnienia