Nauji langai ir HTML Strict DTD

http://sum.lt/straipsniai/strict_dtd_ir_target_blank.php

Kaip iššaukti naują naršyklės langą išsaugant dokumento kodo atitikimą HTML Strict DTD rekalavimams? JavaScript pagrįstas sprendimas.

Kas tas DTD?

Kiekvienas HTML failas prasideda dokumento tipo deklaravimu (toliau — DTD — Document Type Definition). DTD nusako, kokia HTML versija yra naudojama. HTML 4 versija turi tris porūšius — „režimus“:

  • HTML 4 Strict („griežtas“)
  • HTML 4 Transitional („pereinamasis, tarpinis“)
  • HTML 4 Frameset (skirtas „rėmeliams“ atvaizduoti)

Dokumento tipą kiekvienas „interneto meistras“ gali pasirinkti laisvai.

Strict DTD užrašymo pavyzdys: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Strict DTD — gerai ar blogai?

Gerai. (Straipsnelio pabaiga :-))

Strict režime dokumento struktūra yra labiau sureikšminta nei pateikimas (atvaizdavimas). Nebijokite, svetainės išvaizda nuo to nenukenčia — tiesiog rekalavimai kodui yra ypač griežti, o dizainas kuo puikiausiai realizuojamas CSS pagalba.

Dar Strict tipas naudojamas norint priversti „blogas“ naršykles teisingai interpretuoti „dėžės modelį“ (box-model — angl.). Pavyzdžiui, MS IE6 naršyklė Strict režimo dokumentuose „dėžės modelį“ atvaizduoja teisingai, o kitu atveju — ne.

Atributai nyksta...

target — blankLaikui bėgant HTML vystėsi, kai kurie jo elementai seno ir šiuo metu yra rekomenduojami nenaudoti. Ateity tokie elementai bus iš vis išimti iš standarto. O Strict režime tokie elementai JAU yra uždrausti. Vienas jų — taip mūsų visų megstamas <a> atributas target. Ypač mėgstamas su reikšme target="_blank" :-)

Vyrauja įvairios nuomonės, kodėl. Viena jų — svetainės lankytojas pats turi nuspręsti, ar nuorodą atsidaryti naujame lange, ar tame pačiame. Atsidarantys (kartais masiškai) nauji langai klaidina, erzina. Laikoma, kad tai yra nekorektiška lankytojo atžvilgiu.

Be to ne visi įrenginiai gali atidaryti naują langą — pvz., PDA, mobilieji telefonai ir pan.

Kita nuomonė yra tokia, kad visos „išorinės“ nuorodos (vedančios už šiuo metu lankomos svetainės ribų) turėtų atsidaryti naujame lange. Tuo siekiama išlaikyti klientą svetainėje nepertraukiant jo skaitomo straipsnio.

Problema

Kaip iššaukti naują naršyklės langą išsaugant dokumento kodo atitikimą HTML Strict DTD rekalavimams?

Sprendimas

Išlaikant idėją, primygtinai rekomenduoju informuoti svetainės lankytoją apie nuorodos atidaromą naują langą.
Šioje svetainėje tai yra realizuota — jūsų matote, kad kiekviena nuoroda, vedanti už svetainės ribų yra pažymėta [išorinė nuoroda] ženklu kairėje ir perspėjimu [išorinė nuoroda] aiškinamojoje kortelėje (tooltip — angl.).

Šiai užduočiai įveikti pasinaudosime gabalėliu JavaSript kodo.

HTML

Pagal specifikaciją nuorodos elementas <a> tarp keleto kitų turi atributą rel. Šis atributas skirtas nusakyti einamojo dokumento santykį su nuorodos dokumentu. — Tad šį atributą ir panaudosime pagal paskirtį: kiekvienam <a> elementui turinčiam išorinę nuorodą priskirkime atributą rel="external".

Sugalvokime ką nors giliamintiško, pavyzdžiui: 

Cogito, ergo <a href="http://sum.lt" rel="external">sum</a>!

CSS

Sukurkime stiliaus aprašymą, pvz.: 

.ext-link {
	background: url(/bg/extlink.gif) no-repeat 0 58%;
	padding-left: 16px
}
* html .ext-link {
	background-position: 0 .35em
}

Paaiškinimai:

extlink.gif
mažytis simbolis, kuris bus atvaizduojamas prie kiekvienos išorinės nuorodos. Simbolių pavyzdžiai:

išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis   išorinės nuorodos simbolis

no-repeat 0 58%; padding-left: 16px;
foninio paveikslėlio pozicija.
* html .ext-link { background-position: 0 .35em; }
MSIE „pataisymas“ jei nuorodos tekstas būtų ilgas ir persikeltų į naują eilutę.

JavaScript

Telieka pasirašyti nedidelį JavaScript kodo gabalėlį, kuris akimirksiu peržiūrės visas tekste esančias norodas, atrinks turinčias rel="external" ir priskirs naujus atributus: target = "_blank" :-) ir class="ext-link".

Galutinį kodą galite parsisiųsti ir naudoti įterpdami svetainės puslapio <head> elemente: 

<script type="text/javascript" src="/external.js"></script>

Kodas yra gana paparstas ir aiškus, bet jei iškils klausimų, atsakysiu.

Rezultatas

Cogito, ergo sum!