HTML & CSSur HTML, XHTML & CSS
33 svar · 1 363 visningar · startad av ptr_lks
Hej,
läste just att man inte rekomenderas att använda sk inline JavaScript och CSS i XHTML 1.0..
Stämmer detta?
Och gäller det även transitional?
När man kodar på standardvis dvs följer webbstandard så gäller det att separera funktionalitet från struktur och presentation. Då är det enda javaskript man ska behöva se i ett HTML-dokument är detta:
<script type="text/javascript" src="scripts.js"></script>
HEJ!
Hänger på en fråga här, detta gäller väl css också, dvs stilar ska ligga externt, inte i taggarna, tex <td style:"något";>.
(X)HTML för sig, css och javascript likaså alltså?
I praktiken och när du validerar spelar det ingen roll om det ligger i style="" eller klasser/id.
Samma med javascript, du kan lika gärna skriva det i klartext
<script type="text/javascript">
// kod här
</script>
Däremot kan det vara bra att separera den här koden från dokumentet för att få en bättre överblick, samt att det blir enklare att ändra strukturen/designen.
Du slipper alltså ha samma uppsättning kod i flera filer.
Hmm...
Det man får vara noga med när man pratar XHTML är att inte använda tecknen "<" eller "&" i Javascriptkoden eftersom dessa har speciell betydelse i XHTML (via grundkrav som ställs på alla XML-dokument).
... Vilket väl egentligen är orsaken till rådet att bara använda externa Javascriptfiler om men kör XHTML (separeringen av beteenden som webbebba nämner är iofs ett bra skäl, men kanske inte det mest akuta ;) )
... och ja, det gäller även 1.0 Transitional
... det där med kommentarstecknen <!-- och --> i <script> och <style> är inte garanterat att fungera när man serverar sin XHTML enligt konstens alla regler (dvs "som XML") eftersom kommentarer i XML-kod inte garanterat hamnar i den inlästa kodens interna representation ("DOM-trädet") - och därför gör det att det inte är rekommendabelt att ha med dem i "bakåtkompatibel XHTML" (XHTML serverad "som HTML") heller.
- typ
Att det sedan funkar "i praktiken" när man skickar XHTML som HTML är det ingen diskussion om, men då bryter man s.a.s. ganska lätt sönder just XHTML-aspekten av HTML, och då har man enligt min enkla mening valt bort en av grundorsakerna till att använda XHTML till att börja med (nämligen den att man skall kunna hantera sin kod med XML-verktyg om man behöver)
Red: Ack ja - jag tror nog de flesta förstår vad jag menar ändå :OO
jarvklo skrev:
... och ja, samma sak gäller CSS, iallafall om man vill använda selektorn >
Nix pix. :) ">" är välformad XML.
Vill man använda "<" eller "&" i SCRIPT eller STYLE i XHTML som text/html kan man göra såhär:
<style type="text/css">
/*<![CDATA[*/
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
:bire
Vad gör CDATA för något?
Den talar om för en XML-tolk att det som följer är "character data" och ger som följd att allt mellan <![CDATA[ och ]]> (som inte är en del av just strängen "]]>") även får innehålla tecken som annars skulle ha haft speciell betydelse (som t.ex. "<" och "&") i löptext.
Mellan <![CDATA[ och ]]> tolkas alltså inte <b>fet</b> som elementet <b> med innehåll "f", "e" och "t" utan som teckensekvensen "<", "b", ">", "f", "e", "t", "<", "/" "b" och ">" (och det är en rejäl skillnad det i XML ;) )
... Men det där behöver man inte tänka på om man kör med externa Javascript- och CSS-filer - vilket naturligtvis är en bidragande orsak att så många rekommenderar folk att separera sin kod :)
Exemplet som Simon visar upp kommenterar alltså bort <
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<link href="p93.css" rel="stylesheet" type="text/css" />
[B]<script type="text/javascript" src="popup.js"></script>[/B]
</head>
[HTML]<a href="javascript:popUp(2)">text</a>[/HTML]
HEJ!
För att göra koden enklare bör ändra dina funktioner till att vara endast en, och sedan skickar de variabler (fönsterbredd/-höjd, olika egenskaper (meny, statusrad, scroll etc)) du behöver i funktionsanropet.
En sådan funktion kan göras på x antal sätt, ett gott urval finns i javascript-forumet.
J.N. skrev:
HEJ!
För att göra koden enklare bör ändra dina funktioner till att vara endast en, och sedan skickar de variabler (fönsterbredd/-höjd, olika egenskaper (meny, statusrad, scroll etc)) du behöver i funktionsanropet.
En sådan funktion kan göras på x antal sätt, ett gott urval finns i javascript-forumet.
oki... skall söka... MEN måste erkänna att jag inte riktigt förstår vad du menar :q
ptr_lks skrev:
oki... skall söka... MEN måste erkänna att jag inte riktigt förstår vad du menar :q
Så jag är tacksam för lite mer hjälp...
ptr_lks skrev:
Är detta rätt :q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Titel</title> <link href="p93.css" rel="stylesheet" type="text/css" /> [B]<script type="text/javascript" src="popup.js"></script>[/B] </head> <a href="javascript:popUp(2)">text</a>
Som webbebba skrev; den enda javascript kod man ska behöva se är <script> elementet. I ditt exempel har du skriptkod även i <a href- attributet.
Här är ett inlägg som visar ett exempel på hur man kan göra:
http://www.webforum.nu/showthread.php?t=117902
HEJ!
J.N. skrev:
...
En sådan funktion kan göras på x antal sätt, ett gott urval finns i javascript-forumet.
Det jag menar är att du använder något liknande detta.
function cw(sida,sidnamn,settings,w,h){
//funktion för att centrera fönster. J.N. 7/5-02
var xMax = screen.width;
var yMax = screen.height;
var xOffset = (xMax - w)/2
var yOffset = (yMax - h)/2;
var oppna = window.open(sida,sidnamn,settings + ',width=' + w +',height=' + h +',top='+yOffset+',left='+xOffset+'');
//tillagt 3/9-02: kontrollera om focusfunctionen finns, sätt då focus på fönstret
//tillagt 21/10-05: oppna &&, så de med popupblockerare slipper felmeddelanden, enligt wF Peter S.
if(oppna && oppna.window.focus){
oppna.window.focus();
}
}
Du skickar med features i klartext; de du vill använda sätter du till yes, scrollbars=yes. http://www.devguru.com/Technologies/ecmascript/quickref/win_open.html
Kalla på funktionen med
<a href="javascript:cw('sida.htm','namn','menubar=yes,resizable=yes','600','450')">klick!</a>
Har märkt att centreringen inte kan kallas detsamma i Opera, har inte lagt tid på att lösa det, få användare och det fungerar ändå.
J.N. skrev:
Kalla på funktionen med
<a href="javascript:cw('sida.htm','namn','menubar=yes,resizable=yes','600','450')">klick!</a>
Fast nu blandar vi ju in javascript i märkkoden ändå, och länken fungerar inte för användare utan javascript.
Länken borde se ut ungefär såhär:
<a href="sida.htm">test</a>
Sedan hur länken ska bete sig skriver man i den externa skriptfilen...
HEJ!
zcorpan skrev:
Fast nu blandar vi ju in javascript i märkkoden ändå, och länken fungerar inte för användare utan javascript.
...
Korrekt, jag tänkte inte på att jag i den snutten jag kopierade inte är den som jag använder nuförtiden. Denna fungerar utan javascript.
<a href="sida.htm" onClick="cw('sida.htm','namn','menubar=yes,resizable=yes','600','450'); return false;">
J.N. skrev:
Det jag menar är att du använder något liknande detta.
OM man läser väldigt noga mellan raderna skönjer man att jag menar "vi kommer in på en javascript-fråga". Det hade underlättat för er om jag skrivit det också! :r
Det löste bara det ena "problemet", det finns fortfarande javascript inblandat i märkkoden. :)
För att lägga händelsehanteraren i den externa skriptfilen kan man göra till exempel såhär:
document.addEventListener("click", pop, false);
function pop(e) {
var elm = e.target;
if (elm.className == "pop" && elm.href) {
return !window.open(elm.href);
}
}
<a href="sida.htm" class="pop">test</a>
Funkar den där i alla webbläsare? I sådana fall är det precis vad jag väntade på :)
Definiera "funkar" och "alla"... ;)
Det går att följa länken i de webbläsare som kan följa länkar, däremot öppnas länken i ett nytt fönster bara i de webbläsare som även förstår skriptet. Om jag inte minns fel har äldre versioner av Safari en bugg där e.target kan retunera ett textNode (istället för en elementNode), samt IE6 behöver ett aningen modifierat skript med attachEvent och e.srcElement eller så.
if (document.addEventListener) {
document.addEventListener("click", pop, false);
} else if (document.attachEvent) { //msie
document.attachEvent("onclick", pop);
}
function pop(e) {
var elm;
if (e.target) {
elm = e.target;
} else if (e.srcElement) { //msie
elm = e.srcElement;
}
while (elm.nodeName != "A") {
elm = elm.parentNode;
}
if (elm.className == "pop" && elm.href) {
return !window.open(elm.href);
}
return true;
}