I first saw information about color fonts in 2013 in Color fonts. Overview of the proposals for color extensions of the OpenType font format.https://www.fontlab.com/news/color-font-format-proposals/ but they haven't taken off despite Safari supporting one type of color font SVG in OT. It's only been in the last couple of years since 2021 when browsers other than Safari started implementing color fonts COLRV1 and it's only in 2022 that browsers have implemented the CSS necessary to make color fonts really useful, as documented in COLRv1 and CSS font-palette: Web Typography Gets Colorfulhttps://css-tricks.com/colrv1-and-css-font-palette-web-typography/ This post will discuss the COLRV1 color font format and...
There are multiple ways to handle theming an app or a site. The first one depends on whether the user has enabled light or dark mode at the operating system level. We can use prefers-color-schemehttps://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\ media queries like any other media queries, loading them in a stylesheet: css @media prefers-color-scheme: dark { / all styles for dark color scheme go here / } @media prefers-color-scheme: light { / all styles for light color scheme go here / } A more interesting approach is to use the media query as the value of the media attribute of the linkhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/link element. This...
Using templates in Web pages has always been complicated and always required third-party libraries like Handlebarshttps://handlebarsjs.com/ and Moustachehttps://mustache.github.io/ HTML templateshttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/template, part of the web components family of specifications, provide a native way to use templates on the web with minimal Javascript interaction. Templating in HTMLhttps://kittygiraudel.com/2022/09/30/templating-in-html/ explains the basics of how to use a template element to create reusable code in your page. The first step is to create the template in HTML. We give it an ID so it's easier to retrieve from Javascript later. This template is inert meaning that it won't be read by the browser's HTML parser...
One of the biggest security issues with web applications is Cross Site Scripting XSS. In an XSS attack, malicious code is added to HTML that we expect the browser to parse, thus rendering and executing the malicious code on the page. Let's assume that we have the following template. js foreachreview in reviews { ${review.title} ${review.text} } And then we feed it the following data: text // Review 1 Title: Friendly and delicious! Text: The Restaurant is right in the center of town. It has top food en it's a very nice place with a friendly and professional staff //Review...
In dialogues in the webhttps://publishing-project.rivendellweb.net/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 first item to style is the dialog element itself. In this example, we set the width of the modal dialogue to 50ch and a 1em padding. We can add more styles as necessary. css .modal { padding: 1em; max-width: 50ch; } Styling the backdrop The other CSS rule is the ::backdrop pseudo-element. The ::backdrop CSS pseudo-element is a box the size of the viewport that...
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, inspector, or subwindow. This post will walk through creating dialogues using the dialogue element. To get started we need some HTML on the page. We need a button we can click to open the dialogue. html open modal We also need the dialogue that we want to open. Even though the dialog is on the page it won't be displayed until we open it. The close button inside...
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 my attention. People say that this is valid HTML: html demo page Demo Page Title Content goes here It is not valid HTML. It relies on the backward compatibility requirements of modern browsers regarding broken HTML content. Chrome, for example, will insert the missing elements to make the page render correctly. This is how Chrome will show the page in DevTools: html demo...
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 to work with all of them without writing duplicate code. According to MDNhttps://developer.mozilla.org/en-US/docs/Web/API/Pointerevents: > The pointerhttps://developer.mozilla.org/en-US/docs/Web/API/Pointereventspointer is a hardware-agnostic device that can target a specific set of screen coordinates. Having a single event model for pointers can simplify creating Web sites and applications and provide a good user experience regardless of the user's hardware. However, for scenarios when device-specific handling is desired, pointer events...
Reading min, max, and clamp: three logical CSS functions to use todayhttps://web.dev/min-max-clamp/ presented an interesting case for using clamphttps://developer.mozilla.org/en-US/docs/Web/CSS/clamp: Controlling the width of a text-container. In typography books, we're told that text should be between 45 and 75 characters wide. Until I saw the example, I hadn't thought about using clamp in combination with the chhttps://developer.mozilla.org/en-US/docs/Web/CSS/length length unit to express this requirement. In the following code snippet, we tell the browser that we want the width of the article to be 50% of the screen width but no smaller than 45ch or larger than 75ch, regardless of the viewport size....
As documented in CSS values and unitshttps://developer.mozilla.org/en-US/docs/Learn/CSS/Buildingblocks/Valuesandunits 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 the viewport's width. | | vh | 1% of the viewport's height. | | vmin | 1% of the viewport's smaller dimension. | | vmax | 1% of the viewport's larger dimension. | Most of the time I will limit my use of viewport units to vh and vw. The table below shows a...
