Managing CSS support in Javascript
Javascript has access to the conditional CSS tools that we have to work when working directly with CSS. This post will cover matchMedia (script support for media queries) and CSS.Supports...
Using Page Visibility
The PageVisibility API lets your application know when a page is visible to the user. While this information may seem irrelevant it enables the creation of Web pages that behave differently when they...
When to deploy a feature in production
What browsers should we support? This is an interesting question: What browsers should we support? This is a deceptively simple question to ask and even harder to answer. This post will try to address...
Placing items in grids
Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to...
Simplifying dark theme creation with light-dark()
We can control the color schemes for light and dark modes through CSS using the prefers-color-scheme media query. These media queries will match the system's color scheme and will allow us to select...
Animating display none and height auto
New properties and functions will enable you to animate properties that, until now, were not animatable. We'll look at the following properties: transition-behavior calc-size() @starting-style used...
Initial, Inherit, Unset and Revert
There are four properties that I've always been curious and confused about: initial inherit unset revert These values are specified in the Values and Units Module Level 4 specification. Resetting a...
Understanding the gap property
The gap property has evolved considerably and has become easier to work with. This post will discuss the evolution of creating gaps in content and how to use the gap property. In the early days of...
CSS length units
Many CSS properties accept numbers as values. Whether these values are whole numbers, decimals, fractions or percentages. Whatever they are, the unit following a number determines its computed...
Adding math formulas to web pages
MathJax = { tex: { inlineMath: [ ['$', '$'], ['\\(', '\\)'] ] }, }; It's not common but there are times when we need to render math equations in a web...