Guide to updating your site's JavaScript and CSS

Last Modified:: 13 Oct 2021
User Level:: Power User

Developing and refining an existing site may include updates to your JavaScript and stylesheet (CSS) files. Updates should be tested across the site to catch unintended results before they are applied to the live site. Depending on the extent of the update, there are a few approaches that can be considered.

If the updates require changes to Page Layouts, Content Types or Navigation Objects, consider reading our Guide to Developing and Testing in TERMINALFOUR.

Developing Locally

It's recommended that you develop JavaScript and CSS updates locally, within your own environment. Take local copies of example pages from your website and point them to the JavaScript and CSS files that are being developed locally (instead of the CSS and JS on the live website), and make the necessary updates for full browser and accessibility testing.

Instead of updating the main CSS file, which may contain Media T4 Tags within the Media Library, it can be useful to keep the updates within separate files. Since CSS ordering dictates precedence you can update a separate stylesheet that is linked to last. When the development is ready to implement into TERMINALFOUR, the changes can then be put into the main file.

If all changes are made in the main CSS file, then the file in the Media Library would need to be updated with the new version of the CSS file and all image references would require conversion to Media T4 Tags. The same could be applied to JavaScript, if necessary.

Update in TERMINALFOUR

Once the changes have been tested locally, and are ready to be updated in TERMINALFOUR, there are a few approaches, depending on the volume and complexity of updates.

Low Risk and Minor Updates

For very minor updates, that only impact single Page Layouts or Content Types, it can be possible to update the files in the Media Library, preview the relevant pages to test, and then publish. This should only be done for updates that are small and low risk, that would not have a big impact on the site.

Medium Risk Updates

The new JavaScript and CSS files can be added to the Media Library and included in Page Layouts using Programmable Layouts which only include those files on Preview (but not on Publish).

This allows the full site to be tested in Preview before the changes are added to the main JavaScript and CSS file to be included in Publish.

High Risk and Extensive Updates

For large updates, that are site-wide or high impact, it may be worth implementing the updated files in a test or development environment of TERMINALFOUR. This will allow you to publish out the full test site with the updated CSS/JS, for site-wide testing. Once tests have been completed and are successful, the changes can then be implemented in the Production environment. In this case, you may choose to temporarily suspend the scheduled publish and/or transfer of the site to allow the updates to be completed and checked before the site is published and/or transferred to live.