Text that is visually hidden cannot be found by the browser's find-in-page feature and may not be visible to accessible technology like screen readers. This is a problem for screen reader users, who rely on this feature to navigate content. This post explains how to make hidden text findable for everyone. The problem hidden text in a web page is not searchable when you use the browser's built-in find-in-page feature. This is a problem for screen reader users, who rely on this feature to navigate content. For example, if a user is looking for a specific word or phrase in...
CSS has progressed enormously in the last few years. This is both good and bad. The good : CSS has become very powerful and it has gained many new features that make design and development work easier. : You can now use CSS to achieve tasks that previously required JavaScript or were impossible to do on the web. The bad : It has become hard to keep all of CSS in your head and, even to know what you're looking for in references like MDNhttps://developer.mozilla.org/, web.devhttps://web.dev/ or your favorite resource : CSS has also evolved in both the length of...
Compression has been around for a long time, and it's a key part of web performance. In this post, we'll compare three popular compression methods: GZip, Brotli, and Zstd. We will first look at each compression standard, compare them when compressing a file and then look at how they can be used in the web, on their own and with compression dictionaries. The compression methods We will work with three compression: GZip, Brotli, and Zstd. GZip : GZip is a file format and a software application used for file compression and decompression. The program was created as a free software...
The different values for text-wrap provide reading experience enhancements for headings and long-form text. This post will look at two values for the text-wrap property: balance and pretty. text-wrap: balance text-wrap: balance wraps text in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, text-warp: balance only works for small blocks of text: six lines or less in Chromium browsers and ten lines or less in Firefox. text-wrap: pretty When using text-wrap: pretty, text is wrapped across lines at appropriate...
A somewhat contrarian view on designing websites is to design for bad performance. This post will explore the idea of how designing for bad performance can lead to better user experiences. Credit where credit is due: The ideas from this post are taken from Designing websites for bad performancehttps://calendar.perfplanet.com/2024/designing-websites-for-bad-performance/ Bad performance, what? Bad performance is a reality for many users around the world. It's easy to forget that not everyone has access to high-speed internet connections or the latest devices. This is not a problem exclusive to developing countries. Even in developed countries, there are areas with poor internet connectivity...
One of the things that has always bugged me is how to display relative dates on a web page in the Eleventy template that I chose to use for this blog. This post will explore the issue, how the template currently displays dates and how to use intl.RelativeTimeFormathttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/RelativeTimeFormat to display relative dates without using third-party libraries. Displaying dates in human readable formats As currently implemented, The Eleventy template uses the following filter to display dates in a human-readable format. This code uses the Luxonhttps://moment.github.io/luxon/ library to format dates. This is a lighter alternative to Moment.jshttps://momentjs.com/ and other heavy duty date...
Talking about web browser support for a given CSS or Javascript is deceptively simple. This post will explore a definition of browser support, different strategies to support a feature accross browsers, the concepts of graceful degradation and progressive enhancement, and how to handle features that can't be polyfilled. How to evaluate browser support When talking about browser support, we are actually asking three related questions: 1. How essential is the feature to the application? 2. Is the feature supported in all browsers? 3. Is there a way to polyfill or provide an alternative for the feature? For most CSS and...
When working with media querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSmediaqueries is that we can't reuse media queries. A naive approach is to define the value as a CSS variable in the :root pseudo-class. css :root { --width: 20em; } And then use the variable in the media query. Unfortunately, this doesn't work. css / This will not work / @media min-width: var--width { } Instead of using CSS variables, we can use custom media querieshttps://developer.mozilla.org/en-US/docs/Web/CSS/@mediaCustommediaqueries. These are aliases for media queries. This is a two step process. First, we define the media query using @custom-media. The value for the custom media is included in parentheses...
This post will discuss leading, how to control it in CSS and the new text-box-trim property. Leading is the space between blocks of text; the term comes from the strips of lead that were used to separate lines of metal type. I had a hard time wrapping my head around this concept so I did some research and came accross the following: Consider that a typographic letter has multiple peaks. There’s the x-height, which marks the top of the letter “x” and other lowercase characters not including ascenders or overshoots, the cap height, which marks the top of uppercase characters...
Most of the time we measure the time it takes for a page to load, the number of requests, the size of the assets, etc. But we often forget that the user's perception of performance is not always aligned with these metrics. In essence, how fast is fast enough? This post will try to answer this question and explore perceived performance as a way to improve the user experience. Defining perceived performance The definition I'm using here based on Psychology of Speed: A Guide to Perceived Performancehttps://calibreapp.com/blog/perceived-performance: Perceived performance refers to how fast or responsive a website or app feels...
