Skip to main content

Visit Mozilla.org

Poprawne zastosowanie CSS i JavaScript w dokumentach XHTML

z Mozilla Developer Center, polskiego centrum programistów Mozilli.


XHTML™ 1.0 The Extensible HyperText Markup Language (Edycja Druga) definiuje XHTML jako przeformułowanie standardu HTML 4 jako aplikacji XML 1.0.

XHTML szybko zastępuje HTML 4 w wielu przypadkach; jednakże, brak poprawnego wsparcia XHTML, połączone z brakiem zrozumienia podstawowych różnic pomiędzy HTML 4 i XHTML przez twórców stron internetowych, tworzy dziś coraz większy problem w Sieci.

Spis treści

[edytuj] XHTML to XML, nie HTML

Jednym z głównych błędów jest uznanie języka XHTML kolejną wersją HTML-a. Na dodatek, błąd ten wyolbrzymiany jest przez fakt, iż Microsoft® Internet Explorer wspiera obsługę XHTML, ale tylko, jeśli dokument ma typ MIME text/html, natomiast nie potrafi obsłużyć rekomendowanego typu application/xhtml+xml.

Kiedy strona XHTML posiada typ MIME text/html, uznawana jest przez wszystkie przeglądarki jakby była niczym więcej niż stroną HTML. Jednakże, jeśli strona XHTML posiada MIME text/xml lub application/xhtml+xml, musi ona być traktowana jako dokument XML który musi być zgodny ze ścisłymi standardami tworzenia i wyświetlania XML-a.

Poprawny dokument XHTML jest aplikacją XML i jako taki wymusza od autora do bycia zgodnym ze ścisłymi zasadami tworzenia XHTML-a, między innymi:

  1. Surowe znaki < i & nie są dozwolone chyba, że są wewnątrz sekcji CDATA (<!CDATA[[ ... ]]>).
  2. Komentarze (<!—— ... ——>) nie mogą zawierać podwójnych myślników (——).
  3. Zawartość wewnątrz komentarzy (<!—— ... ——>) może być zignorowana.

[edytuj] Problemy z tagami style i script

Wewnętrzne tagi style i script mogą spowodować kilka różnych problemów w XHTML-u, jeśli jest on traktowany jako XML a nie HTML.

[edytuj] JavaScript zawiera znaki, które nie mogą istnieć w XHTML

JavaScript zwykle zawiera znaki, które nie mogą istnieć w dokumencie XHTML poza sekcjami CDATA. 

<script type="text/javascript">
  var i = 0;
  
  while (++i < 10)
  {
    // ...
  }
</script>

Zauważ, iż ten przykład jest źle sformułowanym XHTML, jako że zastosowanie surowego < jest dozwolone tylko jako część znacznika XHTML lub XML.

[edytuj] Zastosowanie komentarzy wewnątrz style i script

Autorzy zaznajomieni z HTML często zamykają zawartość tagów stylei script w komentarzach po to, aby schować ich zawartość przed przeglądarkami, które ich nie rozumieją. 

<style type="text/css">
 <!--
  body {background-color: blue; color: yellow;}
 -->
</style>
<script type="text/javascript">
 <!--
  var i = 0;
  var sum = 0;
 
  for (i = 0; i < 10; ++i)
  {
    sum += i;
  }
  alert('sum = ' + sum);
 // -->
</script>

Ten przykład pokazuje, że przeglądarka wspierająca CSS i JavaScript może ignorować zawartość wewnątrz komentarzy. W dodatku, przykład ten pokazuje, jak różnice w obsłudze zawartości w text/xml lub application/xhtml+xml mogą powodować problemy.

Mozilla 1.1+/Opera 7
Nie zastosuje CSS lub nie uruchomi JavaScript.
Netscape 7.0x/Mozilla 1.0.x
Nie zastosuje CSS, ale uruchomi JavaScript.
Internet Explorer 5.5+
Nie wyświetli dokumentu.

[edytuj] style i script zawierające podwójne myślniki

Kolejny problem z użyciem komentarzy dookoła JavaScriptu w XHTML związany jest z problemami, które mogą wystąpić, jeśli komentarze zawierają podwójne myślniki (——). 

<script type="text/javascript">
<!--
  var i;
  var sum = 0;

  for (i = 10; i > 0; --i)
  {
    sum += i;
  }
// -->
</script>

[edytuj] Zastosowanie CDATA zamiast komentarzy

Poprawne zamknięcie zawartości skryptu wewnątrz sekcji CDATA może powodować problemy w starszych przeglądarkach, które nie obsługują XML. Jednakże, jest możliwe połączenie komentarzy JavaScriptu z sekcjami CDATA w celu kompatybilności wstecznej. 

<script type="text/javascript">
 //<![CDATA[
  var i = 0;

  while  (++i < 10)
  {
    // ...
  }
 //]]>
</script>

[edytuj] Przykłady

[edytuj] Zastosowanie CSS w wewnętrznym style w komentarzach

Przykład 1 - XHTML 1.0 Strict jako text/html
Ten przykład obrazuje zachowanie XHTML podanego jako text/html kiedy CSS zawarty jest wewnątrz dokumentu i otoczony jest komentarzami. Przykład ten jest wspomagany przez Netscape 7.x, Mozillę, Operę 7 i Internet Explorera 5.5+, wszystkie podane przeglądarki zastosują CSS tak jak się tego spodziewano.
Przykład 2 - XHTML 1.0 Strict jako text/xml
Ten przykład obrazuje zachowanie XHTML podanego jako text/xml, kiedy CSS zawarty jest wewnątrz dokumentu i otoczony jest komentarzami. Przykład ten jest wspomagany przez Netscape 7.x, Mozillę i Operę 7 ale nie Internet Explorera 5.5+. Zauważ iż, Netscape 7.x, Mozilla i Opera stwierdzają, że CSS wewnątrz komentarzy ma być ignorowany.
Przykład 3 - XHTML 1.0 Strict jako application/xhtml+xml
Ten przykład obrazuje zachowanie XHTML podanego jako application/xhtml+xml kiedy CSS zawarty jest wewnątrz dokumentu i otoczony jest komentarzami. Przykład ten jest wspomagany przez Netscape 7.x, Mozillę i Operę 7 ale nie Internet Explorera 5.5+. Zauważ, iż Netscape 7.x, Mozilla i Opera stwierdzają że CSS wewnątrz komentarzy ma być ignorowany.

[edytuj] Zastosowanie CSS w zewnętrznym pliku

Przykład 4 - XHTML 1.0 Strict jako text/html
Ten przykład obrazuje zachowanie XHTML podanego jako text/html kiedy CSS zawarty jest w zewnętrznym pliku. Przykład ten jest wspomagany przez Netscape 7.x, Mozillę, Operę 7 i Internet Explorera 5.5+.
Przykład 5 - XHTML 1.0 Strict jako text/xml
Ten przykład obrazuje zachowanie XHTML podanego jako text/xml, kiedy CSS zawarty jest w zewnętrznym pliku. Przykład ten jest wspomagany przez Netscape 7.x, Mozillę i Operę 7, ale nie Internet Explorera 5.5+.
Przykład 6 - XHTML 1.0 Strict as application/xhtml+xml
Ten przykład obrazuje zachowanie XHTML podanego jako application/xhtml+xml, kiedy CSS zawarty jest w zewnętrznym pliku. Przykład ten jest wspomagany przez Netscape 7.x, Mozillę i Operę 7, ale nie Internet Explorera 5.5+.

[edytuj] Rekomendacje

[edytuj] Nie używać style lub script wewnątrz dokumentu XHTML

Zastępowanie wewnętrznych style i script plikami zewnętrznymi zawierającymi CSS i JavaScript jest najlepszym sposobem tworzenia dokumentów XHTML w sposób wstecznie kompatybilny i nie zepsuje się, jeśli typ MIME dokumentu zostanie zmieniony z text/html na application/xhtml+xml.

Rekomendacja ta może wyglądać na zbyt zdecydowaną, jednakże jest ona stworzona z myślą zmniejszenia przyszłych problemów z zawartością XHTML kiedy zmiana z podawania XHTML jako text/html na application/xhtml+xml wydarzy się w przyszłych kilku latach.

Jeśli chcesz tylko sprawdzić Twój dokument XHTML jako text/html, możesz wprowadzać problemy, takie jak opisane w tym artykule, bez uświadomiania tego sobie. Przenoszenie styli CSS i kodu JavaScript do oddzielnych plików jest bezpiecznym sposobem, z uwzględnieniem zmian w sposobie podania Twojego XHTML-a.

[edytuj] Podążaj za Wskazówkami kompatybilności XHTML 1.0 z HTML

XHTML 1.0 Wskazówki kompatybilności XHTML 1.0 z HTML pomagają tworzyć dokumenty XHTML wstecznie zgodne ze starszymi przeglądarkami nie rozumiejącymi XML.

Proszę zauważyć, iż dla "czystych" dokumentów XHTML, nie musisz używać instrukcji xml-stylesheet, ale zamiast tego powinieneś użyć link, aby wskazać zewnętrzne pliki zawierające CSS.

[edytuj] Original Document Information

  • Autor(zy): Bob Clary
  • Ostatnia data aktualizacji: 14 Marca 2003 (tłumaczenie: 13 sierpnia 2006)
  • Copyright © 2001-2003 Netscape.
Źródło: "http://developer.mozilla.org/pl/docs/Poprawne_zastosowanie_CSS_i_JavaScript_w_dokumentach_XHTML"