Poprawne zastosowanie CSS i JavaScript w dokumentach XHTML

przez 2 współtwórców

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.

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 <tt>text/html</tt>, natomiast nie potrafi obsłużyć rekomendowanego typu <tt>application/xhtml+xml</tt>.

Kiedy strona XHTML posiada typ MIME <tt>text/html</tt>, uznawana jest przez wszystkie przeglądarki jakby była niczym więcej niż stroną HTML. Jednakże, jeśli strona XHTML posiada MIME <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>, 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 <tt><</tt> i <tt>&</tt> nie są dozwolone chyba, że są wewnątrz sekcji CDATA (<tt><!CDATA[[ ... ]]></tt>).
  2. Komentarze (<tt><!—— ... ——></tt>) nie mogą zawierać podwójnych myślników (<tt>——</tt>).
  3. Zawartość wewnątrz komentarzy (<tt><!—— ... ——></tt>) może być zignorowana.

Problemy z tagami <tt>style</tt> i <tt>script</tt>

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

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.

Zastosowanie komentarzy wewnątrz <tt>style</tt> i <tt>script</tt>

Autorzy zaznajomieni z HTML często zamykają zawartość tagów <tt>style</tt>i <tt>script</tt> 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 <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt> 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.

<tt>style</tt> i <tt>script</tt> 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 (<tt>——</tt>).

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

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

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>

Przykłady

Zastosowanie CSS w wewnętrznym <tt>style</tt> w komentarzach

Przykład 1 - XHTML 1.0 Strict jako <tt>text/html</tt>
Ten przykład obrazuje zachowanie XHTML podanego jako <tt>text/html</tt> 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 <tt>text/xml</tt>
Ten przykład obrazuje zachowanie XHTML podanego jako <tt>text/xml</tt>, 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 <tt>application/xhtml+xml</tt>
Ten przykład obrazuje zachowanie XHTML podanego jako <tt>application/xhtml+xml</tt> 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.

Zastosowanie CSS w zewnętrznym pliku

Przykład 4 - XHTML 1.0 Strict jako <tt>text/html</tt>
Ten przykład obrazuje zachowanie XHTML podanego jako <tt>text/html</tt> 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 <tt>text/xml</tt>
Ten przykład obrazuje zachowanie XHTML podanego jako <tt>text/xml</tt>, 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 <tt>application/xhtml+xml</tt>
Ten przykład obrazuje zachowanie XHTML podanego jako <tt>application/xhtml+xml</tt>, 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+.

Rekomendacje

Nie używać <tt>style</tt> lub <tt>script</tt> wewnątrz dokumentu XHTML

Zastępowanie wewnętrznych <tt>style</tt> i <tt>script</tt> 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 <tt>text/html</tt> na <tt>application/xhtml+xml</tt>.

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 <tt>text/html</tt> na <tt>application/xhtml+xml</tt> wydarzy się w przyszłych kilku latach.

Jeśli chcesz tylko sprawdzić Twój dokument XHTML jako <tt>text/html</tt>, 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.

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 <tt>xml-stylesheet</tt>, ale zamiast tego powinieneś użyć <tt>link</tt>, aby wskazać zewnętrzne pliki zawierające CSS.

Original Document Information

  • Autor(zy): Bob Clary
  • Ostatnia data aktualizacji: 14 Marca 2003 (tłumaczenie: 13 sierpnia 2006)
  • Copyright © 2001-2003 Netscape.

Autorzy i etykiety dokumentu

Contributors to this page: Ptak82, VooEak
Ostatnia aktualizacja: Ptak82,