Styling Native Dialogues
In dialogues in the web we saw how to create native dialogues using HTML and Javascript. This post will look at how to style the dialogues and the parent element. Styling the dialogue element # The...
Dialogues in the web
I found an interesting thing that would make it easy to create dialogues for web applications. The dialog element represents a dialog box or other interactive components, such as a dismissible alert,...
What is semantic markup and why it's important
A lot of times we'll hear about semantic markup and its importance on one hand and how you can create really odd or broken markup and it will still render in browsers. The example that still catches...
Switching to pointer events
It is easy to think that everything will work with mouse clicks on the web. However, many devices support other types of pointing input devices, such as pen/stylus and touch surfaces so we need a way...
Using clamp() to constraint a container width
Reading min(), max(), and clamp(): three logical CSS functions to use today presented an interesting case for using clamp(): Controlling the width of a text-container. In typography books, we're told...
New viewport units
As documented in CSS values and units there are new or lesser-known units. The first table, taken from MDN, shows the most common / better known (to me) viewport units Unit Relative to vw 1% of...
Building long-form content on the web: Columns?
There are layouts that are only possible with columns. Thinking about IEEE and ACM paper formats. Example of a two-column paper for ACM publications Example of a paper formatted for IEEE...
Building long-form content on the web: Font size and reading distance
We have many ways of reading content and they will all be different. So how to best optimize font size for reading long-form content online? For this exercise we'll define three sizes for the...
Building long-form content on the web: OpenType features
OpenType fonts, both static and variable, make additional features available for developers to use. CSS makes these features available via the font-feature-settings property. Just like with font...
Building long-form content on the web: variable fonts
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be loaded from a single file and a single @font-face declaration. The single...