Quintic
HTML5, CSS3, and Javascript

Introduction

Just a few notes on HTML5, CSS3 and JavaScript.

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

HTML5

Necessary basics for beginners.

Learning all of the various HTML tags and there attributes is obviously required, and I am not going to detail those here. However there is one over arching piece of information that is important when designing and that is understanding the document flow, the HTML elements that participate in document flow and those that do not. (Indeed to make it even more confusing, that elements that normally participate in document flow can be removed from the flow by setting their display attribute).

Document Flow defines how HTML elements order and present themselves when displayed. For example you may want an image to appear in-line in a sentence, or have the image appear to the side with the words flowing around, or even the image acting as a background.

So first thing which elements / tags do NOT – EVER impact document flow.

  • <head> –  and any elements that are included in the Head section
  • <style>
  • <span>

The way that other element participate in document flow can be affected by their display attribute, which can have a host of values, (see: https://www.w3schools.com/CSSref/pr_class_display.asp), but those most commonly used to affect document flow are:

  • none – removes the element from participating in the document flow.
  • inline – Displays an element as an inline element (like <span>). Any height and width properties will have no effect
  • block – Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
  • inline-block – Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

DIV & Positioning

I did have a problem positioning and sizing <div> elements. When I was last into HTML, to get the layout you needed you used tables and tables within tables. 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. Similarly its height, unless defined explicitly, is defined by its content. No content -> no height -> nothing visible. So if you are wondering why when you have set the background of your <div> element (to say an <img>) and the <div> element is not displayed, it is possibly because the <div> has no content and hence no height or width. 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 the 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.

CCS3

The title bar on the Quintic pages have the ‘Q’ in Quintic displayed in a larger font than the rest of the text. Originally I did this manually, that is ‘Q’ and ‘uintic’ were separate words, and I manipulated the fonts, margins and alignments to get the effect I wanted.

I then came across CSS Pseudo-Classes and Pseudo-Elements https://www.w3school.com/CSS/css_pseudo_elements.asp . Specifically the first-letter pseudo-element.  At first glance this was exactly what I needed. So I:

  • Created a CSS .LogoText::first-letter definition (.LogoText being the class for the ‘uintic’ text).
  • Changed ‘uintic’ to ‘Quintic’
  • Deleted the stand-alone ‘Q’

and …. – it didn’t work. Why not? Because the first-letter pseudo element only applies to the first word in a block. In my case the block started with the Quintic logo (image file), and so first-letter did not apply to Quintic. Instead I had to:

  • Wrap ‘Quintic’ in its own <p></p> tag (although any block element would have done) and then set this <p> tags display attribute to inline-block so that it continued to flow after the image, but was still a new block as far the first-letter was concerned. This works a treat and has simplified my HTML.

Images and CSS3

On my web site I have a full page background image for the ‘Corporate pages’ (Front page, About, Contacts, Privacy…). For those pages with text, I needed to make the image less intrusive so that the text was readily legible. At first I though I would need to have two images, the Full Image for the Front-page and then a slightly opaque, barker image for those pages with text. Enter CSS. The Image style property has attributes of opacity and filter that allow you to do just that:


#imageTransparent {
    opacity:0.50;
    filter:alpha(opacity=50); /* For IE8, Just in case */
    filter:brightness(50%);
}

Javascript

Just a quick note on this. I needed to load a different background image on the Corporate pages depending on Media and orientation. Obvious solution – Quick bit of server-side Javascript (or PHP, or whatever …) In this case

<img id="mainBodyImageTransparent" />
        <script>
            var image = document.getElementById("mainBodyImage");
            image.src = backgroundImg;
        </script>

where backgroundImgTransparent is defined in my Media.js file as:

backgroundImgTransparent = “./images/imageName_” + orientation + “.jpg”;