Table of contents
Ramki (<iframe> to też ramka!) są jednym z wielu wynalazków powstałych podczas wojny przeglądarek. W tych okrutnych czasach strony robiło się zazwyczaj w “gołym HTML”, bez pomocy technologii po stronie serwera. Autorzy stron, nie zdając sobie sprawy z istnienia preprocesorów HTML, zmagali się z aktualizowaniem wspólnych elementów stron (menu) na wszystkich podstronach serwisu. Jak zwykle szybkie, proste i zupełnie nieprzemyślane rozwiązanie dostarczył Netscape.
Uwaga: pisząc nie można/nie da się mam na myśli przeciętnego prostego użytkownika i webmastera bez dziesiątek zamotanych skryptów.
Uwaga2: kiedy poczujesz, że masz dość — zerknij na koniec tekstu po sposoby zastąpienia ramek czym innym.
Ramki nie pasują do hypertekstu
Zaskakująco dużo punktów tyczy się też stron całkowicie polegających na AJAX. Te oznaczyłem przez (a).
Strona na ramkach to tak na prawdę dwa lub więcej dokumentów. Większość najgorszych bolączek ramek wywodzi się z tego, że URL zawsze wskazuje tylko jeden dokument. Przez to:
- Nie widać adresu podstrony (a).
- Nie można podstrony dodać do zakładek. Odwiedzającego nie musi interesować wszystko na danej stronie. Może chcieć tylko np. podstronę o chomikach (a).
- Nie można adresu podstrony nikomu przekazać. “Wejdź na jakaśtrona.pl/kontakt” jest o wiele lepsze niż “Wejdź na jakaśtrona.pl, kliknij 'o nas', przejedź na dół i kliknij 'skontaktuj się z nami'” (a).
- Ramki się rozsypują.
- Coś tak banalnego i popularnego jak otworzenie linku w nowym oknie (lub karcie/tabie) najczęściej psuje całkowicie układ na ramkach i uniemożliwia nawigację (a).
- Strony otworzone z wyników wyszukiwania są niekompletne i przez to nierzadko bezużyteczne ((a) — nawet gorzej, AJAX jest całkowicie nie do zgryzienia dla wyszukiwarek).
- Trudno zapisać stronę na dysk (a). To jest zwykłe utrudnienie, a nie żadne zabezpieczenie antypirackie.
Ramki stanowią barierę
- Jeśli cały układ nie mieści się wewnątrz okna przeglądarki, mniej ważne ramki mogą okupować okno i uniemożliwić dostęp do treści.
- Strony zbudowane na ramkach nie drukują się w całości.
- Boty wyszukiwarek sobie z nimi nie radzą (a).
- Poszukaj “twoja przeglądarka nie obsługuje ramek”.
- Brak linków na podstronach obniża ranking strony w Google, który głównie opiera się na analizie sieci linków. Pomoc Google informuje, że ramki mogą być przyczyną niezaindeksowania strony.
- Odświeżenie strony (czasem konieczne przy problemach z siecią) wraca do strony głównej (a).
- Niegraficzne przeglądarki ich nie obsługują lub obsługują słabo. Jest grupa inwalidów lub ekscentryków, dla których to ważne (a).
Ramki tylko pozornie upraszczają
- Trzeba pilnować, aby
targetbył odpowiedni na wszystkich linkach, inaczej strona się może “zapętlić” robiąc ramki w ramkach lub menu może zostać usunięte lub zastąpione przez podstronę. - Skrypty zapobiegające gubieniu się menu czasem nie działają lub stwarzają różnego rodzaju problemy (na to cierpiał nawet stary MSDN.com)
- Zwiększa się czas ładowania strony głównej, ponieważ trzeba załadować conajmniej 3 dokumenty, a nie jeden
- Zmiana zawartości dwóch ramek jednocześnie, bez przeładowania framesetu, wymaga skryptów
- W IE5, Operach starszych niż 9 oraz Safari nie da się przykryć ramki żadnym innym elementem strony (czyt. DHTML menu)
- Rozciągnięcie iframe na całą wysokość strony wymaga użycia CSS2 nieobsługiwanego przez IE albo niestandardowego zachowania IE i paru naśladujących przeglądarek.
- Rozciągnięcie iframe do wysokości jego zawartości wymaga skryptów, a to przecież podstawowa i banalna rzecz na zwykłych stronach.
Ramki są niedopracowanym standardem
- Stworzyły całą kategorię problemów z bezpieczeństwem — cross site scripting, XSS.
- Jak na element HTML, ramki są wyjątkowo mało kompatybilne wstecz.
- Standardy nie przewidują usunięcia odstępów między ramkami. Drobiazg, ale HTML teoretycznie przestaje być poprawny.
Kiedy ramki są potrzebne
Na zwykłych stronach WWW nie są. Niewidoczne ramki mogą być przydatnym hackiem przy robieniu webowych aplikacji dla starszych przeglądarek bez obsługi XMLHTTPRequest. Mogą też znaleźć zastosowanie w aplikacjach intranetowych, gdzie nie jest ważna szeroka dostępność i kompatybilność.
Alternatywy dla ramek
Wcześniej wymienione problemy dyskwalifikują typowe zastosowanie ramek na Sieci. Na szczęście nie są one niezastąpione.
Jak uniknąć przeładowywania całej strony?
Tak na prawdę — nie unikać. Większość stron w Internecie się przeładowuje i użytkownicy są do tego przyzwyczajeni. Ponadto coraz popularniejsze przeglądarki nowsze od IE mają progresywne i buforowane wyświetlanie, dzięki czemu zwykłe strony wyświetlają się rownie szybko i elegancko, jak strony na ramkach.
O ile wady ramek są nieusuwalne, to ładowanie stron za pomocą AJAX da się zrobić wystarczająco użyteczne i kompatybilne wstecz (poprzez doklejanie adresu rzeczywistej podstrony w location.hash, obserwowanie zmian adresu i emulowanie przycisku wstecz oraz odpowiednio zrobione linki, ale to wszystko razem to dość skomplikowana sprawa).
Czym łączyć treść i pozostałe elementy strony
Na serwerze
- PHP. Można na stronach dodawać
<?php include "menu.php"; ?>lub strony generować za pomocą szablonów. - SSI (shtml). “Goły” Apache potrafi łączyć dokumenty HTML za pomocą specjalnego komentarza:
<!--#include file="menu.html" -->, jeśli pliki będą miały nazwę .shtml (albo skonfiguruje się serwer, żeby przetwarzał również .html)
Bez pomocy serwera (czyt: nie musisz mieć wsparcia dla PHP na serwerze)
- Programistyczne edytory umożliwiają edytowanie wzorców dokumentów (Dreamweaver) lub conajmniej zamianę tekstu w wielu plikach na raz
- Preprocesory HTML. Programy lokalnie przetwarzające pliki podobnie jakby to miało miejsce na serwerze. Można nawet samemu napisać skrypt (
#!/bin/bashczy *.bat). - Zgrywanie z lokalnego serwera. Można zastosować PHP, czy inne narzędzia typowo serwerowe na lokalnym serwerze (easyphp, krasnal), a następnie zgrać całą stronę do zwykłych plików HTML (wget, offline explorer, teleport pro) i w postaci statycznej wrzucić do Sieci.
Wygląd ramek bez ramek
Jeśli potrzebny jest wygląd podobny do ramek, szczególnie iframe, można użyć CSS:
overflow:auto— wygląda i działa prawie dokładnie tak samo jak iframe, ale w obrębie jednego dokumentu. Uwaga: drukuje się tak samo źle jak iframe, dlatego trzeba ustawićoverflow:visible; height:autow arkuszu stylów do druku.position:fixed— daje efekt podobny do framesetów. Nie działa w IE6, ale dla niego można zastosować sztuczki dające ten sam efekt (umieścić w body i nadaćposition:absolute, a resztę wrzucić w element zoverflow:autolub użyć skryptu IE7 — pytaj Google)
Mity anty-ramkowe
Doklejone menu do strony jest na tyle małe, że nie spowoduje zauważalnego spowolnienia (jeśli jest inaczej — przemyśl użycie CSS).
“Mrugnięcie” całej strony nie jest niczym wyjątkowym, w przeciwieństwie do ww. problemów. Jak wspomniano wcześniej w nowych przeglądarkach i tak najczęściej nie występuje.
