Browsers, HTML, CSS and JavaScript

This page is all about website technicalities - not about Pageant. If you aren't interested, now's the time to press the back button!

Just a few definitions (but you probably know all this!) A Browser is software on your computer, which you use to access websites on the internet. HTML (Hypertext mark-up language) is used to write web pages. CSS (originally meant cascading style sheets) is used to define the layout and appearance of the web page. JavaScript is a programming language used to do things on a website which can't be achieved with HTML and CSS. HTML, CSS and JavaScript are all defined by various standards which web designers should adhere to. Likewise all browsers should conform to these standards, so they all display the same page in the same way.

This page explores some of the issues which occur in trying to keep the Pageant website up-to-date with the latest versions of the major browsers, while ensuring that older archived pages still look as intended. Over the last few years most of our pages have been converted to responsive format so that they will work well on mobile devices as well as on desktops and other large screen devices. There is the temptation to employ some of the latest browser features to simplify this. However, we need to ensure that all or pages work well with earlier versions of browsers, as not everyone keeps their browser up to date!

The main browsers

Google Chrome

At the time of writing, Google Chrome has the highest usage of web browsers on desktops and laptops. It is available for several operating systems, including Windows, Linux, MacOS and Android. New versions are released regularly, and update is almost automatic. The current release is version 62.

Mozilla Firefox

Firefox is the second most used browser. It is available for Windows, Linux and MacOS. Firefox is 'open source' so there is a continuous process of improvement and update by many authors. The most recent 'stable version' is version 56, though version 52 ESR is compatible with more add-ons.

Internet Explorer & Edge

The latest release of Internet Explorer (IE) is version 11. Microsoft has announced that this will be the last version of IE, though they will still continue to support it. It has been replaced by Microsoft Edge, which comes as the default browser for Windows 10. The current release is version 41, and it is updated automatically when Windows 10 is updated.

Opera

Opera is available for Windows, MacOS and Linux. The current stable version is 48.

Safari

The Safari browser was developed by Apple for its own range of hardware - the family of Mac desktops, iPads and iPhones - and requires an Apple operating system. The current release is version 9 for Apple devices only. In 2007 Apple released a version of Safari which would run under Microsoft Windows. The last Windows version, 5.1.7, was released in May 2012. Since then Apple has not released any new Windows versions and has ended support for 5.1.7. It works well in recent versions of Windows, including Windows 10, but it does not implement recently added features of HTML and CSS. Also 5.1.7 has known security issues which will not now be patched.

Pageant website development

This website is being maintained and developed in a Windows environment. We try to ensure that it works well for the latest versions of all the main browsers. Our website is now largely mobile friendly. All new pages are in responsive format, so that they work equally well on devices with different screen sizes. We have also converted all main and frequently accessed pages to responsive format, making full use of new features included in HTML5 and CSS2.1. We are confident that all our responsive pages work well with the latest versions of Microsoft Edge, Internet Explorer, Firefox, Opera and Google Chrome. However, we can't check with an up-to-date Safari. The latest versions won't run under Windows and online emulators for Apple devices just show what appears on their screen, but actually use whichever local browser is used to access the emulator.

The user experience

Whichever browser you choose to use, please check that you have the latest version and if not update it. However, if you are running Safari under Windows, then remember that this is now out of date and unsupported. My personal advice is don't continue to use it. You have a choice of several browsers, all of which are regularly updated to patch security issues.

Example 1

While converting an old page to responsive format, it was necessary to handle a row of five photos of some delightful goats. I was tempted to use the flex property, which was introduced in CSS3, but was not part of CSS2.1. If you scroll down you will see this idea in use (with a yellow background to distinguish it from the second example). On large screens the goats should appear in a single row across the page. On devices with small screens the layout changes by moving the last photos down into a new row, so depending on screen size, you may see 1, 2, or 3 rows. However, on older browsers, including Safari 5.1.7, the browser cannot respond to the CSS code which does this, and the photos are always in a single column no matter what the screen size.

Example 2

This example uses CSS code which is covered by the earlier CSS2.1 standard, together with our own custom CSS definitions. The five goats should appear in a single row on large screens, but change into 2 or 3 rows as screen size is reduced. This should work for all browsers including two or three year old versions - and that means Safari 5.1.7.

Can you help?

There is no easy way for me to check during development that our pages will work with browsers which don't run under Windows. So I have decided to stick with well tried HTML5 and CSS2.1 standards, which have the bonus of working well with older versions of browsers. I would appreciate some feedback from anyone who finds that either of the two examples above don't work as described. You can email me or use our website feedback form