Perfection or Vanity

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Komentarze w HTML

30 września 2005

Trochę o standardach

Komentarze występują w każdym języku, nawet tych znacznikowych, więc musiały się znaleźć w HTML-u także. Mogą być różnie wykorzystywane, ja przestawię parę wskazówek, ułatwiających orientowanie się w kodzie. Wersja liniowa tutaj nie istnieje, komentarz musi mieć początek i zakończenie:

  1. <!--
  2. (treść komentarza)
  3. -->

Jeśli używasz XHTML-a, musisz pamiętać, że w środku komentarza nie może występować ciąg znaków „--”. Odpadają więc szlaczki oddzielające części kodu na Twojej stronie. Używaj „==” jeśli musisz. Podane niżej zapisy są błędne:

  1. <!----------------------------------------------------->
  2. <!-- ----------------------------------------------- -->
  3. <!-- tutaj nalezaloby cos dopisac -- ale nie wiem co -->

Ostatnia linijka technicznie znaczy tyle, że komentarz kończy się po „dopisać”, potem są tylko atrybuty dla jakiegoś taga. Ale to bardzo zakręcone, więc po prostu nie wolno tego robić.

W zwykłym HTML można umieszczać komentarze przed znacznikiem <html/>, lecz w XML (XHTML z application/xhtml+xml) tak być nie powinno. No i jasne chyba jest, że nie można zagnieżdzać komentarzy:

  1. <!--
  2. <div id="content">
  3. <!-- dopisac naglowek -->
  4. </div>
  5. -->

To jest źle. Na stronie w HTML-u nie dość, że pojawi się zawartość diva to jeszcze błąd dla XHTML-a. Wiem, ja też bym chciał jakiś bardziej ogólny znacznik komentarzy, jak { } bądź /* */ versus // w językach programowania. No ale co począć, należy się zastosować:

  1. <!--
  2. <div id="content">
  3. --><!-- dopisac naglowek --><!--
  4. </div>
  5. -->

Komentowanie a CDATA

Zwykło się używać komentarzy do zmuszenia starych przeglądarek, bez wsparcia dla CSS czy ECMAScript do pominięcia reguł i kodu. Rozważmy następujący przykład:

  1. <style type="text/css">
  2. <!--
  3. body { background-color: pink; }
  4. -->
  5. </style>

Ten kod nie powinien zostać zrozumiany przez nowoczesne przeglądarki, jako że definicja różowego tła dla body nie istnieje. Podobnie tutaj, mimo że autor chciał wykluczyć możliwość, że jakiś Netscape zrozumie opatrznie znak <:

  1. <script type="text/javascript">
  2. <!--
  3. var task = document.getElementByID("taskbar").getElementsByTagName("a");
  4. if ((task.length < 10) && (task.length > 5)) {
  5. -->
  6. </script>

CSS nie stanowi wielkiego problemu (jednakże zalecam także podane niżej rozwiązanie), chyba że używasz tworów Microsoftu, jak parseExpression czy inne takie. Dla skryptów należałoby zacząć używać sekcji CDATA.

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. var task = document.getElementByID("taskbar").getElementsByTagName("a");
  4. if ((task.length < 10) && (task.length > 5)) {
  5. //]]>
  6. </script>

Takie oznaczenie mówi parserowi XML, że w środku są zwyczajne dane. Można więc spokojnie używać <, >, &. Przed oznaczeniami CDATA występuje //, gdyż tak w JavaScript oznacza się komentarze liniowe, co wyklucza te linijki ze skryptu. Parser XML napotka jednak <![CDATA[ i przestanie. Rozpocznie znowu po ]]>, więc należy unikać jak ognia przypadku, gdzie w skrypcie mamy właśnie znaki ]]>. Można je rozdzielić na ]] > przecież.

Sekcja CDATA zostanie zrozumiana tylko gdy strona jest pisana jako XML (application/xhtml+xml).

Komentarze warunkowe

Drużyna Microsoftu zajmująca się Internet Explorerem miała parę tęgich głów, które zapewne przerażone wynikiem pracy, zaproponowały w swoim geniuszu stworzenie tylnich drzwiczek tylko rozumianych przez IE. Dobrym posunięciem były tutaj komentarze, bo nie wpływały na proces walidacji. No okej, wtedy mało kto się przejmował takimi drobnostkami, ale chwała im i za to.

Komentarz warunkowy powoduje wskoczenie IE w tryb parsowania znaczników, które są w nim. Wygląda on trochę dziwnie:

  1. <!--[if IE]>
  2. treść
  3. <![endif]-->

W normalnej przeglądarce, ]> i <![ zostanie potraktowane jako część komentowanego tekstu i pominięta. IE jednak zamknie komentarz, jeśli spełnia warunek w [if]. Warunki zaczynają się właśnie od if potem następuje operator, IE oraz wersja. Gdy operator nie wystąpi, to jest to równoznaczne z operatorem =. Operatory:

  1. lt (lower than) mniejszy
  2. gt (greater than) większy
  3. lte (lower than equal) mniejszy równy
  4. gte (greater than equal) większy równy

Przykład wykorzystania:

  1. <!--[if lte IE 5]>
  2. <link rel="stylesheet" href="ie5-boxmodel.css" />
  3. <![endif]-->

Ratuje życie, używajcie z głową. ;) Można jeszcze, za QuirksMode, podać jako ciekawostkę tag <comment/>. Nie jest on w specyfikacji i nie widzę jego sensownego użycia, ale może się komuś przyda. :S

Inne wskazówki

Komentowanie własnego kodu jest zawsze opłacalne. W przypadku HTML-a komentarze są pomijane w wyglądzie strony, ale zajmują miejsce (w odróżnieniu od programów, które mają wycinane komentarze podczas kompilowania), więc nie należy przesadzać.

Przydatne bardzo jest oznaczenie bloków znaczników, aby było od razu widać który znacznik co zamyka:

  1. <div id="header">
  2. </div><!-- id="header" -->
  3. <div id="content">
  4. <div class="entry">
  5. <div class="head a0">
  6. </div><!-- class="head" -->
  7. </div><!-- class="entry" -->
  8. </div><!-- id="content" -->

Gdy piszemy na początku strukturę strony, wszystko wydaje się proste do odróżnienia, zwłaszcza w edytorach kolorujących znaczniki, numerujących linijki i tak dalej. Ale gdy w entry pojawi się nagle masa tekstu, to można się pogubić. A najbardziej, jak mamy cztery zamykające </div> obok siebie.

Masz fart, jeśli Twój edytor potrafi zwijać części kodu, pozostawiając widoczną pierwszą linijkę z identyfikatorem i ostatnią. Lecz po prostu najlepiej zacznij tak oznaczać swoje sekcje strony, a będzie Ci lżej. Zobaczysz.

Informacje i hiperłącza

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

Informacje o wpisie

Napisał riddle 30 września 2005 o 14:45

Kategorie: HTML & Semantyka, Standardy sieciowe

Dodaj do:

Wpisy archiwalne

Archiwum miesięczne

  1. osobiście stwierdzam, że komentarze w HTML są zbyt ograniczone i przy naprawdę wielkich serwisach nie pomagają w dostatecznym stopniu

  2. Bardzo ładny howto dla początkujących :)
    Co do znacznika komentarza - też bym chciał jakieś inne. IMO te z php ( // i /* */ ) dają radę.
    Pozostaje mieć nadzieję na dodanie takowych znaczników w HTML 2.x

  3. zimaq: XHTML 2.0, bo HTML 2.0 już istnieje ;)

    Ja też bym chciał /* i //, czy też (*, // i cokolwiek innego. Ale co począć.

    Dobry tekst, jak zwykle Riddlu :)

  4. Zeżarło mi X ;)

  5. A ja bym chcial znaczek kwadracika - # :)

    Apropo komentarzy, to w mojej opinii uzywanie ich w kodzie strony nie jest niezbedne, ale juz styl CSS to co innego. Tutaj _nalezy_ ich uzywac, bo inaczej mozna sie latwo pogubic i zrobic z tego wielki smietnik.

  6. Ciekawy wpis. To "zakręcenie" dotyczące sekwencji
    --
    w komentarzach nie jest takie straszne :). Tutaj:
    http://www.htmlhelp.com/reference/wilbur/misc/comment.html
    można znaleźć wyjaśnienie. W skrócie, sekwencja:
    <!
    rozpoczyna nie komentarz, a deklarację komentarza, a:
    >
    kończy tę deklarację. W jej obrębie może znajdować się wiele komentarzy, z których każdy musi rozpoczynać się i kończyć ciągiem znakow:
    --

    Czyli np. to:
    <!-------->
    Oznacza dwa puste komentarze w jednej deklaracji. Przykłady podane przez Ciebie faktycznie są błędne, chociaż gdyby tak pierwszy z nich wzbogacić o jeszcze jeden minus, już przestałby być nieprawidłowy. Byłaby to po prostu sekwencja 14 pustych komentarzy :).

    Tak czy inaczej, faktycznie lepiej unikać tego rodzaju rzeczy w swoim kodzie.


    Przy okazji, pole na treść komentarzy (do wpisów) jest ciut za małe z punktu widzenia wygody użytkowania :).

  7. Dzięki za podpowiedź, nie zdawałem sobie z tego sprawy! :)

    A myślę, że teraz będzię OK jeśli chodzi o textarea#commbody. :>

  8. > Zwykło się używać komentarzy do zmuszenia starych przeglądarek, bez wsparcia dla CSS czy ECMAScript do pominięcia reguł i kodu.

    Czy jest jeszcze sens stosowania tych komentarzy po <script.. ? Jeśli ktoś używa np. Netscape 2.0, to niech się nie dziwi :)

  9. Widzę, że wchodzisz w rolę nauczyciela newbie (i w zasanie nie tylko). Bardzo szczytne i oklaski się należą!

  10. Do taba Archiwum dodałem linki do reszty tego co tu powstało. Żeby było prościej przeglądać.

  11. Mam pytanko odnośnie komentarzy warunkowych.

    Mam w sekcji head komentarz typu <!—[if lte IE 6]—>...<![endif]—>. W tym komentarzu jest po prostu dołączenie arkusza stylów z poprawkami dla IE 6.

    Samo IE6 czyta to poprawnie i jest cacy. Problem jest z IE7, które wyświetli na początku strony „<!—[if lte IE 6]—><![endif]—>”. Dlaczego tak się dzieje? Jak to rozwiązać (tymczasowo sprawę załatwiłem na około, ale do samego IE7 też będę potrzebował, chyba, osobny warunek) ?

  12. Tez szukam właśnie takiego czegoś

  13. Zmora webmastera - IE6 i Vista

    Każdy, kto poważnie zajmuje się projektowaniem stron www staje w pewnym momencie przed nie lada wyzwaniem. Mamy piękny design pociętą do idealnie czystego kodu html/css, w naszej przeglądarce wszystko wygląda perfekcyjnie...
    Właśnie... Zbl[...]

  14. No i to, czego szukałem. Dziękuję :)

  15. Bardzo przejrzyście prowadzony blog - gratulacje