The web browser😲. One of the greatest inventions on our planet. You are probably reading this article using one. There's an 80% chance that the browser you are using is Google Chrome, Microsoft Edge, or Safari. There is also a 95% chance that you are not reading this article from Internet Explorer (RIP).

A web browser is an application software that enables users to navigate and search the internet for information. A key aspect of internet searching is user experience and accessibility. I want to focus on user experience in this article, specifically how elements are rendered on a web page and the numbers associated with that.

Box Sizing

Box sizing is a CSS property that specifies the behavior of the 'width' and 'height' properties. It is most commonly used with a value of either border-box or content-box. You might have seen CSS code that looks like this:

body {
    box-sizing: border-box;
}

Depending on your project and approach to writing CSS styles, the code above simply tells the browser to include the border of every HTML element when calculating the width and height. A value of content-box does the opposite, it tells the browser to calculate the dimension of elements by excluding the border of the element.

This is something that will most likely not affect the visual aspect of a web page, but if you inspected using developer tools, you would understand exactly how these values are calculated. Have a look at the picture below. Content box excludes the border part from the height and width whereas border box includes it.

CSS Units

In Cascading Style Sheets, there are multiple unit types to choose from when styling elements.

.box{
    width: 100px;
    height: 80px;
}

The px part of the code snippet above can easily be replaced with the following:

There are several other unit types, but these are the most common. CSS also allows us to do math using a special calc function

.box{
    width: calc(10px * 50px);
}

This evaluates a mathematical expression, and the following operators can be used: +, -, *, and /.

• Multiplication: width: calc(10px * 50px);
• Division: width: calc(10px / 50px);
• Addition: width: calc(10px + 50px);
• Subtraction: width: calc(10px - 50px);

JavaScript Calculations

There are default values that cannot be changed by us. These are typically defined by the size of the device. For example, we have the innerWidth property on the window object which is read-only and returns the interior width of the window in pixels (that is, the width of the window's layout viewport). For example:

console.log(window.innerWidth)
console.log(window.innerHeight) // including the height of the horizontal scroll bar, if present.
console.log(window.outerWidth) // returns the width of the outside of the browser window.
console.log(window.outerHeight) // returns the height in pixels of the whole browser window, including any sidebar, window chrome, and window-resizing borders/handles.

There is also the function called getBoundingClientRect that returns a position relative to the viewport.

const element = document.getElementById("content")

console.log(element.getBoundingClientRect())
console.log(element.clientWidth) // This is zero for inline elements and elements with no CSS; otherwise, it's the inner width of an element in pixels.
console.log(element.offsetWidth) // returns the layout width of an element as an integer.
console.log(element.scrollWidth) // measurement of the width of an element's content, including content not visible on the screen due to overflow.
console.log(element.clientHeight) // This is zero for elements with no CSS or inline layout boxes; otherwise, it's the inner height of an element in pixels.
console.log(element.offsetHeight) // returns the height of an element, including vertical padding and borders, as an integer.
console.log(element.scrollHeight) // A measurement of the height of an element's content, including content not visible on the screen due to overflow.
console.log(element.style.width) // The width of the DOM element which is zero for inline elements and elements with no CSS
console.log(element.style.height) // The height of the DOM element which is zero for elements with no CSS

There is also the ResizeObserverSize constructor which is an interface of the Resize Observer API used by the ResizeObserverEntry interface to access the box sizing properties of the element being observed.

const size = new ResizeObserverSize()

console.log(size.blockSize) // returns the length of the observed element's border box in the block dimension.
console.log(size.inlineSize) // returns the length of the observed element's border box in the inline dimension.

Reaching Infinity (The End)

As you can see, numbers are an integral part of web development. Everything within the browser window has some kind of numbers associated with it. I, for one, really enjoy defining breakpoints, manipulating DOM elements, and reading their properties with the added advantage of instant visual feedback. The best part is that you don't need to have majored in the subject of Mathematics to understand how numbers work in the browser.

Feel free to share your comments to this article or get in touch with me. Happy coding and calculating😉