In the last post, we discussed logical attributes and how they depend on the vertical and horizontal directions of the text. In this post we'll look at the writing-mode CSS attribute and the direction HTML attributes with its companion :dir CSS pseudo class. Writing mode CSS writing modeshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSWritingModes specify the block flow direction and the direction in which inline content flows within a block container. Writing modes are tricky because they vary from language to language. The most common writing mode is "horizontal, left to right", expressed as horizontal-tb with the direction attribute set to ltr. In the case of...
When the web first came about, it was primarily in English and we didn't have to worry about laying out content for other languages. But now the web has become universal. Unicode covers most, if not all, languages and we can have content written in many languages other than English. Some of these languages are written from right to left, some are written top to bottom and some are written both top to bottom and left to right. This post will look at CSS logical propertieshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSLogicalProperties as a way to make styles less dependent on the actual direction of the...
I'm starting to look at creating web-based presentations again and looking at the alternatives. My two favorite presentation engines/frameworks are Reveal.jshttps://revealjs.com/ and Inspire.jshttps://inspirejs.org/. Both frameworks have the things I consider as the minimal requirements for web-based presentations: Speaker/presenter notes to provide additional information Markdown support for authoring content Syntax highlighting for code examples Incremental display of content One thing that Inspire.js does is provide a way to do live coding in a slide using Prism Livehttps://live.prismjs.com/. Having the ability to do live coding is awesome but it only works during a live presentation or when viewing a recording of the...
There are times when we need to number things that are not ordered list. The best example, from my experience, is numbering sections of content in the h1 element serving as the title for each section of content. The idea is to turn this heading: html This is the first chapter Into this text: text Chapter 1: This is the first chapter. Without adding additional markup to the document. The solution: Counters and generated content Just like we did in a previous post to add content for figure captions, we'll leverage generated content and counters to insert text into the...
When I was writing a previous post, I wanted to create custom properties in Javascript that I could use in CSS based on the result of running color.jshttps://colorjs.io/ to convert colors and then test if the browser supports a given colorspace. How does it work? This example, as posted in Using color.js as a bridge between color spaceshttps://publishing-project.rivendellweb.net/using-color-js-as-a-bridge-between-color-spaces/, takes a color defined as a new color.js Color object, converts it to an sRGB string as a default. The script then tests if the browser supports different color spaces LCH and Display-P3 using the css.supportshttps://developer.mozilla.org/en-US/docs/Web/API/CSS/supports method. If the color space is...
This article updates Importing JSON and CSS on Javascripthttps://publishing-project.rivendellweb.net/importing-json-and-css-on-javascript/ and corrects come mistakes from the previous post. In Importing JSON and CSS on Javascripthttps://publishing-project.rivendellweb.net/importing-json-and-css-on-javascript/ we discussed the ability to import CSS and JSON directly into Javascript using ESM syntax and import assertionshttps://v8.dev/features/import-assertions. It is now possible to import JSON and CSS into a Javascript module to have some level of control over when they are processed. We import CSS modules like this: js import sheet from './styles.css' assert { type: 'css' }; And then have the option to add them to the document style sheet or to a custom element's...
A while back I wrote a set of Vue 2 components for a WordPress blog. It wasn't a complete project, was missing functionality that I couldn't figure out how to implement and I was afraid it would lock me into a framework although I would rather get locked into Vue than any of the other frameworks I've seen out there. Rather than work with a specific framework, I decided to revisit this as custom elements/web components. according to Custom Elements Everywherehttps://custom-elements-everywhere.com/ most frameworks, at least those that were tested by the site, have pretty good support for custom elements. Even...
CSS layers resolve another problem with CSS specificity and rule order. as I documented in: Looking forward: CSS Layers and the @layer at-rulehttps://publishing-project.rivendellweb.net/looking-forward-css-layers-and-the-layer-at-rule/ CSS Layers or Cascade Layers are a way to group styles together and then apply them in a specific order. All modern browsers now support cascade layers. The idea behind layers is that you create layers as groups so that all the styles in a layer have the same priority and cascade together. There are three ways to create layers: 1. Using the @layer block at-rule, with styles assigned immediately to it: css @layer base { ......
In the past, we've had to write media queries that check for screen/device width as something like this. This query checks if the screen has a minimum width of 768px css @media min-width: 768px { … } and this query checks if the screen is smaller than 768px css @media max-width: 768px { … } You can also combine tests to determine if the value you're testing is within two values. css @media min-width: 800px and max-width: 1024px { … } The new Media Queries spechttps://www.w3.org/TR/mediaqueries-4/mq-range-context explains the new syntax for media queries using ranges. We can write the media...
This feature is only supported behind a flag in Chromium browsers since version 85 and, as far as I know, there is no polyfill. Do not use this feature in production. The prefers-reduced-data media query detects if the user has requested the web content that consumes less internet traffic via the browser or operating system's data-saver option. Until the introduction of the prefers-reduced-data media query, there was no way to honor the data-saver settings. In a music shop app or in any other application where we have a lot of images representing products, we can ask the browser to remove...
