mozilla
Wyniki wyszukiwania

    Poprawne zastosowanie CSS i JavaScript w dokumentach XHTML

    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,