HTML5, CSS3 and JavaScript

Just a few notes on the above.

HTML5, CSS3 and JavaScript are not actually optional technologies. If you do dive into HTML5 then you need CSS3 and JavaScript. You can use plain old HTML without CSS and JavaScript, and everything will work fine. But if you do delve into HTML5 then you will need CSS3 and JavaScript.

 

Best description I have read about these three technologies is:

  • HTML5 – Defines the content
  • CCS3 – Defines the appearance
  • JavaScript – Defines the behaviour

DIV & Positioning

I did have a problem positioning and sizing <div> elements. When I was last into HTML tables and tables within tables were used to get the layout you needed. Today, quite rightly, tables are used for what they where intended, and layout is all about <div>. So what are the positioning and sizing problems?

  1. <div> is a block element. The width of a block level element, unless set explicitly, is 100% of its containing element. Its height, again unless defined explicitly, is defined by its content. No content -> no height -> not visible. So if you are wondering why you have set the background of your <div> element (to say an <img>) and cannot see it, it is possibly because the <div> has no content and hence no height. Judging by the Web, this seems to be a common mistake.
  2. Second is the position attribute, or rather the relative value of position. With position:relative the <div> element (indeed any element) is still participating in the document flow. So regardless of where it is moved to (i.e. displayed), it still leaves the space where it was in flow. With position:absolute that is not the case. The element is removed from the document flow. That change in behaviour between position:relative and position:absolute does make a huge difference as to when you use one over the other. The choice of which to use is not just about the reason you want an element located where you do, but also how you want it to behave.

Loading HTML snippets

One omission in HTML that I am amazed has not yet made it into the standard, is the ability to inject HTML snippets into a document. You can inject javascript from files. You can inject CascadingStyleSheets (and in both of these files you can inject other files to whatever depth suits).  However you cannot inject HTML into an HTML document. There are several web sites out there detailing techniques for using javascript to achieve (possibly) what you want, but for there not to be a mechanism to inject HTML yet seems inconceivable.

I remember when I was developing web pages back in the late 1990’s one issue was that standard Headers and Footers had to be either manually copied to every page (and updated on every page!), or else loaded dynamically using server-side programming. Guess what? We are still in that situation today. I notice that an RFC for this functionality has been submitted to the W3C. I haven’t read the RFC, so cannot comment on its suitability, but I do hope that, if not this proposal, then something that supplies this functionality is approved soon  – and then implemented in the Browsers in short order.

 

Author: Daddy Raccoon

My chronological age is about twice my self-image age and about three times that of my maturity. I have two daughters and they both seemed to me to be older than me by the time they were twelve.

Leave a Reply