{"id":3,"date":"2004-09-19T12:05:46","date_gmt":"2004-09-19T16:05:46","guid":{"rendered":"http:\/\/www.unitstep.net\/blog\/archives\/2004\/09\/19\/about-separation-of-behaviour-and-presentation\/"},"modified":"2006-05-16T23:00:54","modified_gmt":"2006-05-17T03:00:54","slug":"about-separation-of-behaviour-and-presentation","status":"publish","type":"post","link":"https:\/\/unitstep.net\/blog\/2004\/09\/19\/about-separation-of-behaviour-and-presentation\/","title":{"rendered":"About separation of behaviour and presentation"},"content":{"rendered":"

If any of you have visited SimpleBits<\/a> (the personal site of Dan Cederholm), you’ll probably be aware of their great SimpleQuiz<\/a> series of discussion-provoking questions that are mostly about semantics. While I’m not a huge semantic nut (though I think semantics are useful, but at times impractical), one quiz caught my attention over the summer, and I’ve still been thinking about its topics for a while.<\/p>\n

That quiz would be SimpleQuiz XVI: Launching Windows<\/a>. It proposes the question of what is the correct way to launch a new window for a hyperlink when it is clicked on. Since XHTML<\/acronym><\/a> 1.0 Strict and XHTML<\/acronym><\/a> 1.1 (without the proper module) do not allow the target<\/code> attribute, this is a problem when it comes to validation. (HTML<\/acronym> 4 Strict does also not allow the target<\/code> attribute.) A limited set of solutions is intially proposed, but the comments quickly provoke more questions, such as: Should a website even be able to specify a new window for a link, to the chagrin of some users?<\/p>\n

Many users felt that the answer to this such question should be a resounding “No”, as many people seem to be annoyed when the default behaviour of a clicked link is something else than they expect. This is understandable, as most of the people who are responding are undoubtedly “power users” who have plenty of Internet browsing experience and well-defined habits. However, many people are not like that and that nonwithstanding, I still think there are legitimate uses for launching a new window, for example, from a page that has been POST’d to, and as such, the web developer might not want the user to leave the page, which could perhaps expire the data.<\/p>\n

Also, using the target<\/code> attribute despite the fact that the attribute is not specified in those aforementioned DOCTYPEs is not an acceptable solution for those who take their validation seriously. That leaves the option open to using XHTML<\/acronym><\/a> 1.0 Transitional, which I don’t believe is a problem, but many people will gawk at this suggestion as well.<\/p>\n

Therefore, the solution of using JavaScript to perform the new window opening was suggested as the ideal solution, since, JavaScript should primarily be responsible for behaviour, and the opening of a new window is most definitely a behavioural aspect. However, as many pointed out, the implementation of this solution matters heavily. Simply putting an inline call to JavaScript in the XHTML<\/acronym><\/a> code is no better than non-separation of content and presentation, since inline JavaScript combines behaviour with content.<\/p>\n

In the end, the solution I liked best was to assign a class to any link that you wanted to open in a new window, then use JavaScript to navigate the DOM and change the target property of such elements to _blank<\/code>. Though, some people will again go back to the first question, and say that you shouldn’t have any links open in a new window by default, and then back up this claim by saying that the “semanticness”<\/a> is suspect.<\/p>\n

A nicer solution would be to identify external links using different styling, and also have a JavaScript-enabled control on the page that could toggle the opening of such “external” links in new windows on or off. I’ve seen this before, and so a moderate knowledge of JavaScript and CSS<\/acronym> would be all that was needed to make such a useful script.<\/p>\n

But a bigger question that was raised in my mind was regarding the initial topic of separation of behaviour and style. In the current version of CSS<\/acronym>, this may not be fully encouraged, in my opinion. The small example I have is of the :hover<\/code> pseudo-class used as a selector. As many of you know, it allows the style of elements that recieve an “onmouseover” event to be specified. But, should any style changes be implemented this way, since it explicitly uses CSS<\/acronym> to define a behavioural aspect, that is, what happens when the mouse pointer hovers over an element? Don’t get me wrong – I’m not trying to preach to everyone, as I’ve always uses the :hover<\/code> as a selector; it’s just much easier than using a JavaScript solution, which is entirely possible.<\/p>\n

But, then again, using the target<\/code> attribute is also easier. Right now, I’m sort of confused – both appear to violate the separation of either behaviour and content or behaviour and presentation yet one is apparently condoned on the whole.<\/p>","protected":false},"excerpt":{"rendered":"

If any of you have visited SimpleBits (the personal site of Dan Cederholm), you’ll probably be aware of their great SimpleQuiz series of discussion-provoking questions that are mostly about semantics. While I’m not a huge semantic nut (though I think semantics are useful, but at times impractical), one quiz caught my attention over the summer, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,4,2],"tags":[],"_links":{"self":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/3"}],"collection":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":0,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/posts\/3\/revisions"}],"wp:attachment":[{"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/media?parent=3"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/categories?post=3"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitstep.net\/wp-json\/wp\/v2\/tags?post=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}